Launched: Negative values in Auto Layout

This, indeed would be a great addition. Been running into this quite a few times now. E.g. when you have elements/components with a stroke, the stroke becomes double when you use auto-layout since it’s stacking bottom stroke to top stroke of the next elements while strokes on the side remain the same. Had to ditch the auto-layout and move all elements up one pixel to get a crisp single pixel stroke on all elements.

In addition, z-index would be great so elements with different stroke color can be on top of another element so stroke is the same color all around the object.

Other than this, lots of love for Figma, you guys are doing an awesome job.

5 Likes

I cannot replicate what is possible with code while using auto layout because it does not allow negative values.

Please allow negative values so I can stack elements on top of one another while they are part of the same group.

Just give it more weight here! Highly needed +1

3 Likes

We need negative values in autolayout pleeeeeeeease.
I need it to align the baselines of different fonts without losing the autolayout features on the widths of my components.

9 Likes

+1, don’t know how much technical effort it’s going to take, but Figma please consider implementing this feature for future updates, especailly now a majority number of designers should be grasping how auto-layout works so it totally makes sense to enable negative values for space between.

4 Likes

For folks looking to use this feature request to create tables (like me), I think the better solution is to allow for independent auto layout border values (like padding allows) so we can have no border (0) on a given side.

8 Likes

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.

2 Likes

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: