Highlighted

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

Adobe Employee ,
Jan 28, 2020

Copy link to clipboard

Copied

 

content_aware_gif.gif

 

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” 

 

3mftad.gif

 

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. 

 

TOPICS
Design, How to

Views

4.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Adobe Employee ,
Jan 28, 2020

Copy link to clipboard

Copied

 

content_aware_gif.gif

 

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” 

 

3mftad.gif

 

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. 

 

TOPICS
Design, How to

Views

4.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 28, 2020 3
Contributor ,
Jan 28, 2020

Copy link to clipboard

Copied

Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2020 1
New Here ,
Jan 28, 2020

Copy link to clipboard

Copied

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.

buttons.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2020 0
Contributor ,
Jan 28, 2020

Copy link to clipboard

Copied

Maybe the anchors for the responsive layout can help

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2020 0
Community Beginner ,
Jan 28, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2020 3
Community Beginner ,
Feb 11, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2020 0
New Here ,
Jan 28, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2020 1
New Here ,
Jan 29, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 0
Community Beginner ,
Jan 29, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2020 0
Adobe Employee ,
Jan 30, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2020 0
Explorer ,
Feb 04, 2020

Copy link to clipboard

Copied

Hi,

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 04, 2020 0
Explorer ,
Feb 05, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2020 0
romusrx LATEST
Explorer ,
Nov 05, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 05, 2020 0