Components & Variants
Select a designed button → Create component (Cmd/Ctrl + Option/Alt + K). Instances of that component stay linked to the main. Edit the main once; every instance updates.
01Components = reusable UI
Select a designed button → Create component (Cmd/Ctrl + Option/Alt + K). Instances of that component stay linked to the main. Edit the main once; every instance updates.
Real-life example: A component is a rubber stamp. Change the master stamp and every stamped copy can inherit the update.
02Variants
Variants group related states in one component set: Primary / Secondary / Ghost, or Default / Hover / Disabled / Loading.
Combine properties: Size (sm, md, lg) × Type (primary, secondary). Designers pick properties from the right panel instead of hunting separate components.
- Name properties clearly: Type, Size, State, Icon.
- Keep variant grids tidy — same structure inside each variant.
- Use boolean properties for optional icons or badges when available.
03Overrides vs breaking the link
You can override text and some nested content on an instance without detaching. Detach instance only when you truly need a one-off design — otherwise you lose future updates.