Figma Handoff
Figma Variables naar CSS tokens mapping
Figma Handoff
De Figma design file spiegelt de token architectuur van de codebase. Designers en developers spreken dezelfde taal.
Figma → Code Mapping
| Figma Variable | CSS Token | Tailwind |
|---|---|---|
color/brand | --color-brand | text-brand |
color/label/primary | --color-label-primary | text-label-primary |
color/bg/primary | --color-bg-primary | bg-surface-primary |
color/outline/default | --color-outline-default | border-outline |
text/body/size | --text-body-size | text-body |
space/4 | --space-4 | p-2 (8px) |
radius/m | --radius-m | rounded-m |
Bento-Structuur
De token architectuur volgt het Bento/Adyen model:
Workflow
- Designer past Figma Variables aan
- Review token wijzigingen in design review
- Developer update
globals.csstokens - Verify visuele regressie via Storybook/screenshots
ℹ
Design File
De Figma design file is beschikbaar op Claude-Designs. Alle tokens zijn gedefinieerd als Figma Variables.
Naamconventies
| Figma | CSS | Tailwind |
|---|---|---|
color/label/primary | --color-label-primary | text-label-primary |
color/bg/secondary | --color-bg-secondary | bg-surface-secondary |
text/title/size | --text-title-size | text-title |
space/8 | --space-8 | p-4 (16px) |
Houd deze mapping 1:1 — als een token in Figma wijzigt, wijzigt exact één CSS variable.