B · ComponentsIntermediate45 min read
6. Components & instances
Figma · 52 pages source format
Components are reusable source-of-truth elements. Instances inherit updates. Build button, input, card as components before variants.
What you'll learn
- Create component
- Instances & overrides
- Organizing components
- Boolean layers lite
Button component
Primary button as component on Components page. Instances on screens.
Do this now
Button: default + hover states as separate components OR prepare for variants next chapter.
Clear?
Input component
Label optional, field, helper text, error text layers. Use visibility or variants later.
Do this now
Input component with 4 layers. Place 2 instances on login.
Clear?
Override discipline
Override text and icons on instances — not structure. Reset overrides when main component updates wrong.
Do this now
Change main button padding. Confirm instances update. Reset one broken override.
Clear?