Sorb vs Figma Code Connect
Complementary, not a replacement
Works with Figma. Not affiliated with, or endorsed by, Figma. Figma is a trademark of Figma, Inc.
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. The two solve different halves of the same problem.
| Dimension | Sorb | Figma Code Connect |
|---|---|---|
| ⚓ Anchor / source of truth | Your running React app — the values it actually renders. Sorb reads what React renders, not a hand-maintained file. | The Figma file state — a hand-published code snippet, point-in-time. |
| 👁️ What Dev Mode / an agent sees | A live preview of the real running component via the bridge — real DOM, real CSS variables, real resolved values. | A static code string — a pre-written snippet, not a running component. |
| 🧩 Component ↔ token mapping | Auto-bound by tier and property affinity — fill → background, stroke → border, text → text, radius → corner. No hand-written links. | Manual prop mapping — a developer writes and maintains each link. |
| 🎟️ Token awareness | Every bound value is a CSS custom property from the resolved map (id, cssVar, value, tier, type). | Snippet strings are hardcoded literals — no token semantics. |
| 🚀 Runtime delivery | Tokens arrive in your app as CSS variables at runtime — swap a value without touching a component. | Does not deliver runtime values. |
| ✅ Check before merge | Checks a proposed change against your live components' tier/type bindings before you merge. | Not present. |
| 🎯 Who it's for | Designers and developers in one loop. | Developers authoring the mappings. |
| 🧰 Framework breadth | React only — narrower, deeper: binding graph + tier taxonomy + token-aware SDK. | Spans several frameworks — broader. |
This 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. Code Connect facts are drawn from public Figma documentation and may change.
“Check before merge” = Sorb checks a proposed change against your live components’ tier/type bindings before merge — not a visual or accessibility audit.