Skip to main content

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 😉

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

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!

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.

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.

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!

Terms & ConditionsCookie settings