Create a button that resizes based on the text inside - XD 26

[Atul_Saini]

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. 

1. Create a rectangle that will be the container for your text. 
2. Type “SUBMIT” using the Text Tool. 
3. Drag the Text into the rectangle and position it. Don’t worry about the exact padding. 
4. Now, select the objects and use Ctrl+G/Cmd+G to group the objects. 
5. In the Properties Inspector panel, enable the Padding option. 
6. Ensuring that the layer for text is selected, change text to “CLICK HERE FOR LAUGHS” 

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. 

[FrancoBits]

Thank you!

[feejin]

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.

[FrancoBits]

Maybe the anchors for the responsive layout can help

[KoushikC]

I was able to achieve this by grouping the background and the icon together. This allowed the shape to resize based on the text.

[BrenoAngelotti_4L]

Thanks, this works just fine. But anchors should work too, right?

[Elliott5FAC]

Can you screenshot your layesr for this? I cannot get this to work for the life of me.

[Glenn Lignel]

Thanks for the help. I made this example for people who encounter the same problem

[Sean23663411ijsq]

Do you have a video of this? Tried this method and it doesn't resize the button background with the icon moving too (and I can't select auto resize for the top component layer). Tried these exact settings.

Honestly getting tired of having to do all these workarounds for basic needs and functions ! How can making a button be so difficult? So simple on Figma but I am stuck using Adobe XD for work...

[Glenn Lignel]

Hi Sean
I've provided an XD file which i've created for this design. I was'n able to upload it directly to this post due to an error with the file's. I couldn't resolve. "content type (application/octet-stream) does not match its file extension" but you can trust me with this url to my personal website.

https://www.glennlignel.be/design/responsive-button-with-icon-right.xd

Kind regards

[Arlo Software]

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. 

[feejin]

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.

[appca4117842]

+1 would like to see this feature, I have also just encountered this issue.

[Preran]

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

Thanks,

Preran

[BlackR4inbow]

Adobe's "uservoice" site. 😂

The abyss where improtant requests for basics fixes go to be unresolved as years pass by.

Love that site!

[wwwvinz]

Hi,

Margins are great imporvement, but.... It doesn't work if the background button is a component. My margins stays at 0

[wwwvinz]

foubnd a workaround : ctrl+g to create a group of your component and you're good to go

[romusrx]

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.

[BlackR4inbow]

Adobe's UX has become a disaster over the past 5 years.

A scalable button, that's easy to create that supports an icon is a very common need.

I've created them in the past. Then a new release comes along, and things no longer work the same way and seemingly aren't possible. That is, at least without having to learn a new approach.

Also, Adobe, any update on Color Profile Management that we've been asking for? It's been years...still no update.

[Sean23663411ijsq]

I have had to switch to it for work and it is a nightmare. I am constantly having to google for workarounds to basic functions and needs. What an embarassment...

[Ertuğrul24892880d5b8]

Hello, thank you for your sharing. Box radius is increasing with text. How can I lock the box radius when using responsive feature. 

[Glenn Lignel]

Hi,

As i see from your example, you're trying oval borders instead of the standard rounded border. I managed to aquire the result you're looking for in this way:

In my example I work with 2 ovals & a rectangular center, union combined

You can download an example source file from my personal website:
https://www.glennlignel.be/design/Responsive-button-with-oval-borders.xd