Pathwise

Manuals / Figma / Chapter 6

B · Components · intermediate · Days 8–9 · Chapter 6 of 13

Components & instances

Components are reusable source-of-truth elements. Instances inherit updates. Build button, input, card as components before variants.

Path progress
41%

Step 1 of 3

Button component

Primary button as component on Components page. Instances on screens.

Button componentDrag 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 componentdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Button: default + hover states as separate components OR prepare for variants next chapter.

Was this step clear?
Chapter learning outcomes
  • Create component
  • Instances & overrides
  • Organizing components
  • Boolean layers lite

Clear these before you leave

Side quest

Mini library

Add avatar, badge, and tag components. Document on Components page.