Launched: Negative values in Auto Layout

Not sure of this has been covered but if you leave it as a ‘group’ and not a ‘frame’, you can set it to negative quite easily in the value shown under the degrees option in the right hand panel.

2 Likes

Can’t speak for everybody, but what I was looking for was in the context of an Auto Layout.

1 Like

Any groups in AutoLayout are converted into frames, and that negative spacing is reset to 0.

1 Like

Found a hack on this one. I hope it helps you all.

  1. Put the circle in the center of a frame that is set with 0.0001 width, it will treat the width ad 0.
  2. make sure the clip content is unchecked.
  3. Duplicate the frame NOT the circle as many as you like.
  4. Create auto layout with spacing less than the diameter of each circle.
    Done

3 Likes

I’d like to be able to add negative space for auto layout items.

Example use case: an avatar cluster where you want the avatars to overlap each other.

Same here, another use case is list items with a divider, you want that -1px spacing :slight_smile:

Just noting this is the same request as Negative values in Auto Layout

+1
I’m just waiting…

I need this as well, I’m dying as I have some button group components that have a border and I cannot do a generic component because of them.

I have to add each part individually and then overlap them 1px -.-

I’ve found the frame where I applied negative padding:
Check it out

@Brian_Clay @Richard_Doyle @Brian_Moyano @rahendz @Hoby-Van-Hoose @Luis_Chacon @Gary_Chiang @Baffour @Yulia @Clara_Dalbera

3 Likes

We need this! And negative padding!

How were you able to achieve this? Whenever i enter a value less than 0 it resets to 0 :frowning:

1 Like

I can copy this to my file and it still works, but as soon as I try to touch the margin it resets to 0. Weird!

1 Like

It’s easy done by framing your component and positioning with negative coordinations.

hope it helps.

Of course, but then you can’t make use of the auto layout super powers.

2 Likes

I don’t see why not. It scales perfectly horizontal.

Sure, in this simple example it works. But if you would like to create responsive components with nested auto layouts this is not really an option.

1 Like

In my example the component is autolayer, the icon and text is nested autolayer, the two infos are postioned with autolayer. Give me a task and I will see if it’s doable with my solution. I will share it with you if I can get it to work.

Here you go:

So basically I would like the holder to also auto size based upon the height of its contents. But the content should have a negative top padding of 20 px.

Just to add 2 small cents. Without wanting to downplay any workarounds, they are great. But for me that emphasises that it shouldn’t be a problem “render engine/logic” wise and still needs a proper support by Figma without workarounds. At the very least a solid response.

Otherwise, it feels like the only reason why it isn’t working is that the “padding” field has a validation of “+0” which is all that’s blocking it (which would be silly, but would explain a lot :slight_smile: )

1 Like