DESIGN
Design in Figma
The Figma library holds the same components as the code, built from the same tokens. What you draw is what gets built.
That is a stronger claim than most design systems can make, so it is worth saying what it rests on. The colours, spacing, type sizes and corner radii in the file are not values someone typed in. They are Figma variables generated from the same source as the CSS. When a token changes, both sides move together.
What is in the library
Component sets covering the same ground as the code: framed controls like Button, Input and Select; content components like Table, Blockquote and List; and full compositions like Card, Navigation Menu and Confirm Dialog.
Every set carries the axes you would expect. Size runs xs to xl. Variants cover the states a component genuinely has, and interaction states are drawn rather than implied. Layout primitives are there too, so a page can be built from real components rather than anonymous frames.
The variables come in modes. Colour has Light and Dark. Sizing has the four density modes, so you can switch a frame from Comfortable to Dense and watch it reproportion, exactly as the code does.
How it stays in step
The token values are the shared source. They live in one place, emit to CSS for the code, and sync to Figma variables for the file. Neither side is copied from the other by hand.
That is what keeps a colour honest. A designer picking action/primary/default in Figma and a developer writing --primitiv-action-primary-default in CSS are naming the same value, not two values that were once the same.
Token definitions
one source, in the repository
Figma variables
action/primary/default
CSS custom properties
--primitiv-action-primary-default
Two things the file cannot match
Two components genuinely differ between Figma and the browser, and it is better to know now than to find out during handoff.
- Grid is an approximation
- Figma cannot apply CSS grid layout inside a component slot, so the Grid component is built with wrapping instead. It looks right in most layouts and it will not behave identically to the real thing in every case.
- Aspect Ratio is fixed, not fluid
- In the browser the component holds a ratio at any width. In Figma it holds specific pixel dimensions.
Everything else matches. Both limits are Figma's rather than choices, and both are recorded in the components' own descriptions in the file, so a designer who never reads this page still finds out.
Working with a developer
Handoff is lighter than usual here, because most of what you would normally write down is already shared.
- Name components as they are named
- If you used Select, say Select. The developer has a component with that name and the same variants.
- Say the token, not the value
- "Surface, subtle" survives a theme change and a dark mode. #f4f4f5 does not.
- Say which density
- It is a real setting on their side, and it changes every measurement you might otherwise be asked for.
- Do not redline spacing
- The spacing is a token. Naming it is enough, and measuring it invites a number that will drift.
Where the colour comes from
The palette in the file is generated rather than picked. A colour engine called Harmoni builds each scale from one seed colour, choosing the text colour that pairs with every step and checking contrast as it goes.
Harmoni is also a Figma plugin, for teams who want to generate their own palettes this way. You do not need it to use the library — the palette it produced is already in the file.