Negative padding (workaround)

Assuming negative margin is already available but developers just didn’t put the feature out for some reason

Thanks for the feedback and for providing the workaround @Rafael-Atlanttico!

We’ll pass this onto our team for consideration.

As you know, being able to add negative padding is a must when creating design systems.

Curious to know what you mean by this, as negative padding is not possible in CSS?

well an example i’m needing it for is trying to create a prototype of a scrollable list that, when you complete something on the list and return, focuses on the next thing on the list - scrolling the completed items out of view. i don’t know any way to do this in Figma other than setting negative padding on the container

I would do that by creating a frame without auto layout, turn on vertical scroll behaviour, and then position the scrollable list inside that with a negative Y (vertical) position:

In CSS, ’padding’ refers specifically to the space between an element’s border and it’s content: CSS Box Model

Just what I was looking for. Really helpful, thanks!

Can Figma please allow negative spacing on horizontal when doing auto layout?
Very useful for setting up tables etc.
Thanks

Hi @jo1, Thanks for sharing your thoughts about horizontal padding! I understand how handy it allows input negative numbers for you.

I found the other community member asking for something similar here. So I merged your post to have all the feedback in one place!
Feel free to Vote up top!

Thanks,

You’re right, I meant negative margin, but in Figma’s auto layout case it’s padding as you can’t manipulate margins in auto layout.

Hence the workaround using variables for negative values and applying that to auto layout paddings. Works like a treat.

Bump for feature

We really need negative margin. Its such basic feature for CSS and recreating it in Figma is such a hassle at the moment. @dvaliao would you happen to have any updates on this?

Hey @Drugge_Niklas_SOK, thanks for the additional feedback!

I can confirm that this is on our team’s radar, but we don’t have an exact timeline to provide yet. Feel free to keep an eye out on our future releases!

I really want this too. Because it works with variables makes it likely it’s just an arbitrary validation for the input.
I checked if I could get around it using the plugin API, however there you can’t set negative margins, I got this error in the console:

Error: in set_paddingTop: Expected “paddingTop” to have value >= 0

Again, pushing for allowing negative margins. Really frustrating our dev. system accounts for negative margins and we can’t mimic that in Figma.

bump for feature as well !

Negative margins are perfect for certain one-off or infrequent scenarios such as needing a separator to reach the edges of its parent container that has padding applied. To achieve this currently without the variable hack, you’d have to create a group soup and apply padding to non-separator layers multiple times.

I would actually even argue we need margins in general. Allow the full box model. Margin, border, padding. Would make handoff so much easier!