Native Figma agent to generate Storybook directly from components
Hi Figma team,
Our team uses Storybook to implement and document our components and pages in code. Doing this manually takes developers a lot of time: they have to rebuild every Component and Variant in code and write a story for each State.
So we built our own agent that converts our Figma designs into Storybook. The results were great: it dramatically sped up our workflow, and the generated code ended up much closer to the original design.
To give you a real picture, here’s what we built in our project in just one week:
- UI Kit: 27 component sets, 2,288 variants, 4 Sidebar components and 1 Chart instance
- Icons: 1,254 icon sets with 7,520 style variants, plus 259 flags and 3 standalone assets
- Style guide: 89 color styles and 42 typography styles
- Design variables: 157 across Primitives (16), Tokens (34), Colors (89) and Typography (18)
For a senior developer, implementing all of this manually would have taken around 2–3 months.
That experience gave me this idea: it would be amazing if an agent like this lived inside Figma itself, built officially by the Figma team, so every team could benefit from it instead of building their own tools.
The agent could:
- Turn each Component into a coded component, and each Variant/State into a story
- Map Figma Variables to design tokens in code
- Map component properties to Storybook controls (args)
- Update the related stories when a Component changes in Figma
Why it matters:
- We’ve seen firsthand how much time this saves: weeks instead of months
- The code stays much closer to the original design
- Figma becomes the single source of truth for the design system, from design all the way to documented code
Since Figma already has Dev Mode and Code Connect, this feels like a natural next step.
Happy to share more about our experience if it’s helpful.
Thanks,
Mohammad Ramezanzadeh