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
-
Pablo Sara commented
YESSS! Please! This would makes everything faster. Currently 2 elements are needed if you want a shape with text inside. We could have it in only one step.
-
Lee Wei commented
This has been under review for a year and a half. Meanwhile, competitors are coming up with great features: https://medium.com/sketch-app-sources/paddy-buttons-a-really-simple-solution-to-a-problem-we-all-have-with-those-little-rascals-ca0eceee1766
Can we please have some update from the folks over at Adobe on the status of this feature request?
-
Ayham commented
It's useful to add Text box color properties
-
Anonymous commented
When content changes, elements should adapt—like a button that gets wider to accommodate longer text.
Reusable components like buttons, menus, and tables should preserve their design integrity, even as the data changes in their individual instances.
-
Steve Gibbons commented
It would be great to be able to create "Smart Groups" with defined padding/margin to conform to textbox based on amount of text.
As it exists now, you can have a group of elements and text fields, and scale the group to allow more content to fit, however this distributes the space between elements equally. It would be great to be able to lock down the spacing between elements, and allow text boxes to expand to fit all content while maintaining the spacing below.
-
Scott Ruth commented
Yes please. I wish XD had something like the "Relabel Button" plugin for Sketch:
https://github.com/kenmoore/sketch-relabel-button
When designing SOFTWARE, you need to design buttons, LOTS OF BUTTONS! If Adobe XD is a tool for designing digital content then we need more power in this area. I've probably spent hundreds of hours of my life just resizing buttons to fit their labels. It's tedious, and Sketch has an elegant solution that should be native in XD.
-
Anonymous commented
Putting text inside an object is standard Adobe software practice. Not having this capability in Sketch drives me nuts.
I can do this in Photoshop and Illustrator to make a button. Why not in XD?
-
Anna commented
Would be great to have buttons work like they do with html. I was shocked when I started using this and realized you have to manually create buttons like you would in Photoshop or Illustrator. If you want us to replace those apps with this for prototyping, we shouldn't need to manually create such a common ui element.
-
Matza commented
That's missing in Sketch, too … No plunging is working fine and fast. I have to press a key-shortcut after changing text! But the frame has to resize in the same time I'm changing the text …
-
Matza commented
Yes, for buttons this would be cool. But for any other Textboxes (white colored text on red ground) thats nice. No more exakt position of a text box (without background) on a colored rectangle, just adding 2 2 2 2 (padding or example) to the text box.
-
Matza commented
YES please!!! And you'd have the ability to say if the text box (or text) changes its width/hight to the left/top or right/bottom or both (centered)
-
sebastien louap commented
Hi Elaine,
I have the same request.
If you look at tools like Axure, (the UX is not super good) but they have small details that is killing some current tools.
for example they considered the test as a text+rectangle.By doing so when you create a button you don't need to add a rectangle + a test. You can have only 1 item that can have different color text + color shape.
It has the strong added value that you can configure the padding (horizontal and vertical) and the size of the shape can be automatically adapted to the text size.
As more than 50% of a prototype is just text + rectangle, it limits a lot the number of items in the page and improve the effiency to use/modify them. (for button/tab/text areas it is a killer feature)
I'll also post my comment on the link you've added.
-
sebastien louap commented
Hi Elaine,
I have the same request.
If you look at tools like Axure, (the UX is not super good) but they have small details that is killing some current tools.
for example they considered the test as a text+rectangle.By doing so when you create a button you don't need to add a rectangle + a test. You can have only 1 item that can have different color text + color shape.
It has the strong added value that you can configure the padding (horizontal and vertical) and the size of the shape can be automatically adapted to the text size.
As more than 50% of a prototype is just text + rectangle, it limits a lot the number of items in the page and improve the effiency to use/modify them. (for button/tab/text areas it is a killer feature)
I'll also post my comment on the link you've added.
-
David Knell commented
If a text element has padding, background color, and border radius attributes, then there's your button! Excellent! You guys are really good at making interactions intuitive. Please continue that level of quality for this feature. It could easily be an awkward interaction because there are two places you can edit a text object: in the main window by dragging-and-dropping and in the inspector pane. Pressing Ctrl, Cmd, or Option and then dragging the borders of a text element may be an intuitive way to create/change the object's padding. Anyway, I trust you guys. :)
-
Keyan Mynhardt commented
Agreed. The ability to type directly into an object makes it a lot easier to group and move objects around and reduce clutter : )
-
Shian commented
Yes good point
-
Anonymous commented
Would be nice to be able to create a text box with padding and a background colour. Quite often we draw out a rectangle then add a text box over the top of it, but then you have to line them up. It would be faster if we could just use one object. You can do this in InDesign and it saves a lot of time and makes the design more consistent.
-
Robert Călin commented
Example:
- you have a button
- it has a background or border or shadow
- it has a text or icon inside
- when changing the text or icon, the container should adapt to the content, it should maintain the padding -
Mitsuki commented
It's necessary to style buttons dynamically!
-
Mitsuki commented
or I'd like to add background color, padding, border color on text object....