Skip to main content
Bronson_Lee
Bronson_Lee
July 31, 2024
Solved

Component resizing from the center can I make it resize upward?

  • July 31, 2024
  • 4 replies
  • 877 views

Screen Shot 2024-07-31 at 11.46.22 AM

I have an onboarding component with an arrow at the bottom. The problem is when the component gets bigger when theres more copy added, the box gets larger from the center and the arrow gets hidden. Is there a way to have it resize by going upward? or have the arrow move down along with the bottom edge of the shape?

This topic has been closed for replies.
Best answer by KennLucas

OK.

So I created you TWO new components.

You will NOT be able to drag to resize with these methods. This is set to hug your content and expand appropriately. If you want to drag to resize, you would construct differently and not use auto-layout.

  • Onboarding Absolute - where I absolutely positioned the tail.
  • Onboarding Framed - where I used a frame to contain and position the tail. I prefer this method.

I think you should be able to look over the differences to the original and see where the constraints are pinned to bottom-left where you had them to the top-left. Also some rearranging of the nested frames and eliminating extra nesting helped to make it more clear.

You can create your variants from whichever method you choose to use.

Message me or comment here if you have trouble or want to chat about it.

Hope this helped.

K

Onboarding-Component REVISED.fig (87.4 KB)

4 replies

KennLucas
KennLucas
July 31, 2024

Can you post the file or a link to it so we can assist?

Might just be the constraints not set to the right edge.

Bronson_Lee
Bronson_LeeAuthor
July 31, 2024

Here’s the link: https://www.figma.com/design/kMoiTc7Ta8ZOKyE2ThIKTd/Onboarding-Component?m=auto&t=JEbZ3PLSkSTy6c61-1

Thanks for taking a look

KennLucas
KennLucasAnswer
August 1, 2024

OK.

So I created you TWO new components.

You will NOT be able to drag to resize with these methods. This is set to hug your content and expand appropriately. If you want to drag to resize, you would construct differently and not use auto-layout.

  • Onboarding Absolute - where I absolutely positioned the tail.
  • Onboarding Framed - where I used a frame to contain and position the tail. I prefer this method.

I think you should be able to look over the differences to the original and see where the constraints are pinned to bottom-left where you had them to the top-left. Also some rearranging of the nested frames and eliminating extra nesting helped to make it more clear.

You can create your variants from whichever method you choose to use.

Message me or comment here if you have trouble or want to chat about it.

Hope this helped.

K

Onboarding-Component REVISED.fig (87.4 KB)

    Bronson_Lee
    Bronson_LeeAuthor
    August 1, 2024

    Thank you so much! I appreciate seeing the two methods and rearranging the nested frames to clear things up.

      Terms & ConditionsAccessibility statement