Skip to main content
Solved

Auto layout behavior with overlapping parts

JB-C
  • JB-C
  • New Participant
  • 13 replies

Hello there,

i’m trying to make a component whose height will adjust automatically depending on the text height.

Seems like i can(t post images directly here.
Have a link there : https://i.ibb.co/LJCBFB8/Steps-List-Figma.jpg

Nothing special concerning the text itself, using auto layout and “hug contents” on the top layer.
However, i can’t find a way to have the line below the step number adjusting automatically.
While playing around with autolayout and “fill container” on different levels, i still can’t figure a way to achieve the expected behavior.
Seems that having the line “floating” under the number is a blocker there, not sure.
Note: the description will be optional (on/off property)

Many thanks for your brain time 😉

Best answer by ntfromchicago

Here’s an example you can duplicate to your drafts so you can see how I did it. Let me know if this doesn’t match your use case.

Figma – 2 Mar 22
View original
This topic has been closed for comments

5 replies

ntfromchicago
  • ntfromchicago
  • New Member
  • 287 replies
  • Answer
  • March 2, 2022

Here’s an example you can duplicate to your drafts so you can see how I did it. Let me know if this doesn’t match your use case.

Figma – 2 Mar 22
JB-C
  • JB-C
  • Author
  • New Participant
  • 13 replies
  • March 2, 2022

Holy crap you’re my savior
Thanks so much, I was struggling so hard.
I guess key was using a frame as the line (plus playing with paddings and alignments)
Again, thank you sir!

Klesus
  • Klesus
  • 237 replies
  • March 2, 2022

The key is not having a frame acting as a line, you could just as well use a rectangle or a line. The key is the combined autolayouts.
The component itself is a horizontal AL, with two child vertical AL frames.
The top AL is set to hug contents as well as the AL containing the texts, but the AL containing the line is set to Fill container and so is the line.

ntfromchicago
Eric_Hepperle_Designs
2 people like this
  • ntfromchicago
    ntfromchicago
  • Eric_Hepperle_Designs
    Eric_Hepperle_Designs
JB-C
  • JB-C
  • Author
  • New Participant
  • 13 replies
  • March 3, 2022

Oh I see, thanks.
However there an issue with your solution : you have set a Box with fixed height on the variant without description. This way, the line doesn’t expand.
If you remove that fixed height, the line expands when the title is long enough, but diappears when the title is 2 lines or less.

A trick could be : removing that Box, and adding a transparent 1px width frame with fixed height at the top level, acting as a “min-height” spacer.

ntfromchicago
Eric_Hepperle_Designs
2 people like this
  • ntfromchicago
    ntfromchicago
  • Eric_Hepperle_Designs
    Eric_Hepperle_Designs
ntfromchicago

I updated the Figma file with your great idea to preserve min width (which I used a zero-width px line to achieve). I’m glad I was able to help!

JB-C
Eric_Hepperle_Designs
2 people like this
  • JB-C
    JB-C
  • Eric_Hepperle_Designs
    Eric_Hepperle_Designs
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