SXL Studio

Utilities

Tools that ship with SXL Studio

Five companion products: Token Transformer, Export Icons, Storybook Connect, IDE Resolver, and Bridge. Install from npm or the Marketplace and keep design-system operations consistent across Figma, code, and daily frontend workflows.

CLI

Token Transformer

@sxl-studio/token-transformer
  • Batch-transforms DTCG-style token JSON into CSS, SCSS, SwiftUI, UIKit, Kotlin Compose, and Android XML resources with deterministic output contracts.
  • YAML-first config with `extends`, collection/mode selectors, root+mode layering, smart incremental rebuilds, and force rebuild mode for release pipelines.
  • Supports strict diagnostics and modular overrides: customize a single token type formatter for one platform, or replace a whole platform emitter through output hooks.
  • 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.

CLI

Export Icons

@sxl-studio/export-icons
  • Exports icon assets from Figma `COMPONENT` and `COMPONENT_SET` nodes with incremental sync (`new/updated/deleted/renamed`) so repositories stay clean between releases.
  • Supports `svg`, `png`, `jpg`, `webp`, `gif`, and `pdf` outputs, plus multi-config and multi-target runs for design systems that publish to several platforms.
  • Can generate icon fonts (`woff2/woff/ttf/svg/eot`) and iOS `Assets.xcassets` symbol sets from the same source definitions.
  • Works with both direct Figma REST mode and Bridge/MCP mode when you need local automation flows.

CLI

npm i -D @sxl-studio/export-icons

Run: npx @sxl-studio/export-icons init --wizard Get copies this line; browsers cannot open your IDE terminal automatically.

Storybook

Storybook Connect

@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

IDE 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 CursorMarketplace in browser ↗

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

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.

Figma plugin: Figma Community · Documentation