The Figma plugin (Canopy)

The Sorb plugin is the Figma-side half of the bridge. It lives in Figma's plugin panel and connects your Figma Variables to a running app — so you can edit tokens in Figma and preview the result in your real product.

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

Install

Install Sorb from the Figma Community, then open it from Plugins → Sorb (or Figma's plugin search). The panel opens at 380 × 560 px. Figma desktop is required — the plugin uses the Figma plugin API.

How it's built

The plugin has two halves that talk over postMessage:

code.js runs in Figma's sandbox — it has figma.* API access but no network.
ui.html runs in an iframe — it has fetch but no figma.*.

All network calls (to the bridge and to your app) originate from the iframe. You don't need to think about this to use the plugin, but it explains why the plugin connects to a bridge origin rather than talking to your app directly.

The three views

The panel has a tab bar with three views:

| View | What it's for | |---|---| | Tokens | The primary workspace — an editable table of your design tokens, plus sync and preview actions. | | Storybook | Materialize captured components into Figma as native nodes with live Variable bindings. | | Settings | Connection URLs (bridge, app, Storybook) and insert behavior. |

Each has a full walkthrough in the plugin user guide:

The core loop

Load your tokens — from the running app (Load from App) or from Figma Variables (Load from Figma).
Preview — click Preview in app to open a live session; edits push to your running component as you type.
Bind — token values map to CSS properties by type automatically; nothing to hand-wire.
Open PR — carry the working-set edits into your token file.

Connecting the plugin

The plugin reaches your app through the bridge. During local development you run sorb dev and point the plugin's Bridge origin at it. There are three ways to connect, covered in Connect flows:

Local (blank key) — point Settings at your local sorb dev; no account.
Handshake blob — a developer runs sorb handshake --copy and sends you a code you paste in.
Org key — paste a sorb_pk_… org publishable key to connect to your team's hosted bridge.

Tokens & taxonomy — how values resolve and bind.
The bridge — what sorb dev does.
Cloud & accounts — org keys and the hosted bridge.