Figma library

The mak UI library in Figma is built and kept in sync from the design tokens by a plugin. Code stays the source of truth: tokens flow code → Figma, never the reverse without a PR.

Open the library

The mak UI library is in Figma: open mak UI in Figma (opens in a new tab).

What it creates

Item	Detail
Primitives collection	Raw OKLCH ramps as sRGB, hidden from publishing
Color collection	29 semantic colors, modes Light / Dark / HC Light / HC Dark, aliasing primitives; code syntax `var(--primary)`
Dimension, Typography, Motion	Spacing, radius, control sizes, focus ring; font families, weights, sizes, line heights; durations
Text styles	9 (display … code), font size and line height bound to variables
Effect styles	`elevation/1–4`, shadow color bound to the mode-aware `shadow-color`
Foundations page	A swatch per semantic color; switch the frame's variable mode to preview themes
Components page	All 33 Wave 1–2 components (91 variants): Button, Icon Button, Link, Input, Textarea, Label, Field, Checkbox, Radio Group, Switch, Select, Card, Badge, Alert, Dialog, Tooltip, Dropdown Menu, Popover, Tabs, Accordion, Toast, Sheet, Table, Pagination, Breadcrumb, Avatar, Skeleton, Progress, Separator, Combobox, Command, Date Picker, Calendar. Names match the code titles. Every fill, stroke, padding, radius and height is bound to a variable; icons are the web set (Lucide); Dialog uses Button instances.

Variant properties use the code prop names and values (variant=primary, size=md), checked against each component.meta.json in the tests, which also fail if a shipped Wave 1–2 component has no Figma component. A few add design-only state variants (open, invalid, disabled).

Renamed in this version: Radio is now Radio Group, matching code. After re-running the plugin, delete the old Radio set on the Components page.

Check parity with code

Terminal

FIGMA_TOKEN=<personal access token> FIGMA_FILE_KEY=<key from the file URL> pnpm --filter @acme/figma-plugin parity

Reads the file through the Figma REST API (read-only) and fails if a component is missing or a variant property or value differs from code. Create the token in Figma under Settings → Security → Personal access tokens with file read access. In CI, add FIGMA_TOKEN and FIGMA_FILE_KEY as repository secrets and the parity step runs automatically.

Plan notes (Professional)

Variables sync through this plugin, because Figma's Variables REST API is Enterprise-only.
Code Connect isn't available on Professional (it needs an Organization or Enterprise plan with a Dev or Full seat). Until then, Dev Mode shows each variable's code name, and the docs site is the reference for component code.
If adding a mode fails, the plugin stops with a clear message: your plan may cap modes per collection, and the Color collection needs four.

Tests

pnpm --filter @acme/figma-plugin test runs the built plugin against a strict mock of the Figma plugin API. The mock enforces what real Figma enforces: fonts loaded before text, only bindable fields, correctly typed variables, resolvable aliases and valid modes. The tests cover the first run, a second idempotent run, a plan mode limit, and parity between Figma variants and code.