• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

[Design]-Responsive Button Resizing with text in XD.

Community Beginner ,
Jan 28, 2020 Jan 28, 2020

Copy link to clipboard

Copied

Is there a way to get the button background to resize automatically when you change the text? I'm working on building out our design system library and need these buttons to automatically resize to the full-width for longer copy and every responsive resize that I've tried hasn't worked. The text will go longer but the background won't resize with it. If someone can send a screenshot of how they set it up in the responsive resize that would be great!

 

Screen Shot 2020-01-28 at 3.21.34 PM.png

 

<The Title was renamed by moderator>

TOPICS
Design , How to

Views

9.9K

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
community guidelines

correct answers 1 Correct answer

Adobe Employee , Jan 28, 2020 Jan 28, 2020

Hi Nikki,

 

Thank you for reaching out and sorry to hear that you're facing issue with responsive button resizing. 

Please check in the below link for how to Create a button that resizes based on the text inside ,Please download the latest version of XD, and enjoy the new features.

https://community.adobe.com/t5/adobe-xd/create-a-button-that-resizes-based-on-the-text-inside-xd-26/td-p/10885505?page=1

 

Please let us know if that helps.

 

Thanks,

Chethan

Votes

Translate

Translate
Adobe Employee ,
Jan 28, 2020 Jan 28, 2020

Copy link to clipboard

Copied

Hi Nikki,

 

Thank you for reaching out and sorry to hear that you're facing issue with responsive button resizing. 

Please check in the below link for how to Create a button that resizes based on the text inside ,Please download the latest version of XD, and enjoy the new features.

https://community.adobe.com/t5/adobe-xd/create-a-button-that-resizes-based-on-the-text-inside-xd-26/...

 

Please let us know if that helps.

 

Thanks,

Chethan

Votes

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
community guidelines
Community Beginner ,
Jan 29, 2020 Jan 29, 2020

Copy link to clipboard

Copied

This worked perfectly, thank you!

Votes

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
community guidelines
New Here ,
Aug 26, 2021 Aug 26, 2021

Copy link to clipboard

Copied

Hi! I have a follow up question for this one. 

 

Is this possible to do with a "non-square" shape? I have a parallellogram with sides angled to 60 degrees. Can I get the box with this irregular shape to act like a square box without messing up the 60 degree angles?

Votes

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
community guidelines
Adobe Employee ,
Jan 29, 2020 Jan 29, 2020

Copy link to clipboard

Copied

Hi Nikki,

 

Thank you for using Adobe XD and trying the new feature. As Chethan suggested, please let us know if you are able to recreate the same effect or if you need any further assistance from our end.

 

We would be happy to help.

 

Thanks,

Harshika

Votes

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
community guidelines
New Here ,
Oct 11, 2020 Oct 11, 2020

Copy link to clipboard

Copied

Hi Harshika,

 

I have the same need but I don't see the padding option in the rigth panel. I follow in the next steps:

 

1- Create a square

2- Créate a text

3- Make a group

4- Make a component of this group

5- I don't see te padding option

 

What is the problem? I have the 33.1.12 version of Adobe XD

Votes

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
community guidelines
Adobe Employee ,
Oct 12, 2020 Oct 12, 2020

Copy link to clipboard

Copied

Hi Alejandro, 

 

Sorry to hear you are unable to see the padding option in XD. I tried your steps and I am able to see the padding option at my end on windows machine. Please see the attached screenshot below-

 

Screenshot_21.png

 

Which Operating system you are working on?

 

We will try our best to help.

 

Thanks,

Harshika

Votes

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
community guidelines
Community Beginner ,
Feb 10, 2024 Feb 10, 2024

Copy link to clipboard

Copied

LATEST

Good news is that there are plenty of ways to do it. Either you can use an element UI kit in XD or make a template for your self. Similarly there are many kits for buttons in figma as well.. I've worked on some designing projects on figma, as well as direct theme work on utakmiceuzivo and found it very easy to use. You'll have no problems using them.

Votes

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
community guidelines