Utilities

Tools that ship with SXL Studio

Four companion products: a local bridge for IDE ↔ Figma automation, a CLI that compiles design tokens into production code, a VS Code extension for token intelligence, and a Storybook addon that surfaces Figma design context for every story. Install from npm or the Marketplace—same quality bar as the plugin, built for daily workflows.

Remote & MCP

Bridge

@sxl-studio/bridge

Runs on your machine and keeps one TCP port for the Figma plugin WebSocket, MCP (Cursor and other clients), and a small HTTP API—so Remote Connect and automation share the same session.
Every command still executes inside the SXL Studio plugin whitelist: Bridge only forwards payloads; nothing runs on your file without the plugin.
Use it when you want agents or scripts to export variables, drive compositions, hit plugin Git flows, or call the extended canvas toolkit while you work in Figma Desktop or Dev Mode.
Default port is 37830 (override with BRIDGE_PORT). Start Bridge before enabling Remote Connect or pointing MCP at http://127.0.0.1:37830/mcp.

CLI

npm install -g @sxl-studio/bridge

One-off: npx @sxl-studio/bridge Get copies this line; browsers cannot open your IDE terminal automatically.

CLI

Token Transformer

@sxl-studio/token-transformer

Batch-transforms DTCG-style token JSON into CSS custom properties, SwiftUI, Kotlin Compose, and Vue 3 SFCs—including paths that start from composition JSON when you wire design systems to code.
Made for repos that already use the plugin’s token files: point the CLI at your folders, tune `sxl-transform.config.json`, and regenerate platform output in CI or locally without opening Figma.
Resolves aliases, dimensions, colors, and composite types so generated files stay consistent with what designers tokenized—fewer handoffs and fewer “wrong constant” bugs in apps.
Ships as `sxl-transform` after install; use `npx @sxl-studio/token-transformer -- --help` when you don’t want a global toolchain.

CLI

npm install -g @sxl-studio/token-transformer

Run: sxl-transform --help Get copies this line; browsers cannot open your IDE terminal automatically.

Storybook

Storybook Addon

@sxl-studio/storybook-addon

Adds an SXL Studio panel to Storybook that renders Figma Design Embed, component info, property contract, token status, and readiness badges—right next to every story.
Reads the diff-code-connect registry file generated by the plugin's Code Connect feature, so designers and developers share a single source of truth with zero manual copy-paste.
Works with Storybook v8, v9, and v10. Match stories to Figma components by display name or node ID, or pass parameters directly for quick prototypes.
Install from npm and register in .storybook/main.ts—one line in your addons array is all it takes.

CLI

npm i -D @sxl-studio/storybook-addon

Then add to .storybook/main.ts addons array Get copies this line; browsers cannot open your IDE terminal automatically.

Editor

SXL Resolver

VS Code extension

Brings token intelligence into VS Code: hover `{token.path}` in JSON or CSS var() to see resolved values, previews, and inheritance chains—ideal next to the same files the plugin and Transformer use.
Speeds up refactors and reviews when tokens alias deeply or mix typography, shadows, and color modifiers; the extension is tuned for large token sets (thousands of paths).
Jumps from a hover link straight to the defining line in your workspace so you spend less time searching and more time shipping.
Install from the Visual Studio Marketplace; it complements the Figma plugin rather than replacing it.

Install in VS Code

Open in Cursor Marketplace in browser ↗

If the IDE link does nothing, install from the Marketplace in your browser or search “SXL Resolver” in the Extensions panel.

Figma plugin: Figma Community · Documentation