Figma Design System

Workflow

1. Inventory existing variables, styles, components, variants and usage before creating new primitives.
2. Define semantic tokens separately from raw palette/spacing values.
3. Build components around stable behavior and content patterns rather than page-specific appearance.
4. Use variants/properties deliberately and avoid combinatorial explosions.
5. Encode responsive behavior, states, accessibility and content constraints in component documentation.
6. Map tokens/components to production code names where a code design system exists.
7. Audit detachments, local overrides, duplicate components and inaccessible states.

Output

Token model, component hierarchy, gaps, implementation mapping and migration recommendations.