Get started

Figma kit

The Figma library is generated from the same token files as the code, so a token change shows up in both.

Variables

Primitives (the eight scales), Theme with Dark and Light modes aliased to the primitives (plus the chart colors), Size (space, radius, type) and Motion (durations, distances, easings). Same names as the CSS variables, with code syntax for Dev Mode.

Styles

Text styles for every heading and text size, effect styles for the card, pop and glow shadows, and the accent gradients.

Components

Component sets with the same variants and properties as the React props, bound to the variables, so switching a frame to Light just works.

How it is made

packages/tokens builds figma.json; the Alea Figma plugin reads it and writes everything into your file: a cover, the foundations, 174 icons, a page per component with its spec (anatomy, Figma and React properties, accessibility, keyboard, do and don't, tokens) and responsive templates. Components are interactive: hover, press and click move between variants with Smart Animate on the kit's ease-out curve. Running it again rebuilds what it made and keeps your layers.

On plans with one mode per collection, Theme holds the active theme and the plugin's theme switch rewrites it, so every component follows. On files that can't take more pages, each component becomes a section on one page.

npm run tokens   # tokens.css, tailwind.css, tokens.json, figma.json