Styles for Auto Layout

I’d love to have styles for the Auto Layout in the same way as Figma does for the grids/columns, typography, colors etc. Handy for making consistent containers. Think of changing padding globally for example.

What do you think?

Cheers

11 Likes

Hi Jan,
Toolabs DSM plugin creates tokens for auto layouts as well. And for paddings, the auto layout tokens uses spacing tokens. So, if you have more than one auto layout token, changing the spacing scale will be enough.

I hope it helps!

Figma - Toolabs Design System Manager | ✦ Design Tokens, Theme Management and more... Define or update design tokens in one single panel...

3 Likes

Great feature! Helps me a lot!

1 Like

Hey @Namik_Ozgur_Aydin, it looks like a great plugin you made! I’ll give it a try. For now, I prefer a plugin-less (and no-extra-account) solution.

2 Likes
  1. …Or simply the ability to copy/paste Auto layout from one frame (or component) to another.

  2. Or ability to select multiple frames/components and have Auto layout affect inside each individually as opposed to the group. Similar to the Create multiple components feature we have now, but for Auto layout.
    (Although this idea could be more problematic in practice)

When working out layouts, it’d be helpful to be able to have Auto Layout “styles” that are reusable across a project - this would enable you to dial in different metrics and see how they effect various contexts.

Auto Layout Styles could work the same way that text styles, color styles, effect styles, and grid styles function - giving designers the ability to have presets of auto layout configurations.

Hello!

I am trying to create fully automated design-system that could be done almost just on styles and settings. Sometimes I have problems with remembering my design-system spaces. For example between the blocks on mock-up, or inside element as fields, tags and buttons. Also for developers it could be very useful. Before you had amazing grid styles but now with auto layouts this rules not working.

Снимок экрана 2022-02-08 в 18.10.15

On this picture we see that this auto layout have spaces 10px from all the sides. I want to make this spaces in styles and call “Button spaces” and they could be unremovable.

Thank you!

2 Likes

Hi all, Agree here. We setup auto layout containers for our mockups. This would be a greatly appreciated addition to the styles in Figma natively. If you’re listening team Figma. Thanks!

1 Like

Please this is a must-have feature when you create a design system and want to connect it with existing projects. There is no easy way how to change padding in components using auto-layout (basically all of the components…).

We are using separators as components… but it is not native and kind of still not easy…

Hello guys,
i would love to have an option similar to an text or color style that you can set the spacing and connect them in the autolayouts.

2 Likes

+1 for spacing tokens.

2 Likes

Hello!

I have trouble remembering which spacing sizes I should use when designing with autolayout in each frame. I’d like to be able to create a set of sizes with defined use cases like compoents and use them within autolayout spacing settings.

Now I often make mistakes and when I decide to change some spacing between autolayout elements, then I have to do that manually.

I opened a new thread about this a few days ago. I think that one should be linked with this post. There are a few differences, but the core idea is the same.