01
Design system engineering
We help product teams build, ship, and govern design systems that engineers actually want to use.
TokensComponent APIGovernance
v0.42 · Now with React Server ComponentsDesign files in.
Design files in.
Production code out.
Fractal Labs builds the developer tooling that turns Figma frames into clean, typed, framework-native components — and ships the opinionated CLIs that wire them into your codebase.
npm i -g @fractal/cli · MIT licensed · Made in Montréal
// Live playground
Edit the canvas. Watch the code update.
This is the same engine that powers our Figma plugin — bidirectional, type-safe, and aware of your design tokens.
canvas.fig
1440 × 900
Label
Variant
Radius
Padding · 18
Button.tsx
1style="color:#c792ea">import { Button } style="color:#c792ea">from style="color:#a5e3a1">"@fractal/ui";23style="color:#c792ea">export style="color:#c792ea">function CTA() {4 style="color:#c792ea">return (5 <style="color:#82aaff">Button6 variant=style="color:#a5e3a1">"primary"7 radius=style="color:#a5e3a1">"pill"8 padding={18}9 >10 Get started11 </style="color:#82aaff">Button>12 );13}✓ compiled · 14msreact · typescript · tailwind
// The console
One console for every component, token, and build.
Inspect the diff between design and code, audit token drift, and roll back a component across every consumer — without leaving your terminal.
fractal · ~/acme-design-system
⌘K
components / 127
Component registry
● in sync8 drift
ComponentFigmaCodeStatus
Buttonv3.2.0v3.2.0sync
Cardv1.4.1v1.4.0drift
Dialogv2.0.0v2.0.0sync
Inputv1.8.2v1.8.2sync
Selectv0.9.0v0.7.1drift
Tabsv1.1.0v1.1.0sync
Build
342ms
Bundle
18.2kb
Consumers
27 apps
Trusted by teams shipping at scale
VERCELLINEARSTRIPEFIGMARAYCASTARCRETOOLSUPABASENOTIONFRAMERVERCELLINEARSTRIPEFIGMARAYCASTARCRETOOLSUPABASENOTIONFRAMER
// 01 — figma engine
A bidirectional bridge between design and code.
Our parser reads frames, components, auto-layout, variables, and variants — and emits framework-native code that respects your design tokens. Edit either side; both stay in sync.
- Tokens, variants, and constraints preserved verbatim
- Diff & merge with conflict resolution on the file level
- React, Vue, SwiftUI, and Compose targets
Hero / Frame
↓ parse
<Hero>
<Headline />
<CTA variant="primary" />
</Hero>
// 02 — opinionated CLIs
Tooling that has an opinion, so your team doesn't have to.
From scaffolding a monorepo to generating a typed SDK from an OpenAPI spec, every command is one keystroke and one decision. No prompts. No yak shaving.
- Zero-config generators with sensible escape hatches
- First-class TypeScript, ESM, and workspaces support
- Single binary, < 6mb, no runtime dependency
zsh — fractal
~ $ fractal init acme-design
↳ scaffolding monorepo · turbo · pnpm · biome
↳ resolving design tokens from figma://acme/tokens
✓ ready in 1.2s
~ $ fractal pull --diff
↳ 8 components drifted · 2 tokens removed
! review at fractal.dev/r/akj22
~ $ fractal sync
// 03 — engineered for scale
From a side project to a Fortune-500 design system.
The same primitives that power a solo developer's component library run inside large engineering orgs — with audit logs, RBAC, and a private registry baked in.
- Self-hosted or managed registry, your call
- Granular permissions, SSO, and audit log
- Deterministic builds and reproducible snapshots
Releases · last 90 days
412 deploys
+24%
Apps
27
Components
127
P95 build
342ms
// Services
When the tooling needs to fit your team, not the other way around.
02
Figma-to-code migrations
Replatform a legacy library onto our open-source pipeline — without losing a single token or variant.
AuditMigrationTraining
03
Internal tooling sprints
Short, focused engagements to ship the developer tool your team has been putting off for two quarters.
CLIDXPerformance
// Start building
Install once. Ship every component twice as fast.
Free and open source. Take it for a spin in your terminal — no signup, no email, no marketing email follow-up.
$npm i -g @fractal/cli
MIT licensed·Read the docs →·github.com/fractal-labs