Launched: Negative values in Auto Layout

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.

2 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…

I’m having the exact same issue on the design systems I’m working on. What we really need in these scenarios isn’t a negative padding, but rather, a negative margin.

I think if Figma integrated something similar to how Webflow has where you can insert both padding and then margin around that said padding, we could implement much closer to CSS code within Figma.

So far our solution has been to implement things such as our ghost buttons as 0px of padding on the left or righthand side as props, and letting people know that it won’t actually look like that in implementation. This is due to the fact that we’re able to serve negative margin on our buttons as a prop within the code, and we try to keep as much of a 1 to 1 parity for our information architecture between our designs and our code as possible.

+1 I need negative margins too.

Negative values made me so excited only to realise it’s just margins :sob: