Hi all. First-time poster here!
Our team is currently slowing migrating all design assets to Figma. Now, I’ve come across the challenge of where and how to manage spacings and margins across design files, teams and projects.
See attached a couple of mock-ups for several concepts.
Notes from the screenshot:
Concept 1: Margins are (only) applied in the design files
Reference design files (or documentation guidelines) are available
1a: Auto-layout in the design files only
- Only use auto-layouts
- (Con) hard to track which spacings were used where
1b: Auto-layout with spacers
- Introduce using spacer components
- (This comp then has variants for several spacer sizes + visibility on/off)
- Easier to track which margin is used where
- Easy to maintain and update spacers across all design files
- Can be useful as hand-off feature (toggle on visiblity to see all margins)
Concept 2: Add margins to (team) library components
(Documentation is still available if needed)
2a: Components with spacers (toggle layer)
- Margins are part of components, like in legends
- Margins can be toggled on/off through the instance’s layers
- (Con) Requires using the layers panel a lot
2b: Components with spacers (toggle variant)
- Margins, again, are part of components
- Margins can be toggled on/off by using variants
- (Pro) Easy to use, not as hacky as toggling layers of instances
- (Con) Automatically calls for a lot of extra variants to be maintained
- 1a: Auto-layout only
- 1b: Auto-layout with spacers
- 2a: Components with spacers (toggle layer)
- 2b: Components with spacers (toggle variant)
- 3: Other… (Post in the comments)
What’s your preferred way and why? And did I miss any important pro’s and con’s here? Leave a comment!