Figma Components & Variants

Summary

Reusable design elements (buttons, cards, inputs) that update everywhere they're used when the source component changes — variants let one component represent multiple states (default, hover, disabled) cleanly.

• 1Build a button component with 3-4 variants (default, hover, disabled, loading).
• 2Practice using your component across multiple screens and updating the source to see it propagate.
• 3Learn why components are the foundation of both efficient design work and design systems (Phase 8).