How to use it — Recreate this structure in a fresh Figma file, then swap the sample values for your brand. Start with foundations, add only the components you actually ship, and document as you build. A living system beats a perfect one — bias toward tokens, variants and clear names over volume.
01 · File & page structure where things live
Recommended Figma pages
📄 Cover name · version · owner
📐 Foundations colour · type · space · grid · icons
🧩 Components buttons · inputs · cards · nav · feedback
🧱 Patterns forms · empty states · tables · modals
🖼 Templates PDP · landing · checkout · account
🗂 Archive deprecated / WIP
📝 Changelog what shipped, when, by whom
02 · Naming conventions findable = usable
- Tokens:
category/role/variant → color/text/muted
- Components:
Category / Name → Button / Primary
- Use slashes to group in the Assets panel & instance menus
- Layers named by intent, never "Rectangle 42"
- Variants via properties (Type, Size, State), not duplicated frames
- Icons:
icon/name, 24px frame, single stroke weight
03 · Foundations — tokens the source of truth
Colour roles
| Token | Role |
|---|
color/bg/base | Page background |
color/bg/subtle | Cards, panels |
color/text/strong | Headings, key text |
color/text/muted | Secondary text |
color/border | Dividers, inputs |
color/brand | Primary actions |
color/brand/hover | Hover / pressed |
color/feedback/* | success · warning · danger |
Spacing & radius (4px base)
| Token | px | Token | px |
|---|
space/1 | 4 | space/6 | 24 |
space/2 | 8 | space/8 | 32 |
space/3 | 12 | space/12 | 48 |
space/4 | 16 | radius/md | 10 |
radius/sm | 6 | radius/pill | 999 |
Type scale
| Token | Size / line | Weight |
|---|
text/display | 40 / 44 | 600 |
text/h1 | 30 / 36 | 600 |
text/h2 | 22 / 28 | 600 |
text/h3 | 17 / 24 | 600 |
text/body | 15 / 24 | 400 |
text/caption | 12 / 16 | 500 |
Breakpoints & elevation
| Breakpoint | px | Shadow | Use |
|---|
sm | 480 | e1 | Cards |
md | 768 | e2 | Dropdowns |
lg | 1024 | e3 | Modals |
xl | 1280 | — | — |
04 · Component checklist done means done
Every component ships with
- Variant properties: Type, Size where relevant
- States: default · hover · focus · active · disabled · loading · error
- Tokens only — no hard-coded hex, px or type
- Auto layout + resizing rules that survive content changes
- Responsive behaviour defined (min/max, wrap, truncation)
- Accessible name + focus order + AA contrast
- Content rules: max length, empty/overflow, placeholder
- Dev notes / code link in the description field
05 · Handoff documentation per component
One-screen spec
- Purpose — what it's for, when not to use it
- Anatomy — labelled parts
- Props / variants — table of options & defaults
- States & behaviour — including motion
- Tokens — colour, space, type used
- Do / Don't — two or three of each
- Accessibility — roles, labels, keyboard
06 · Governance keep it alive
Contribution & versioning
- One published library = single source of truth
- Versioned releases with a written changelog
- Deprecation policy: mark → migrate → remove
- Lightweight request flow for new components
- Review by an owner before anything publishes