Connecting Figma, Fractal and Craft CMS with Claude Code

While watching the Winter Olympics on TV I set up a little project to try this out. I was curious if this was just another toy, or actually something useful for professional work. Going back and forth between Figma and code has been a real pain — until now?

To put this to the test I came up with the following idea in the first power break:

1. Use Claude Code to fetch a website.
2. When captured, push the designs into a Figma document (both desktop and mobile versions of each page).
3. Use Claude Code to analyze the Figma document and designs and create the different content blocks in Fractal with HTML, CSS, and JavaScript according to my specifications.
4. Install Craft CMS.
5. Let Claude Code implement the static blocks in Fractal into dynamic versions in Craft and add the necessary fields and settings.
6. Then have Claude Code create all the relevant pages and build the content with the created blocks.

For the test I used:

• Figma
• Fractal and Craft CMS (both running on DDEV)
• Claude Code

And the following three MCP servers:

• Chrome DevTools MCP
• Figma MCP
• Craft CMS MCP

I’m on the Claude Code Max plan running Opus 4.6 when writing this and the Figma document, consisting of about 20 page designs, took about two hours to fetch. The blocks and elements about another 45 minutes. And after getting the Craft MCP server to play nice the complete build took another hour or so.

The results are not perfect, but still fantastic. The build quality is absolutely good enough to get a lot of value out of letting the AI give you something to start with.

During the process I did have to go in and "project manage" Claude to do the right things, so it was not a case of just telling the agent to "build this site" right away. Reading the proposed plans, writing up and specifying the setup took another hour or two but, all-in-all, the process was way better than I had imagined.

To be fair, I had extensive instructions on how to build both the blocks and the elements in Fractal as well as thorough instructions on how I wanted the CSS to be written. This way I can guide the agent to write this the same way that I would have done it on my own - just way faster.

Since we’re not using React or Tailwind CSS at Republic, it was very important that the code generated from Figma was written according to our specs and not in the standard "Tailwind and React way" which AI seems to have been trained on for the most part.

I was also very clear about the fact that I wanted Claude Code to use the Craft MCP server for creating things instead of creating YAML files. The YAML files are the files representing the database schema in Craft but should be generated by the system, not by an error-prone LLM. Generating YAML files directly might be another way to go, but a single error in one of them makes the whole process choke, so I liked the approach where Craft generates those files after the MCP commands are being executed instead.

The best thing is that I had my colleague go into Figma, tweak the design there, and then tell Claude to update the current block in Fractal according to the new design in Figma. That worked like a charm and it was rather nice to see his actual design and the decisions he made show up in code without me having to implement it.

This is the first time we have an actual setup that lets us go back and forth between code and Figma, without major hassle. For a first try, I think this went really well.

Getting a lot of the grunt work done by AI frees up valuable time. This means that we can focus more time on the things we humans are best equipped to do: solving the clients’ problems and doing the creative work needed for a really good user experience. The fun and interesting things.

---