Getting started

Sorb connects a token change in Figma to your real running React component. This page takes you from an empty project to a live preview in about five minutes.

What you'll need

• A React app (Node 20+).
• Your design tokens in the DTCG format — the open standard Style Dictionary already speaks.
• The Sorb Figma plugin (Canopy), installed from the Figma Community.

1. Install the SDK and bridge

The React SDK (@sorb/leaf) delivers tokens to your app as CSS custom properties. The bridge (@sorb/juice) runs locally and connects the Figma plugin to your running component.

npm install @sorb/leaf @sorb/juice

2. Wrap your app in SorbProvider

import { SorbProvider } from "@sorb/leaf";

export default function App() {
  return (
    <SorbProvider>
      <YourApp />
    </SorbProvider>
  );
}

Tokens arrive at runtime as var(--token, fallback) — swap a value without touching a component.

3. Run the bridge

sorb dev

sorb dev starts the local bridge server (default http://localhost:7777), resolves your DTCG sources into .sorb/resolved.json, and waits for the plugin to connect.

4. Connect the Figma plugin

Open the Sorb plugin in Figma, go to Settings, and point Bridge origin at your running sorb dev (default http://localhost:7777) and App URL at your dev server (e.g. http://localhost:5173). Then, from the Tokens tab, click Preview in app to open a live session.

See the Figma plugin guide for a screen-by-screen walkthrough.

5. Propose, preview, verify

1. Edit a token value in the plugin's Tokens tab.
2. Watch your real component re-skin live in the browser.
3. When it looks right, use Open PR to carry the change into your token file.

Next steps

• The Figma plugin — the propose → preview → bind loop.
• Tokens & taxonomy — how resolution and binding work.
• React SDK — SorbProvider, hooks, and CSS variables.
• The bridge — sorb dev and @sorb/juice.

Works with Figma. Not affiliated with, or endorsed by, Figma. Figma is a trademark of Figma, Inc.