Can I stack elements in Auto Layout?

Ask the community
1

Wondering if it’s possible to “stack” multiple elements in an Auto Layout frame. See attached images for reference. I’m trying to add a stroke behind the text that will get wider/narrower depending on text length.

I tried adding negative padding, but that’s not supported. I’m new to Figma so hoping there’s a simple workaround that I just haven’t discovered yet.

Screen Shot 2021-04-08 at 4.54.27 PM Screen Shot 2021-04-08 at 4.53.51 PM

1 Like
2

Hello, you can’t add negative values in Auto Layout yet. It’s one of the most requested evolutions, see here and vote!

In the meantime, if the height of your Frame is constant (only one line of text), there’s a workaround:

  • Select your stroke, click Frame Selection. Set the containing Frame to stay on top of your Auto Layout Frame
  • Set the Resizing constraint to “Fill Container”, with the desired padding
  • Inside the containing Frame, set the constraints of your Stroke to “Left and right”
  • Now change the Y value of your Stroke to place it behind your text, it will stay there and expand with additionnal text. However it won’t move if the text grows or work with multiple lines.

image
image1179×135 10.5 KB

Happy hacking!

1 Like
3

Thanks Antoine! I guess I can’t have it so the line extends past the text on both sides?
Either way, this hack is super helpful and gives me something I can build on.

4

Yes you can, two ways to go:

  • Adjust the width of your stroke so that it extends past its container. It will always extend by this exact amount.
  • Wrap your text in an Auto Layout container and add lateral padding that the stroke Container will follow because it “Fills container”
5

Awesome. I wasn’t quite following that second step, but I played around a bit and still got what I wanted. Here’s how: I wanted the stroke to extend 4 px on each side, so I made it 8px wider than the container, then set the X value to -4 and it worked like a charm.

Thanks again for the help.

1 Like