Negative padding (workaround)

Forum|Forum|2 years ago
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.

Share an idea

Show previous replies

Drugge_Niklas_SOK

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?

djv

Community Support

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!

Emmie_Paivarinta

New Member

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

Katie_Rowell

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

John_Likes_To_Edit

New Participant

bump for feature as well !

K

Kerry_Johnson_Personal

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.

GG_Yap

green is padding width
example i use absolute position to do that image on outside, how you all do it?
hope the padding can use negative padding

Maria_Soliman

New Participant

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

Sensible1

New Member

It’s a little frustrating googling a question of “how do I emulate basic CSS features in Figma” only to find a year-old forum post where people have been asking for the feature to be added for months and months.

Anyways, yes, adding to the pile of of people asking Figma to support basic layout concepts like negative margins.