Figma properties, as code.
The design becomes the spec: designers get guardrails, developers get types, agents stay in bounds, and one codebase powers apps and websites alike.
TL;DR
One source of truth runs from Figma to every screen.
The whole team shares one vocabulary: Figma's, from designers to developers to agents.
Figma is the source of truth
No Storybook, second catalog or handoff doc to keep in sync. Layouts, styles and tokens live in Figma, and the code is generated from there: one place to look, one place to update.
One set of tokens, both sides
One tokens file feeds both sides: the plugin imports it into Figma as variables, text styles and shadow styles, and the components are generated from it. Motion has a file of its own beside it, for easings, durations and animations.
Change a token once and both sides follow, so design and code never disagree on a color, a size or a speed.
Phone apps and web apps, one codebase
Built on React Native: one set of components runs on iOS, Android and the web, and looks and behaves the same everywhere.
Less back-and-forth
Designers know the design system inside out; nobody else has to. Guardrails in Figma and in code make its rules explicit and enforced: fewer misunderstandings, far less handoff ping-pong.
Agents follow the same rules, which makes their work quicker to review.
Time back, spent wisely
Ready-to-use component code saves hours of implementation. Spend more time exploring, on feedback rounds and on polish, all in Figma where the whole team can chime in.
…or simply ship sooner, with fewer hoops to jump through.
Design freely. It ships exactly the way you composed it.
Build within the tokens, and the code mirrors the design property for property.
Freely, because the tokens are the only thing locked. Components still have their place, but for reuse, not as the way a design gets expressed, so there's no need to get tied down in ever more explicit ones.
With AI making one-off UI cheap, a designer's job moves past the old process and toward taste. A drop-down for a single use case can simply be made: no aligning with other designers to squeeze it into a shared component, and no waiting on developers to update one. The designer's taste is what keeps the design coherent; reuse is a bonus.
And with Unison, that's a call made with confidence. Left to AI alone, a design drifts a little with every prompt; Unison's output is deterministic, so the same design always produces the same code.
Tokens are fixed, but primitives are free
Colors, spacing, radii, type sizes and shadows are locked as design tokens; everything else is your call. There is no rigid component library to wait on or work around: every design is a mix of just a few primitives, shaped into anything from a single button to a whole page
Behavior is built in
Auto layout carries into code, so one design adapts to every screen size: no more mockups for each resolution your app supports.
Motion by name
Motion is a capability of the components, not something to wire up in Figma, so there are no prototype connections to keep in sync with the code.
Speeds and easings are a short list of named tokens in one file, like the design tokens, so changing how things move is a single edit. A spec that says 200ms, ease out means exactly one thing in code, and on the web it respects reduced-motion settings.
Guidance as you go
The plugin flags what won't translate, and what the code does instead, as you work. Each issue selects the layer in question, so there's no hunting for it.
Primitives become the component
Select a frame and the plugin writes the code, dropping empty wrappers and instance shells on the way.
Light and dark, from one design
Colors come from Figma's Light and Dark variable modes, so the dark theme comes along for free.
Your file, your workflow
Keep working the way you do: annotate a layer EXCLUDE_FROM_OUTPUT and it stays out of the code, so notes, guides, placeholders and whatever else you want stay in Figma.
Your editor says no before a reviewer has to.
Generated from the design and typed against design tokens: no more pixel-pushing.
Red squiggles and code completion
Values that aren't in the design system are an error in your editor as you type, and every design token shows up in code completion. Rename or remove a token and every place still using it turns red too, so nothing drifts out of sync unnoticed.
Reads like the properties panel
The JSX says what Figma's properties panel says, in plain words anyone on the team can read: no decoding a spec, no eyeballing the design into code. A design update is a diff of those properties, so what changed is clear at a glance.
Square to rounded, violet to fuchsia Plain Tailwind, web and native
Components emit plain Tailwind classes, never inline styles. On the web they fit right into an existing Tailwind setup; on iOS and Android, Uniwind or NativeWind turns the same classes into native styles, so one styling setup covers every platform.
Straight from Dev Mode
The plugin runs in Dev Mode too, so developers can select a frame and copy its code without edit access to the file.
Typed motion on every platform
Transitions, easings and animations are flags too, typed against the motion tokens. On the web they're Tailwind classes that honor reduced motion.
On iOS and Android you're free to choose: NativeWind, or Uniwind with one import that runs them through Reanimated, so animations don't require Uniwind Pro.
A color that eases, and a spinner Few pieces, endless combinations
A handful of primitives cover nearly everything, with clear APIs. Like LEGO bricks: snap them together into buttons, cards, tabs and lists, or whole pages
Need something new? Build it from the same pieces.
An escape hatch, when you need it
className is still there for the rare thing the design system doesn't cover. Reaching for it is a deliberate choice, and it stands out in review.
Your coding agent knows your design system.
The library gives your agent a vocabulary in which only your design system can be written.
Without one, an agent writes plausible CSS at best: a gap here, a color there. Each one has a chance to slip through review and pull the design a little further off course. Prompt rules get buried as the context fills up, then summarized away, but a vocabulary doesn't need remembering. See what one short prompt builds
Constraints over instructions
Agents need the design system in a form they can't misread, not more instructions. If an agent guesses a value that isn't a token, TypeScript stops it before it ever gets to review.
Review the design, not the styles
The agent writes in Figma properties and tokens, so checking its work means checking the design, not deciphering Tailwind, or worse: raw CSS.
From tweaks to redesigns
A tweak is a lookup: every style maps to one prop. A redesign can reshuffle a whole composition, but the component tree mirrors the Figma layers, so an agent can rework the layout and leave state, handlers and data in place.
Proof over promises.
One short prompt and three familiar pages, built by an agent with nothing but the library.
The promise: the components hold up however the code gets written. The proof: no Figma, no plugin, just an agent writing straight against the library, from this prompt alone:
Claude Opus 5.5, at medium effort, built all three pages from it in about 13 minutes, in a single session, with the types and lint passing. Everything it wrote is in one commit.
shadcn/ui
The homepage of the component library everyone knows, rebuilt in Frames and Text. See the one-shot and the original.
Google, for Puppies
A search results page, images and all. See the one-shot and the original.
r/artificial
A busy Reddit feed, with its posts, votes and sidebar. See the one-shot and the original.
Pick your side, meet in the middle mutual.
Designers grab the plugin, developers install the library, and the design does the rest.
Designers
Install the Figma plugin from the Figma Community.
Try it first
Take it for a spin before installing anything: the web playground and the Expo playground show the library running in a browser and on a phone.
Developers
Install the npm package, or clone the library on GitHub. It's open source.
The fine print.
Every approach has trade-offs, and these are worth making.
1. Designers give a little
Designers work with a subset of Figma: the primitives and features that translate faithfully into code. Some tools stay on the shelf, so that everything drawn ships exactly as drawn.
3. The team gets a lot
Design and code stay aligned, agents stay on brand, and features ship together, sooner. The hours saved go to the work that matters.
2. Developers give a little
Developers stop hand-writing styles, and with it some of the fine-tuning they might enjoy. The layout comes from the design; the craft goes into logic, state and the interactions that make it feel right.
Worth a try
It's best judged on a real project, with an open mind. Anything missing? It's open source and open to change: contributions are welcome.