Sorb · by Metatoy
Design tokens, from Figma to your running React app.
While Code Connect maps a static snippet into Dev Mode, Sorb anchors on your running React app: designers propose token changes in Figma, see them live in the real component, and ship without touching production code.
Free, invite-only beta. No card required.
Two ways in
Pick your path
Same loop, two front doors. Designers drive it from Figma; developers wire it into React.
For designers
Propose token changes in Figma and watch them land in the real running app — before a developer touches code.
- Propose a token change in the Sorb plugin, right inside your Figma file.
- See it live in the actual React component — not a mock, not a static snapshot.
- Hand off knowing it already works in the real app — nothing to translate.
You’ll need: Just the Sorb Figma plugin. A developer runs the local bridge once to connect it.
For developers
Two commands. Real tokens from your running app, delivered as CSS variables — bound by type, swappable at runtime.
- Install the Leaf SDK and wrap your app in SorbProvider.
- Run sorb dev — the local bridge connects the Figma plugin to your running component.
- Tokens resolve to .sorb/resolved.json, auto-bind to CSS properties by type, and arrive as var(--token).
You’ll need: A React app, Node 20, and your DTCG token source.
Two commands to start
npm install @sorb/leaf @sorb/juice
sorb devLeaf wraps your React app and delivers tokens as CSS variables. Juice runs the local bridge server that connects the Sorb Figma plugin to your running component.
How it works
One loop: Figma → token → preview → bind → ship
The loop starts in Figma and ends in your real running component — not a mock, not a static preview.
Figma
Propose token changes in the Sorb plugin (Canopy) right inside your Figma file.
Token
Sorb captures the exact token values your app renders — structured and ready to edit.
Live preview
See the change in your real running React component — not a static snippet, not a mock.
Bind
Tokens are matched to the right CSS properties automatically — fills, borders, and radii by type.
Ship
Tokens reach your app as CSS variables at runtime — swap a value without touching a component.
Tokens travel in the DTCG format — the open standard that Style Dictionary and the DTCG community toolchain already speak, so your token file works outside Sorb too.
Features
What’s in the loop
Figma plugin
Propose and preview token changes from inside Figma with the Sorb plugin.
Live preview
Preview token changes in your real running React component — no mocks, no static snapshots.
Token binding
Tokens are matched to the right CSS properties automatically — no hand-wiring into snippets.
React SDK
Add one provider to your React app; tokens flow through as CSS variables, live-swappable without a rebuild.
Tailwind
CSS-variable tokens drop into a Tailwind theme — use them as utility values directly.
vs Figma Code Connect
Complementary, not a replacement
Code Connect puts a static snippet into Figma’s Dev Mode — anchored on the Figma file. Sorb anchors on your running app: it reads what React actually renders, lets designers propose changes in Figma, and previews them live in the real component before anything ships.
| Dimension | Sorb | Figma Code Connect |
|---|---|---|
| Anchor | Your running React app — the values it actually renders. | The Figma file — a hand-published code snippet. |
| Live preview | Previews the real running component via the bridge. | Shows a static code string, not a running component. |
| Token resolution / binding | Reads what the app actually renders; tokens matched to CSS properties by type. | Snippets are hand-written; no token semantics. |
| Runtime delivery | Tokens arrive in your app as CSS variables at runtime. | Does not deliver runtime values. |
| Who it's for | Designers and developers in one loop. | Developers authoring the mappings. |
| Framework breadth | React only — narrower, deeper. | Spans several frameworks — broader. |
Comparison reflects each tool’s design anchor, not a feature-for-feature ranking. Code Connect is native to Figma Dev Mode and spans more frameworks; Sorb goes narrower and deeper on React.
Pricing
Simple, per-editor pricing
Base
$24 /editor / month
The core loop: plugin, live preview, token binding, and the React SDK.
Pro
$48 /editor / month
Everything in Base plus higher limits and team collaboration features.
Prices shown are what Sorb will cost at general availability. Nothing is charged during the beta.
FAQ
Common questions
What stage is Sorb at?
Free, invite-only beta. Request an invite and we'll bring people on in waves. It is not generally available yet — expect rough edges and active iteration.
Does Sorb work with Figma?
Yes. Works with Figma. Not affiliated with, or endorsed by, Figma. Figma is a trademark of Figma, Inc.
Is it a replacement for Figma Code Connect?
No — it's complementary. Code Connect maps a static code snippet into Figma's Dev Mode. Sorb resolves, binds, and live-previews real tokens in your running React app.
What frameworks are supported?
React today, via the Leaf SDK. We went narrower and deeper rather than wide: one framework, fully resolved and bound at runtime.
How is my data handled?
During the beta the hosted service stores org/project metadata and short-lived preview payloads. See the Privacy notice for what we store and for how long.
What will it cost?
Base is $24 per editor / month and Pro is $48 per editor / month. During the beta it is free — no card required.