From Claude to Figma via MCP
If you’re using AI tools to help boost your design process, you may have heard of one of the most recent buzz terms: MCP… And what is MCP? It stands for Model Control Protocol and is an open protocol that standardizes how applications provide context to LLMs (Large Language Models). Think of MCP like a USB-C port for AI applications.
It’s also a really fast way to bring AI-generated designs into Figma. In this post, we’ll look at how to use the html.to.design MCP to let Claude create designs directly on your Figma canvas!
Claude to Figma quick guide
Here’s a snapshot of how to use html.to.design MCP with Claude:
- Set up the MCP for html.to.design
- Prompt Claude to create designs for you
- Your designs land in Figma 🪄
- Iterate and edit from Claude or in Figma!
Claude to Figma via MCP, step-by-step
1. Set up the MCP for html.to.design
To use html.to.design’s MCP requires a little set up beforehand. You’ll need the Claude desktop app and to follow these quick steps before getting started:
Once set up is complete and Claude is successfully connected to the html.to.design MCP, you should see html.to.design listed in the Claude app settings:
2. Prompt Claude to create designs for you
Once the MCP is up and running, you can start designing! Go to the Claude desktop app and enter your prompt for what you want to design. For example:
“Design a visual and abstract hero section for a webpage, with a section of frosted glass cards below and a testimonials section below that, all in an overall dark theme.”
3. Your designs land in Figma 🪄
Once your design is ready in Claude, simply prompt it to send these designs to Figma. You’ll then see the same designs automatically appear on your Figma canvas as editable layers - like magic!
4. Iterate and edit from Claude or in Figma!
Now that your AI-generated designs are in Figma, you can either edit manually in Figma or via prompts in Claude. Either way, the results will always be updated in Figma.
Why use an MCP to go from Claude to Figma?
⚙️ No export/import steps required
By using html.to.design’s MCP to bring your AI-generated designs into Figma, you have a direct connection between the two tools, foregoing any kind of export/import steps in the process. Anything generated in Claude, automatically shows up in Figma in front of your eyes.
↔️ Stay connected to your AI tool from Figma
If you need to make iterations to the design, you can use the MCP connection to your advantage. Simply prompt Claude to make the necessary changes and they will be instantly reflected in Figma!
⚡️ From concept to design - fast!
One of the biggest advantages of using AI tools in design is the ability to go from general ideas to working prototype in no time. A well-designed prompt can give you a decent result to start with, to then finish polishing these designs in Figma. Plus, html.to.design is the fastest MCP server for Figma there is!
Try out the html.to.design MCP!
If you’re looking for the quickest way to bring your AI-generated designs from Claude to Figma, the html.to.design MCP is the answer! After a few quick set-up steps, you’ll have a direct connection between Claude and Figma so AI can create designs directly on your canvas. No copy-paste. No code export. Give it a try!