Generate a Figma component library from a coded design system

Christine Vallaure, a designer who does not write production code, reversed the usual Figma-to-code route: her design system lives in a React repo with Storybook, and the Figma library is generated from it. She connects Claude Code (through the Claude desktop app) to a copy of the repo and to an empty Figma file using the Figma Console MCP by Southleft, which can read and write variables. First she asks it to mirror the JSON tokens as Figma variable collections with the same names, aliases, scopes and light and dark modes, and to turn typography into text styles. Then it builds two test components, Button and Alert, and only after she has checked them by hand does she run the whole library. Each step must also write GAPS.md, a list of everything Figma could not express or the agent was unsure of. Later runs use a skill she wrote that also screenshots each component against its Storybook story. She also had Claude export a JSON list of what is in the Figma library, which a plain script compares with Storybook's component manifest as a parity check.

She says the components came out with the same names, properties and spelling as the code, with descriptions and Storybook links carried across, which she could not have done by hand. The gaps file proved more useful than she expected, catching unitless line heights, behaviour-only states and layout rules with no Figma equivalent. Building the full library costs time and tokens, but only once. The parity check covers structure only, not visuals, and she still starts it by hand. On an existing library, the same setup puts a report and a clean reference component next to an out-of-date one.

Her repo is a clean sample system she built herself. She warns that real codebases produce a generated mess, so go one component at a time. Work on a copy, never a live library. Deleted variants lose their keys and break instances, so rename and repair instead. Storybook must be version 10 or newer, with the component manifest turned on, for the agent to read the component list.