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:

Figma Variables          Code
────────────────────────────────
Collection: Core    →    :root { --color-brand: #5F2104 }
Collection: Semantic →   Tailwind config extends
Mode: Light          →   :root { ... }
Mode: Dark           →   @media (prefers-color-scheme: dark) { ... }

Workflow

Designer past Figma Variables aan
Review token wijzigingen in design review
Developer update globals.css tokens
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.

Figma Handoff

Figma Handoff

Figma → Code Mapping

Bento-Structuur

Workflow

Naamconventies

On this page