Pathwise

Manuals / Figma / Chapter 7

B · Components · intermediate · Days 10–11 · Chapter 7 of 13

Variants & component properties

Variants collapse related components into one set with properties (size, state, type). This is how real design systems scale.

Path progress
49%

Step 1 of 3

Button variant set

Properties: Type=Primary|Secondary, Size=Sm|Md|Lg, State=Default|Hover|Disabled.

Button variant setDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Button variant setdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

One button component set with 12 variants (or sensible subset).

Was this step clear?
Chapter learning outcomes
  • Variant properties
  • Component properties
  • Boolean props
  • Instance swap

Clear these before you leave

Side quest

Chip component

Chip with variants: selected, disabled, with icon optional.