Launched: Negative values in Auto Layout

Yes please!

Yes, we do really need negative values in auto layout!

1 Like

I couldn’t agree more. Independent control for any border side is a must. :point_up_2:

2 Likes

+1. Even though we can do it using distance property on Frame.

Another example is for UI like this where I’d like to use Auto Layout so the labeling and values are easily editable and the frame resizes when editing, but there also needs to be just a single border between the elements. A -1px padding for the Auto Layout would be a perfect solve here.

In absence of that, @Richard_Doyle thanks for the tip about switching from packed to space between and just shortening the frame a bit. :bowing_man:

Fully agree about the need. For example, I wanted to do a lot of times components like titles or buttons with a bottom highlighting, but it isn’t possible to have a highlight resizing automatically.

This is really frustrating everytime.

4 Likes


Would really love the ability to do something like this. I’ve attempted inserting the lower image into a frame, then moving the image up out of frame, but applying auto layout to the block places the “front” object second in the list…

1 Like

Figured out a quick hack, involving vertical flipping of objects. Very Specific to my need, but hope it helps someone.

•Create a text block
• Flip text block horizontally (Shift +H)
• Stack an image (or shape) above your text block
• Flip image vertically
• Place Image in a Frame
• Apply auto layout to Image frame parent & text block
• Flip auto layout block, with image frame parent & text block (image and text block should appear right side up)
• You can now nudge your image up within the parent frame so that it’s behind the text block.
• Shorten your image parent block to accommodate for the nudged image.
• Add text as needed.

1 Like

Neat trick using the “packed” option, however negative spacing will the container to adjust size as elements are added/removed.

1 Like

+1! The packed option works great but not if you want to have dynamic content… negative margins are needed!

+1 I am really hoping this addition would see the daylight one day.

+1

oh i didn’t know that, thx for sharing Richard!

+1 Would help out a lot to have negative values. This is my only struggle now with the Auto-Layout. Would save us a lot of time instead of hacking the looks :slight_smile:

Why is there so little response coming from Figma in these types of things. Not just on this (304 votes, so quite popular I think), but on a lot of different subjects in “feedback” as well. Any idea on how these things are being received (or ignored) would help for me at least. I hope it won’t stay a one way street. I think the community takes it seriously by providing constructive feedback and ideas.

To add: If things are hard or undoable to implement, even knowing that would be great.

7 Likes

Absolutely needed! We love hacks, but we can’t rely on “creative” hacks in real life projects in corporate environments, created by teams, not a single hacker.

1 Like

I came on a hunt just for this. Negative padding so that I won’t have to reconfigure the entire Frame hierarchy, please! <3 <3
image

4 Likes

+1 !!!
This needs to be adresses by the Figma team…

1 Like

I’m working on creating card components for my team. I need to use auto layout so that when designers add title text of 2 lines it keeps the appropriate spacing between the title and subtitle.

When I add auto layout, it’s taking the line height of the text blocks into account and is bumping the subtitle down a considerable amount.

I’ve played with the Packed and Space Between options, but Packed doesn’t seem to change anything and Space Between also nudges the Title up a few pixels.

I’m having a hard time figuring out how to solve this problem and keep the original spacing but still allow for the text bumping down when there are multiple lines of text.

Anyone have any suggestions?

3 Likes

Adding z-index to Figma could help. Of course, that would break the item list order, but it would work. And also it would mimic CSS more.

1 Like