Launched: Negative values in Auto Layout

One year and 736 votes later… still nothing much I’m afraid. Must be one hell of a refactor needed then for this small feature…

2 Likes

It’s funny how new tools like Figma rocket into mass adoption, to then take forever to implement an addition to a core feature, which should’ve been part of the core feature from the start.

I guess we’ll sooner see a new tool that gives us proper spacing before we see a Figma project manager ping one of their devs in order to spend 1h to implement this in Figma.

4 Likes

The second solution presented in the article is my current workaround too. But still, it is just a workaround or “hack”… Figma, please just include negative values.
Even the Anima Auto Layout Plugin in Sketch can do it since years now.

2 Likes

The negative padding is used very often.
we need an official way but not a “trick” way to do it.

1 Like

Wow, okay, exactly what I was looking for. Thanks for sharing!

It so needs to happen already.

Also endorsing this one - I understand that there are workarounds for this, but they all have various compromises. This would be a great feature.

The way I worked around this is to wrap each child element in a frame that is smaller than the child element itself. Then one can use AutoLayout on the parent element without a problem. Still not ideal, but better than other workarounds.

Walkthrough:

The problem with this hack is that if any part of this needs to have an auto-layout itself, you can’t have the frames smaller than the content. It’s a decent work around, but something that definitely should be able to be implemented by Figma.

Agreed regarding the drawback to this hack. There’s no fixing that until the Figma team one day gifts us with the groundbreaking software engineering innovation that is negative spacing in AutoLayout :smirk:

1 Like

I just wanted to be the first to say… finally :slight_smile: Kudo’s.

2 Likes

Thank you all so much for the feedback. Negative spacing is now here in our new Auto layout v4!

Learn more at our Help Center and Community Playground File

4 Likes

Negative spacing is now supported by Pro Layout Panel as well

Hey Josh, this was marked as “Launched” but the request was clearly negative values for padding and between items, not just negative values between items. Can we mark this as partially launched? Or do we need a new thread?

2 Likes

I’m just curious, can you show some examples where you need negative paddings? I thought this would be handy mostly for the stroke inclusion, but now that you can control whether stroke affects the size of the frame or not so this use-case is covered too which for me removes the need for negative paddings. Any other cases?

@Gleb good question we use negative padding to create overlapping content. Think cards below a lead, but peaking onto the lead by (-64) pixels. Or product images that extend “beyond” the background to the left/right/top/bottom, etc.

Regarding the images that extend beyond: I think even with the ability to create negative paddings it wouldn’t be the best idea to use them for that, you can wrap them in a regular frame and move them somewhere, this way the frame would keep space and push away other content yet the image would stay independent of the flow. This is what I understand it would look like:

As for the leading example, I’d be curious to see it illustrated because I don’t understand it.

I came here to say the same thing as Ian above.
I would need negative padding to avoid the 0-px frame hack in situations where I need to align content that has natural padding. See this example:

  • I have a button with padding (for hovering behavior)
  • This button is included in an Auto Layout group in my header
  • In some case, the button group is stacked above a search field. With natural padding, the label of the last button is not aligned with the search field, creating a visual offset.
  • To correct this, I would like to have a negative padding on the button group Frame, of the same value of the button’s padding, to align things (see image):

I could override the last button’s padding to 0, but that would reduce the hover area on the right side.

3 Likes

@Gleb here’s the card example I was talking about:

And here’s the product example I was thinking about:

Both would be easily solvable with negative padding, but instead I have to wrap the objects in frames, and manually resize them to simulate the negative padding, which adds complications.

1 Like

Finally launched! Nice, that only took almost a year and a half…