Building Components and Variants in Figma
Scalable UI libraries with variants, auto layout, and handoff-friendly structure.
Why components and variants matter
Before components, every button was copy-pasted and brand updates meant editing hundreds of layers manually. A Figma component is the master record; instances inherit changes. Variants manage states and styles — primary/secondary, default/hover/disabled — in one organized set.
Component work signals product thinking, not page decoration. Developers map component structure to code; consistency in spacing, radius, and typography across a product is nearly impossible without components and tokens.
Auto layout as the foundation
Build with Auto Layout before converting to components. Buttons use horizontal layout with consistent padding and centered alignment; inputs combine label and field with predictable gaps. Set hug contents for flexible buttons and fill container for full-width fields.
Nested auto layout mirrors flexbox in CSS: a card with vertical layout containing a horizontal header row, body, and footer actions. That structure makes handoff straightforward for engineering teams.
Building button and form component sets
Start one default button, convert to component, then duplicate variants for hover, pressed, disabled, and loading. Combine properties for Type (Primary | Secondary | Ghost), Size (S | M | L), and State. Use boolean properties such as Has Icon and text properties for labels.
Inputs need states for default, focus, error, and disabled with optional helper text. Checkboxes, toggles, and cards follow the same pattern: minimal masters covering maximum scenarios instead of dozens of disconnected components.
Documentation, handoff, and checklist
Write component descriptions: when to use, when not to, accessibility notes. Bind color, spacing, and radius to variables so token updates propagate everywhere. Organize pages into atoms, molecules, and organisms; publish libraries for team sync.
In Dev Mode, names should align with code components and variant properties with props. Before publishing, verify Auto Layout, tokens, all states, visible focus, descriptions, naming, and test instances on a mock page — one hour of Figma organization saves many hours of development bugs.
Related paths
FAQ
What is the difference between a component set and a single component?
A component set is a container for related variants such as all button states. Use a set when you have multiple meaningful states; use a single component when one master is enough.
Boolean property or separate variant for optional icons?
Use a boolean Has Icon for optional icons. Use instance swap on an icon slot when the icon itself changes — arrow versus plus.
How do I sync a library with my team?
Publish a team library in Figma, have teammates accept updates, and document breaking renames in the component description or team channel.