Tokens & handoff

How a decision made in Figma ends up identical in the code, with no manual translation.

The principle

Every Figma variable (color, size, spacing) carries a name : that name becomes a CSS variable mechanically. A designer who renames or tweaks a variable in Figma sees the change land in the code on the next export, with no manual step and no value ever hand-copied into a mockup or component.

Figma ↔ CSS

Palette / Neural / 900     →  --neural-900
Spacing / 16               →  --spacing-16
Radius / m                 →  --radius-m
Texts / Heading / H1       →  .ragt-h1

Use role aliases (--text-strong, --surface-page…) rather than the raw ramp steps directly : they survive a palette change. Alias details live under Design language → Colors.