📖 Notes
LESSON 8 OF 26
Components — Create, Variants & Instances
Build Once, Reuse Everywhere
Components are reusable design elements. Variants let one component handle multiple states (hover, pressed, disabled).
Component System
Main Components, Instances, Variants
🧩
Main Component
The original, master version of a reusable element — marked with a purple diamond icon.
📎
Instance
A copy of the main component — editing the main component updates every instance automatically.
🔀
Variants
Multiple states of one component (default/hover/pressed/disabled) grouped as a single switchable component set.
⚙️
Component Properties
Boolean, text, and instance-swap properties let one component flex to different content without new variants.
✅
Why this matters
A button used on 40 screens only needs to be fixed once — as a main component — instead of updating 40 separate copies by hand.