Skip to main content
madmonkey
February 9, 2021

Styles for Auto Layout

  • February 9, 2021
  • 13 replies
  • 2693 views

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

13 replies

Namik_Ozgur_Aydin
February 15, 2021

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...

Diana_Schramm
February 16, 2021

Great feature! Helps me a lot!

madmonkey
madmonkeyAuthor
February 17, 2021

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.

Dominic
Active Member
September 14, 2021
  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)

briankalwat
September 23, 2021

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.

Ilya_Lowda
February 8, 2022

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!

WHQ_Ep
March 14, 2022

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!

Andre_Fisch
November 17, 2022

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.

Larry_Reynolds1
November 18, 2022

+1 for spacing tokens.

Petr_Hervy_Sazka
May 24, 2023

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…