Skip to main content
Solved

How to let button component auto resize from the right

Thessa

Hi!

I’m using a button in mobile headers aligned right. At first, i made these buttons part of the navigation components just using a frame with auto layout for the buttons inside those components and everything worked fine. You can see the button here:

And this is how it resizes the button when i change the text:

Later on i decided to make components for these mini buttons themselves so i could manage them in one place and add variants. But suddenly, the resizing from the right doesn’t work anymore once the frames are out of there navigation component and placed on their own, eventually as a component.
So this is the button component: Dropbox - Button component.png - Simplify your life
And this is what happens when i change text. The button expands from the left to the right instead of right to left:
Dropbox - Button component resizing.png - Simplify your life

Am i doing something wrong? How can i fix this? Thanks for looking into this! 🙂

Best answer by tank666

I have managed to achieve the same result.

Reproduction steps:

  1. Create a component;
  2. Add new variant;
  3. At the moment, we are not setting up the constrains, we will leave them at the top and left.
  4. Add an instance of this component to the canvas or frame;
  5. Change the variant constraints to the top right;
  6. Add a new instance to the canvas or frame;
  7. Check both instances (the first instance will grow from left to right, the second from right to left).

Since your copy is on the canvas, no constrins are visible. And, most likely, you added this instance when the variant constrains were on the left.

Add a new instance or place an existing one in a frame to change the constraints.

View original
This topic has been closed for replies.

4 replies

Thessa
  • Thessa
  • Author
  • 5 replies
  • June 11, 2021

Extra thingy: got this far that the main component does resizing right, but an instance of the same component does it wrong:

tank666
  • tank666
  • 4873 replies
  • Answer
  • June 11, 2021

I have managed to achieve the same result.

Reproduction steps:

  1. Create a component;
  2. Add new variant;
  3. At the moment, we are not setting up the constrains, we will leave them at the top and left.
  4. Add an instance of this component to the canvas or frame;
  5. Change the variant constraints to the top right;
  6. Add a new instance to the canvas or frame;
  7. Check both instances (the first instance will grow from left to right, the second from right to left).

Since your copy is on the canvas, no constrins are visible. And, most likely, you added this instance when the variant constrains were on the left.

Add a new instance or place an existing one in a frame to change the constraints.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Thessa
1 person likes this
  • Thessa
    Thessa
Thessa
  • Thessa
  • Author
  • 5 replies
  • June 11, 2021

Thank you, i get it now. The button needs another frame or component to be in, in order to let the alignment for scaling work. I’m used to Sketch, where it’d also work on the canvas.

Yay! I’ll close this one.

Dara_Oginni

Here you go 🙂

YouTube
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings