Button tool - style text box with border, background color, padding (auto resized when text changes)
To speed workflow it would be good to have button tool in the sidebar. In the property inspector you'd have the ability to specify the top,bottom, left and right padding. the width of button would dynamically resize as you type the button's label.
January 2020’s release of XD now supports content aware layout, which enables you to create flexible buttons. Check out more here: https://letsxd.com/content-aware-layout
Brent B commented
This is weird to find such an old but important request not implemented. Padding is so crucial in sketch, and now framer has an excellent implementation.
+1 Something like the Sketch Plugin Paddy 2.0 does ❤️
Cristian Carlsson commented
Yes, this is soo needed.
This is the only problem I have with the repeat or control pattern..
Would be nice to be able to connect a object size with another object, Then we could set the text and rectangle to the wanted size but then "group with size" or something so they will follow each other..
Or any other solution that is solving the problem of course :)
This would be so good! It would really speed up workflow and as a UX/UI piece of software XD should really be able to do this type of function.
João Rodrigues commented
As XD is not an illustration tool, but rather focused on UX/UI designers who need to build prototypes mostly for web and mobile, it would greatly help to have some sort of smart web and mobile components.
I would expect these smart componants to be easily configured with parameters similar to CSS (like padding or border-radius) - and to behave as expected when resized (for example, increasing width of a dropdown would not change the position of text or the caret relative to the borders).
This would greatly speed up my workflow and allow me to dispense rapid wireframing tools like balsamiq.
Aluko Design commented
If you've used Paddy in Sketch, you'll know how helpful it is when creating buttons that share the same or similar style but change size based on the length of the label.
Like the name implies you set the padding you want between the box (background) and the text (label). When you place or nest the symbol, overriding the label will adjust the width of the button based on how long or short the new label is. If it is nested 2 or 3 levels deep (a symbol within a symbol within a symbol) you can still override the label and it still resizes, something Paddy is not yet able to do in Sketch.
None of the competitors have this feature yet, which is why I'm reluctant to jump ship despite Sketch's choppy performance. With all the UI people create its obvious that buttons are gonna be a part of this, its common sense yet, people still have to create multiple symbols. Plugins suck because if they app updates it might break, or if you're using the app on a work PC that doesn't allow for installs, you're screwed. Please add this feature. Thank you.
Meagan Shoots commented
Agreed!!! Button capabilities would be better for easy workflow. Identifying general padding, font style, corner radius, colors, etc.
Pablo Sara commented
This would actually be very simple if we are able to insert text into any shape and set the padding and text alignment, just like on Indesign and Illustrator
A background color would be very useful.
It would be really beneficial if you could add a background color to a text.
Symbol overrides are ok, but the button-width and height stay the same and has to be adapted by hand. Also longer texts (button labels)
Kevin Quaedvlieg commented
There should be a option where you could click on some text to make that a button. With this option you could choose the background color, the padding, drop-shadow and the border-radius. This suggestion can be really handy to easily create a button without having to deal with margins that are not correct. Also maybe an option should be to add this as a asset so you can quickly apply this button style.
Alex “Monsieur Putois” Clouet commented
Allowing to write in a form and use padding to auto-size it.
Maybe I'm missing something but I want to add a background color to a text box. This would be useful for creating things like buttons. This is one of the most requested features for Sketch that they refuse to implement.
Daniel O'Neil commented
I would love a slightly more generic version of this feature to support adding text to shape for things like a button, form field, sticky note, schematic block, and flow diagram shape.
This would be possible when the general responsiveness / constraints features will be available. I hope soon.
Christoph S. commented
Still no update?
Christoph Mauerhofer commented
Axure treats text elements and rectangles/boxes basically the same, you can style color, border etc. and decide if you want to have text inside, define paddings and if the width is fixed or adapting to content.