What is the sb-figma skill?
The sb-figma skill bridges Figma and Storybook in both directions through the native Figma MCP. An AI coding agent maps Figma variables to code tokens with drift reports, delivers approved components with story authoring, and builds Code Connect mappings for Figma Dev Mode.
sb-figma is a skill in the storybook-workbench bundle. It bridges Figma and Storybook in both directions through the native Figma MCP, moving an approved Figma design into production Storybook and pushing the code's tokens back to Figma.
Undecided designs go to sb-explore instead. The requests it answers include syncing Figma tokens, mapping Figma variables to a design system, checking design and code token parity, and delivering an approved Figma component into Storybook.
The three jobs it runs
- Job 1 maps foundation tokens for color, spacing and type from Figma variables, with design and code parity and drift per mode.
- Job 2 delivers an approved Figma component in three steps: extract, build and embed, authoring stories with the sb-stories rules.
- Job 3 builds Code Connect mappings from components, stories, token parity and usage so Figma Dev Mode shows the real code.
How it keeps its work repeatable
Every Figma MCP call is persisted to a store under .storybook/figma/ before it is used. Downstream steps read the store instead of calling the MCP again. Re-capturing a node overwrites it, so a git diff shows what moved in Figma.
Who the sb-figma skill is for
Best for
- Teams with a Storybook on React and Vite whose Figma design is already approved.
- Design system owners who want Figma variables compared against the code's token CSS in every mode.
- Teams on an Organization or Enterprise Figma plan who want Code Connect mappings shown in Dev Mode.
Not for
- Reading your selected layer through a companion Figma plugin and returning React, Tailwind or styled-components code, which the Sunnyside Figma MCP server covers.
- Reading a Figma file or a live website into a compact design graph, which the Plumb MCP server covers.
- Briefing an AI coding agent on Figma auto-layout, variants, type scales and detached instances, which the figma-expert skill covers.
How to install sb-figma Skill: Figma Tokens and Components Into Storybook
npx skills add strongeron/storybook-workbench -s sb-figmaCheck the requirements
The skill needs bash, python3 and Node.js for its scripts, plus the Figma MCP server. The remote server at mcp.figma.com is preferred over the desktop server.
Install the skill
Run the command above to install only sb-figma. Re-run it later to update the skill in place, then restart your agent session so it registers the update.
Give the agent the inputs
It needs your Figma file URL, a node URL for component jobs, and the path to your token CSS, for example
src/styles/**/*.css.Run tokens first
Start with Job 1 so components built in Job 2 consume real, parity-checked tokens, then run Job 2 or Job 3.
Check that it loaded
Run node scripts/workbench-settings.mjs gaps from the skill. It lists the open gaps from earlier runs, which the skill shows you before starting new work.
Key features
- Token parity in every modeA read script collects every local collection and every mode, such as Light and Dark, with aliases resolved. Parity then compares the Figma default mode with the code's default theme and a Figma Dark mode with the dark theme.
- Drift reportingDrift is reported where a Figma value differs from the code value, per mode. Color uses an OKLCH to hex tolerance, while spacing and type are compared exactly.
- Reads the structured MCP toolsThe skill pulls variables with get_variable_defs, components and styles with get_design_context and structure with get_metadata, and treats get_screenshot as visual reference only.
- Component deliveryA Figma component is extracted, built from approved tokens and primitives, authored as a story and validated in light, dark and mobile against the captured screenshot.
- Reuse before buildingComponents mapped through Code Connect come back as the real import and are used. Otherwise it searches for an existing component covering the same concept and extends it.
- Figma InventoryEach delivery is recorded so the stories a feature created stay together under a Figma Inventory root, with one export per feature.
- Code Connect payloadsA build script produces the exact send_code_connect_mappings input, plus context for review and a reverse parity list of components with no Figma node or no source.
- Opt-in writes with a dry runCode tokens can be written to Figma variables for Light and Dark. A dry run comes first, the write reuses same-named variables and overwrites values, and it deletes nothing.
- Gaps and project rulesCollisions, weak matches and unmapped names are recorded as gaps. You fix them with project rules in
.storybook/workbench.json, which skill updates never overwrite.
Frequently asked questions
What does the sb-figma skill do?
It is the Figma and Storybook bridge in the storybook-workbench bundle. It maps Figma variables to code tokens with drift reports, delivers approved Figma components into production Storybook and builds Code Connect mappings, working through the native Figma MCP in both directions.
How do I install sb-figma?
Run npx skills add strongeron/storybook-workbench -s sb-figma to install only this skill, then restart your agent session so it registers. Re-running the same command updates it in place. The scripts need bash, python3 and Node.js, and the Figma MCP server must be available.
Does it work on a design that is still being decided?
No. sb-figma is for approved designs only. If the design is undecided or you are trying options, the skill stops and routes to sb-explore, a Lab sandbox that iterates against a Figma node. A Lab experiment is graduated later with sb-ship once the design is approved.
What Figma plan and seat does it need?
Reading tokens works with a seat that has edit access to the file, or any seat through the get_variable_defs fallback. Delivering a component works on any seat. Code Connect needs an Organization or Enterprise plan, and writing to an existing file needs a Full seat.
How does it read Figma variables?
Preferred, it runs a read-only script through use_figma that collects every collection and every mode with aliases resolved. When you lack edit access it falls back to get_variable_defs, which returns only the variables one node uses, in one mode, so dark is not compared.
What happens when it hits a mapping problem?
The scripts record gaps such as collisions, weak matches, unmapped names, unsupported values and unmapped variant values in .storybook/figma/gaps.json. You fix a gap with a project rule in .storybook/workbench.json, and a gap a later run no longer finds is marked resolved.
Will it change my Figma file?
Only when you ask. Writing to Figma is opt-in and off by default, and the skill confirms before each write. Pushing tokens runs a dry run first, shows you what it would create and update, then writes. It reuses same-named variables and deletes nothing.