Add Margins To Auto Layout

45 replies
25953 views

Auto-Layout has padding (inner spacing), but no margins (outer spacing).

Currently the only 2 ways to add spacing is to:

Create a spacer element or
Wrap the items in another frame and apply gap spacing
- This creates a lot of unnecessary frames, and sometimes creates nesting so deep it goes outside the layers panel.

Not sure if a technical limitation left this out of consideration in the first few versions of Auto Layout, but it would be much appreciated if it were included in a future version as it comes up as a significant limitation many times a day.

Share an idea

Show previous replies

Noah_Greer

I also agree that this would be very helpful! As someone who works with CSS regularly, I cannot accomplish certain things (such as adding spacing to a component with a background) in Figma as I would in CSS using margins without affecting their appearance. Margins would be a valued feature for me.

Lino_Ramirez

Bumping this because I’m also having this issue where devs are expecting to see margin-top instead of padding-top so it’s a little confusing (especially in a big team since they have to remember to not use “padding” property).

Elle1

New Member

Seems like a big big miss to not include margins! As the comment above mine states, it’s important for designers to be able to work with the same properties as devs do to cut down on confusion, double work, etc.

Travis2

Active Member

those of us that are using a CSS mental model

Not to mention, those developers using actual CSS to build the things we make in Figma!

Travis2

Active Member

I mean ideally, shouldn’t autolayout have a 1:1 relationship to flexbox? Wouldn’t it be easier for everyone if autolayout’s capabilities and options and values exactly matched flexbox (like adding margins)? We’re not designing in a vacuum - I don’t design stuff so that it looks good in Figma, I design it so that some developer can take it and build it.

Lia3

New Member

Absolutely agree. What’s the point of having an entirely unique type of object with different attributes/limitations/quirks when the obvious purpose/benefit is to mimic flexbox containers?