Figma Workflow
Stratum is designed so that every token, variant, and component maps 1:1 between Figma and code. A designer changes accent in Figma — the same change propagates to the matching theme.colors.accent token in code.
The naming convention
Section titled “The naming convention”Figma and code share the same names:
| Figma | Code |
|---|---|
Button / Primary / Md | <Button variant="primary" size="md" /> |
Colors / Accent | theme.colors.accent |
Radius / Md | theme.radius.md |
Shadow / Sm | theme.shadow.sm |
Icon / Bold | iconWeight: 'bold' in theme |
Token categories
Section titled “Token categories”| Category | Figma | Code |
|---|---|---|
| Backgrounds | Color/Background, Color/Surface | theme.colors.background, theme.colors.surface |
| Text | Color/TextPrimary | theme.colors.textPrimary |
| Accent | Color/Accent | theme.colors.accent |
| Spacing | Spacing/Md (16) | spacing.md from @/tokens |
| Radius | Radius/Md | theme.radius.md |
What’s planned for Phase 7
Section titled “What’s planned for Phase 7”- Figma Variables export script →
src/tokens/themes/ - CI step: token drift detection (Figma vs code)
- Figma component library with matching prop names
- Auto-update workflow: merge Figma token changes → PR