Autor: Jakub Karlec
Discussion: Join the conversation on LinkedIn

I built a two-way design system sync between Figma and code. And you don't even have to touch Figma or code to make changes on both sides. You operate this through Claude Code.

Product teams spend a lot of effort keeping parity between the design system in Figma and in code. I believe that the biggest opportunity for AI is to eliminate the need to do things twice.

So I built a middleware layer on top of Figma MCP Console (by TJ Pitre) that keeps both worlds in sync. It's a proof of concept, but it works pretty good.

The stack I used:

• Shadcn/ui library (code + Figma UI kit)

• Next.js + TypeScript + Tailwind

• Storybook to test and review changes to components

• Figma MCP Console to read & write from Figma

• GitHub

• Vercel

• Claude Code to integrate everything

The key component is a design-map.json file where we map design tokens to code (replaces and improves Figma's Code Connect that's available only on enterprise plans).

Check out the demo video.

🛠️ Technical Stack & Resources

• Tool: Figma MCP Console by TJ Pitre - The server that allows Claude to read and write Figma data.

• Library: Shadcn/ui - The component library used for both code and the Figma UI kit.

• Framework: Claude Code - The agentic tool used to integrate and automate the entire sync process.