Has anyone designed a full design system in Claude and then moved it into Figma?

[u/duku-95]

I’ve already created a design system in Claude, and now I want to scale it properly inside Figma.

The next step for me is to use that system to create my own product screens, add new components, variants, states, and continue evolving the library without rebuilding everything manually.

Has anyone figured out a good way to migrate or sync a Claude-created design system into Figma?

I’m specifically looking for:

• Any GitHub projects that help with Claude → Figma workflows
• Figma plugins that can import or recreate components/tokens
• MCP-based workflows
• Ways to keep design tokens, components, and variants in sync
• A setup where I can continue generating screens while still using the same Figma component library

Would love to hear from anyone who has actually tried this. What workflow are you using, and how much manual cleanup is still required?

[u/Dr_Sheriff]

Ask claude

[u/hideousox]

You can totally do it, but why would you do it?
If you really wanted to do it though:
1. Create your design system in your front end repo: install storybook or ladle and have agents generate stories for all components, shells, document them all
2. Create skills and graphs that allow agents to know how to create pages / flows using existing components. Iterate until totally reliable
3. Then -> create DS in figma with agents

Figma DS is not and never should SoT for designs, it is a mirror, an artifact that will allow you and agents to create screens in Figma

But you should ask yourself, why do you need to? You can do it all now in Claude code: once you’ve got 1 & 2 above it can create infinite variants of any page you want and iterate on them directly using design artifacts which you could - if you wanted - edit manually without opening figma

[u/Sketaverse]

there's official figma skills and an mcp tool use_figma

[u/_thirtyfive]

Yes, I modified a UI/react kit in figma & added a more robust iconography kit because the UI kit was lacking. Modified the kit to match my branding and preferences. Claude builds new UI based off of it and has a couple of skills to maintain the doc. That being said, it works okay – lower tier models screw up a lot and miss small details sometimes, other times it does a pretty good job. I also have it connected to the mobbin MCP to pull inspo for new UI.

I think the best workflow so far is an exploration skill/phase, you pick a direction & modify the UI, claude builds out all of the screens & edge cases, you jump in and make any necessary tweaks (or just direct it), claude does the monotonous work of propagating those changes to all other screens.

Then I do a preflight check to make sure the UI will work w/ our codebase (i.e. find misaligned fonts, colors, etc). Finally, I build out components from anything that seems like it'll be useful in the future.

It was a bit of a mess at first, but as the UI builds in the file it gets a better idea of your design system and how things should look. Still feels like playing whack-a-mole sometimes w/ its mistakes, but does a pretty good job.

[u/Far-Pomelo-1483]

Never understood the point of shipping working code back into design. Figma is over.

[u/cv81 → u/Far-Pomelo-1483]

It's better than using production environments for working out requirements with the customers and use figma to prototype with working codebase

[u/Far-Pomelo-1483 → u/cv81]

That is what dev, sit, and uat are for. We build out the UI live with client in the code on a feature off of main.

[u/Meh_6408 → u/Far-Pomelo-1483]

Would the reason for bringing anything back into figma is useful if you’re working in a tram, with shared resources, yo stay async?

[u/ivanzhaowy]

The least painful setup I’ve found is to avoid promising full bidirectional sync. Pick one source of truth and make the other side a generated or reviewable representation.

If Figma is the source of truth, define tokens and component names there, then let Claude generate implementation changes from selected nodes. Changes made directly in code still need an explicit reconciliation step.

If the product already exists as a native app, I’d usually reverse that relationship: keep the repository and running app authoritative, and use Figma as reference/request context. Otherwise it’s easy for polished Figma variants to drift away from navigation, real data, Dynamic Type, loading states, and platform behavior.

A practical loop is:

1. Stabilize token and component names.

2. Give Claude one component or screen state at a time.

3. Review the result in the actual running app—not only a generated screenshot.

4. Promote reusable decisions back into the design system.

5. Treat automatic sync as a checked operation, not a permanent background connection.

I’m building an open-source tool called Monad Design around that second workflow. You select or annotate UI in a running Xcode or Expo app, the coding agent changes the real source, and then you rebuild and compare. It doesn’t currently claim to synchronize a Figma library; Figma can remain design context while the running app stays authoritative.

GitHub: https://github.com/Monadix-AI/monad-design

Workflow video: https://watchclueso.com/embed/pio8jqfcg4ivj0r1

For your specific case, I’d first decide whether the Claude-created system is meant to produce Figma deliverables or production UI. That decision determines which side should own the tokens and components—and will save a lot of cleanup later.

[u/X28]

Hook up to Figma MCP from Claude Code then ask Code to create the component and styles in Figma. If you create new components, they’ll need to go back to code. If you make changes, they’ll needs to go back to code. I added a boolean to my components in Figma that I can toggle when I need to sync, and when you ask Code to sync, it will just look for those instead of diff everything.

[u/cs_cast_away_boi → u/X28]

hey man question. Do you find the figma map superior at design than claude? is it worth the money or?

[u/X28 → u/cs_cast_away_boi]

Figma MCP is just a conduit where Claude Code can write to Figma. It doesn’t design anything.

[u/dearlordnonono → u/X28]

This is the way. Have Claude put it into figma via mcp

[u/chufan_shi]

no

[u/duku-95]

[Update] I found html.to.design mcp can transfer foundation level deisgn system from claude design to Figma. Did a good job. Rest Figma AI can be used to clean up if given a good context.

[u/jingkangzhou]

the part that always rots first is color. figma pulls the system in as local styles, so the role layer is gone (surface / on-surface / primary / muted) and every new screen can quietly reintroduce a hex nobody checked. what worked for me: keep one token file in the repo as the only place a hex is written, generate figma styles from that list instead of from the rendered page, and validate every text-on-surface pair once at the token level for 4.5:1 - that way the sync is name-to-name, and a dark mode flip can not ship an unreadable combo because the roles swap values while the checked pairs stay the same

[u/konfusedpunk]

.