What Are Component Variants in Figma?
Component variants are different versions of a component—such as size variations, states (default, hover, disabled), or types (primary, secondary)—grouped together as a single component set in Figma.
Why Use Variants
Before variants, designers created separate components for each button size or state, leading to library bloat and inconsistent updates. Variants group related components together, making them easier to find, swap between, and maintain. A single 'Button' component can have dozens of variants covering every combination of size, type, and state.
Variant Properties
Variants are defined by properties: Size (small, medium, large), Type (primary, secondary, ghost), State (default, hover, pressed, disabled). Figma's variant property panel lets designers switch between combinations without searching for different components. Well-designed properties anticipate real usage patterns.
Variants vs. Component Properties
Figma offers both variants and component properties. Use variants when the change affects layout, structure, or multiple nested elements. Use component properties for simpler toggles: showing/hiding an icon, changing text content, or swapping a single nested component. The best components combine both.
Variant Naming Conventions
Consistent naming makes variants discoverable. Use clear property names (Size, not S/M/L) and value names (Primary, not Blue). Order properties logically—type before state before size. Inconsistent naming creates confusion and makes automated tooling harder to implement.
Automate Your Design System Audits
ComponentQA automatically detects design system problems across your Figma files. Get actionable insights with deep links to fix issues where they live.