Sorb.For youHow it worksFeaturesPricingDocsStart free — public betaSign in

The bridge — sorb dev / @sorb/juice

Juice is the conduit that carries tokens across. It runs the bridge server that connects the Figma plugin to your running component and resolves your tokens on the way through.

Install and run

npm install @sorb/juice
sorb dev

sorb dev starts the local bridge (default http://localhost:7777), resolves your DTCG sources into .sorb/resolved.json, and waits for the plugin to connect. It stays live during your session — no manual re-publish after each change.

What the bridge exposes

The plugin and SDK talk to the bridge over a small HTTP surface:

| Endpoint | Purpose | |---|---| | GET /tokens/latest | The current committed token set (used by Load from App). | | GET /tokens/resolved | The resolved map (used to Sync Variables from code). | | POST /preview | Open a live preview session; returns a session id. | | PUT /preview/{id} | Push edited values into the live session (debounced as you type). | | DELETE /preview/{id} | Tear the session down. | | GET /artifacts | The captured Storybook component index. |

Security posture

The local bridge is built to be safe by default:

  • It binds to 127.0.0.1 and rejects cross-site writes.
  • Preview mode is off by default in the SDK and accepts previews only from bridge origins you allowlist.
  • Token values are validated before they're applied.

Don't enable preview mode in a production deployment against an untrusted bridge.

Local vs hosted

  • Local — sorb dev runs entirely on your machine. No account, no cloud, nothing leaves your laptop. This is the free local loop.
  • Hosted — a team can point the plugin at a hosted bridge via an org key, so designers connect without each running a local server. See Cloud & accounts.

Inviting a designer (handshake)

To connect a designer without a hosted account, run:

sorb handshake --copy

This packs the bridge origin, app URL, and key into a single invite code. Send the code; the designer pastes it into the plugin's Settings and it configures itself. See Connect flows.

Next

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