You just received instructions from your client asking to rename all buttons with the text “SUBMIT” in them to “CLICK HERE FOR LAUGHS”. You aren’t too pleased because it is the weekend and there’s a party you cannot miss.
In this case at least, you have room for cheer. With a few simple steps, you can now create a button that resizes itself based on the text inside. Just in case your client has a quick change of heart (and mind), you will still party.
Let’s get started.
Did the rectangle resize? Good.
Now that you are a pro at creating magic buttons, look at all the padding options and play around with them. See https://helpx.adobe.com/xd/help/set-fixed-padding-for-components-groups.html for more info and for the download file.
Is it possible to have the icon on the right using this? In my example below the icon just stays in place as the padding grows, the icon is set to use responsive resize and fixed to the right hand size.
Maybe the anchors for the responsive layout can help
I was able to achieve this by grouping the background and the icon together. This allowed the shape to resize based on the text.
Thanks, this works just fine. But anchors should work too, right?
What we really want is to use that button as a component. This only solves half the problem.
When you create another button from the component and change the text, the button resizes correctly, but you have to do the same for each and every state of that component. Still quite annoying experience.
I just ran into the same thing. Padding and responsive resize work fine, having to change text for every state for every instance is just useless.
+1 would like to see this feature, I have also just encountered this issue.
I haven't tried this workflow yet, and I am sure that the team has this enhancement on their minds. Meanwhile, I suggest posting your request on UserVoice, or voting for one if a similar request has been created. https://adobexd.uservoice.com
Margins are great imporvement, but.... It doesn't work if the background button is a component. My margins stays at 0
foubnd a workaround : ctrl+g to create a group of your component and you're good to go
This sounds like a pretty good improvement. But on XD 34, it works only on master components. As soon as you create an instance of a component, which is exactly the purpose of components, when you change the text of the default state, this change is not propagated to child states. So...it's useless.
Since months, I try to alert the XD components system is totally broken, and nothing changes.