Design · Beginner
Design Systems in Figma
Tokens, components, and documentation for consistent internal product UIs.
Overview
Build a Figma library aligned with engineering handoffs—emphasis on data tables, filters, and forms common in operations software.
Features
- Token architecture for color and spacing
- Component variants and props mapping
- Documentation pages engineers reference
- Accessibility contrast checks built-in
- Table and filter patterns for ERP UIs
- Versioning and publish workflow
- Handoff specs with measurement discipline
Outcomes
- Publish a mini design system with ten components
- Pair tokens to CSS variables for dev sync
- Run a critique session with mentor rubric
Reviews
"Table component variants matched our inventory UI needs. Critique was blunt—in a good way."
"Token-to-CSS mapping doc is what our devs actually opened."
FAQ
Figma license?
Free tier works for core labs. Organization features discussed comparatively.
Code?
Optional CSS variable export; no React implementation required.
Limitation?
Motion design and marketing illustration are not included.