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
I just tested the new feature, and it's great, thank you! However, I have prototypes with buttons where they are different sizes, with respective different font sizes, and this doesn't work with my requirement.
Is there another way to do it?
All text boxes should have ability to add background colour, corner radius, and padding/margin on each side. You should be able to set the text box to grow / shrink vertically if more or less text is entered. Also ability to top, middle, or bottom align copy in a text box. You should be able to grow the text box vertically from the bottom or top depending on your pinning.
Ivy Sosic commented
Sketch recently introduced Smart layout which has the ability to automatically adjust components (symbols) when, for example editing text in a component. This happens a lot and instead of having to do this manually why can't a button box adjust automatically when I increase my text size? it's such an intuitive behavior, please add this to your toolbox)
Please update this soon so we can switch to XD from sketch. :)
also, not only for button, this also works for image and any layout that have fixed padding.
Imagine you are making a filled text button. The button has 2 layers: Text layer and Rectangle layer. You have given an internal padding of 16 points between the text layer and the rectangle's horizontal edges. Now if you change the length of the text, then the rectangle length and the internal padding needs to be readjusted all over again.
What is required is a way to freeze the relative positions of the layers so that if the text length is changed then the size of the rectangle automatically changes to maintain the defined padding.
Furthermore if a fixed-width text layer is filled with a string longer than its width, then the layer expands vertically to maintain the spacings of all the remaining elements on the artboard.
UX Designer commented
This is definitely a huge pain point for my team right now and I'm excited to see it's in development. Please, please make sure we have the option, though. Sometimes we need a button or, as another user mentioned, other element to be able to resize based on the text, other times the element size needs to be a locked to a standard size and, if the text string is too long, we need to rewrite or adjust the font. If this ends up being like the component bounding box always resizing, it's hard to create templates for asset with pre-defined sizes.
Андрей Берестовой commented
It is not necessary to do this only for the element with the name "Button". This solution can be universal for any combination of elements, for example, text + rectangle or image + rectangle, etc. The "button" is just a special case.
Ana Mineiro commented
Would be great to have this feature in XD not only for the designer but for sharing for development as well, to be able to give the developer those specs
Mike L commented
I wish I could vote for this twice.
I would also like to add support for an icon BEFORE or AFTER the text inside the button!
With point text I have textboxes which automatically resize to fit text amount. But I can't give the textboxes borders and background colors to design a button. So I have to out the point text box into a rectangle. But the rectangle does not resizes automatically when the text content increases.
In manual mode of responsive resizing, include options to have layout dynamically respond to variable height or variable width of text. Maintaining fixed padding around it as text amount grows.
please review it soon ind give us a beta try
Farhan Ahmad commented
Yes there's this feature needed with fixed padding left and right top and bottom and width should be followed with text size width and height.
This is one major thing that's stopping me from using XD over Sketch more. The Anima plugin for Sketch is great at tackling this issue so I'm eagerly awaiting Anima to become compatible with XD, or for Adobe to add a similar feature in an update. Some news would be great!
How is this not a thing yet?
Jonas Hartmann commented
Any news here?
Robin Wolf commented
Please add a solution provide a plugin to auto adjust the width of buttons as text changes:
André Rocha commented
Any updates, guys?
And also include shadow as formatting. I have just used a component for a button for a white label interface and just realised it doesn't work well if I add a shadow to the original component, as it gets cut out.
Azhar Khan commented