Best practices for structuring components in Figma
Introduction
A component that is hard to use is a failed component. If a designer has to click into three layers of groups to change a button icon, they will stop using your system.
These practices focus on 'Developer Experience' for designers—making your components a joy to consume.
Guide Steps
Leverage Component Properties
Modern Figma components rely on Properties (Boolean, Text, Swap) to surface controls to the top level, preventing the need for deep clicking.
Do: Use Boolean properties for toggles
Instead of making separate variants for 'Button with Icon' and 'Button without Icon', use a Boolean property named 'Show Icon'. This adds a simple toggle switch to the sidebar.
Do: Use Base Components (carefully)
For complex component sets (like inputs with 50 states), create a hidden '_Base' component that holds the core structure. Build all variants as instances of that base. This allows you to update the layout in one place.
Avoid: Variant explosion
Don't create a variant for every possible text change. Use 'Text Properties' to allow editing labels directly from the sidebar. This keeps your variant count low and performance high.
Pro-Level Design Tips & Workflows
💡 Slashes Nomenclature: Name your master assets with slashes (e.g., button/primary/hover) to allow Figma to automatically group them as states of a single Variant set.
💡 Inherit Properties: Minimize structural variations. Instead of adding new instances, toggles should be defined via Boolean property fields on the original parent layout.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.