Skip to content
⌘K
How-To

Figma

The single source of truth for every Atelier UI component — variables, frames, and token mappings, all in one file.

The Figma file

Atelier UI is the single Figma file for the Atelier UI design system — the component library Atelier ships. It contains two pages and a variable collection that maps 1:1 to the CSS token system.

Page Purpose
Tokens Variable collection viewer — all 56 design tokens design tokens Named design values (colors, spacings, radii, type scales) stored as variables — so "primary color" has one canonical name instead of a hex code copy-pasted everywhere. In Atelier, tokens live as CSS custom properties like `--ui-color-primary`, and they mirror the variable names in the Figma file 1:1. across Light and Dark modes
Components All component frames organized by section — every variant, size, and state
Open in Figma

Token → CSS mapping

Every Figma variable maps directly to a CSS custom property using the same name. When AI references a token from Figma, it uses the identical name in code — no translation needed.

Figma variable to CSS custom property mapping Each Figma variable on the left maps one-to-one to a CSS custom property on the right. The names are identical across four rows: color/primary, color/surface-raised, spacing/6, radius/lg. Figma variable color/primary color/surface-raised spacing/6 radius/lg CSS custom property --ui-color-primary --ui-color-surface-raised --ui-spacing-6 --ui-radius-lg 1 : 1 mapping automatic · no build step
Identical names on both sides: there is no naming layer to learn, translate, or maintain.
  • color/primary --ui-color-primary
    light#006470 dark#34d8d8
  • color/surface-raised --ui-color-surface-raised
    light#f8fafc dark#131c24
  • spacing/4 --ui-spacing-4
    1rem · 16 px
  • spacing/6 --ui-spacing-6
    1.5rem · 24 px
  • radius/md --ui-radius-md
    0.625rem · 10 px
  • radius/lg --ui-radius-lg
    0.875rem · 14 px

56 variables total: 29 color, 10 spacing, 5 radius, 12 typography. Full list in libs/angular/src/styles/tokens.css.

Component frames

The Components page has one Figma Section per component. Each section shows all variants, sizes, and states — the complete visual spec.

Component Figma section What it shows
LlmButton P0 — Core 3 variants × 3 sizes × 4 states (default / hover / disabled / loading)
LlmInput P0 — Core 3 types × 5 states + error message
LlmCard P0 — Core 3 variants × 4 padding levels
LlmBadge P0 — Core 5 variants × 2 sizes + inline usage example
14 more… P1 + P2 Select, Dialog, Tabs, Accordion, Menu, Tooltip, Alert, Checkbox, Toggle, and more

Using Figma in the workshop

This is how Figma, Storybook, and AI work together to produce component code that matches the design exactly.

Atelier workflow: Figma, Storybook, AI, Component Figma provides design tokens and component frames. Storybook exposes props and stories via MCP. Claude reads both sources and writes code that ships as a production component. The loop iterates as designs evolve. inspect prompt ships iterate Figma Tokens · Frames Storybook Props · Stories · MCP Claude Reads both · Writes code Component Design-accurate · Shippable
This is how Figma, Storybook, and AI work together to produce component code that matches the design exactly.
01

Open the Figma file — find the component frame

Navigate to the Components page and locate the section for the component you want to build. Note the variant names and states — these map directly to the component's props.

02

Note the token values from the variable panel

In the Figma inspect panel (right sidebar, Design tab), hover over fills, padding, or radius values to see the bound variable name (e.g. color/primary, spacing/6, radius/lg). These are the exact CSS token names you’ll use in code.

Figma Design panel with variable bindings highlighted A mockup of the Figma right-hand Design panel. Three properties are shown — Fill, Padding, Corner radius — each with its value on the left and its bound variable name on the right. The variable names color/primary, spacing/6, and radius/lg are highlighted. Design Prototype Inspect Settings Card Fill #00BEBE · 100% color/primary Padding 24 px spacing/6 Corner radius 12 px radius/lg bound variable bound variable bound variable
The right sidebar in Figma. Every property bound to a variable shows the variable name instead of a raw value — that name is your CSS custom property name.
03

Ask AI — reference token names and Storybook MCP

Include the Figma token names in your prompt. AI will use the same names in code, and will look up accurate prop names and examples from the Storybook MCP:

example prompt
Build a settings card using LlmCard with variant="elevated".
Match the Figma spec: --ui-color-surface-raised background,
--ui-spacing-6 padding, --ui-radius-lg border-radius.
Use the storybook-react MCP to check LlmCard props.
04

Ship — the component matches the design

Because Figma variables and CSS custom properties share the same names, there is no gap between what the designer specified and what ships. Light and dark mode work automatically — the tokens resolve to their mode-specific values at runtime.