Skip to main content
November 29, 2023

Negative padding (workaround)

  • November 29, 2023
  • 22 replies
  • 8165 views

Hi everyone,

As you know, being able to add negative padding is a must when creating design systems. However Figma only allow negative values in the inner-spacing between elements in auto-layout.

We found a workaround and thought it would be useful to share it with the community.

If you define a local variable, type number, and add a negative value (e.g. -4px), you can then apply this variable to the auto-layout padding and it will work.

In summary: use local variables to define negative values and apply such variable to the padding.

22 replies

nestroompast
January 2, 2024

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

djv
Figmate
Community Support
February 15, 2024

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

We’ll pass this onto our team for consideration.

Daniel_Cullinan
Active Member
February 16, 2024

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?

Anna_Willoughby1
New Participant
February 20, 2024

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

Daniel_Cullinan
Active Member
February 20, 2024

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:

Figma – 20 Feb 24

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

Justin_Reid
March 6, 2024

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

jo1
New Participant
March 12, 2024

Screenshot 2024-03-13 at 09.33.06

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

Figmate
March 15, 2024

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,

March 15, 2024

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.

March 15, 2024

Bump for feature