All skills
  • Claude Code skill
  • Design systems
  • Open source

figma-storybook-sync

One design system across tokens, Figma, code and Storybook, kept in sync without Code Connect.

A button renamed in code and forgotten in Figma is how a design system quietly falls apart. The skill sets up the link once, then catches every mismatch before it reaches a release.

Year
2026
Needs
Claude Code, Figma MCP, Python 3
Scripts
Python, standard library
License
MIT
View on GitHub (opens in a new tab)
Install
git clone https://github.com/VladPolyakov-art/figma-storybook-sync ~/.claude/skills/figma-storybook-sync
tokens.jsonW3C design tokens
Tokencolor.gray.900
FigmaVariables and components
Tokencolor/gray/900
ComponentButton · Variant=Primary
CodeCSS variables, React
Token--color-gray-900
ComponentButton.tsx · variant="primary"
Storybookwith a Design tab
ComponentComponents/Button
Drift checkLocally through Figma MCP, in CI through the Figma REST API
One name per thing, so the skill matches them without a lookup table.

How it works

  • Code is the source of truthtokens.json and the components in the repo. Figma is a synced copy, and a designer’s edit there counts as a proposal.
  • Same names everywhereNo mapping table to maintain: the Variable, the CSS variable, the component and the story share one name.
  • Links both waysA Design tab with the Figma node in Storybook, the code path and Storybook link on the component in Figma.
  • Drift checkLocally through Figma MCP for tokens and components, in CI through the Figma REST API for components.
  • No Code Connect neededWorks on the Figma Professional plan. Code Connect is optional, for Organization and Enterprise.
  • Secrets stay yoursYou set the Figma and Chromatic tokens yourself. The skill never asks for them or writes them to files.

What the agent does

Six steps. The first two only read and ask, so nothing breaks before you agree.

  1. 01ReconnaissanceRead only: stack, Storybook, tokens, CI, the Figma file and plan.
  2. 02Plan and a yesNothing changes in the project or in Figma until you confirm the plan.
  3. 03TokensImport from Figma if needed, build the CSS variables, write the Variables to Figma.
  4. 04ComponentsOne at a time in Figma, bound to Variables and checked against a screenshot.
  5. 05CI and ChromaticGitHub Actions builds tokens and Storybook, checks drift, publishes to Chromatic.
  6. 06MaintenanceCode changed, Figma follows. Figma changed, the drift check decides what moves.