From Figma designs to pixel-perfect components using Figma MCP & Claude Code 🧙🪄

Figma is one of the best tools to emerge in the last decade or so. Regardless of the organisation's size, everyone uses Figma for everything, from landing pages to dashboards. And if you have been one of those poor souls tasked to make designs into pixel-perfect app components, I understand you. Been there, done that.

The good news is that with all these fancy technologies, LLMs, CLI agents, and MCPs, things are going to make this a whole lot easier.

Yes, I have been using Claude Code a lot lately; it's the best thing that has happened to humanity after Messi's FIFA 22 campaign (Don't get mad, please) and tying MCP servers with it can do wonders.

In this blog post, I will share how you can configure the Figma MCP with Claude Code to build pixel-perfect front-end components.

What is Covered?

Configuring Composio Figma MCP (This is the best Figma MCP server, BTW!). Try it to believe.

Integrate the Figma MCP server with Claude Code to build frontend components. (You can use it with Cursor and Gemini CLI as well, but I like Claude Code more)

Set up Figma MCP server and Claude Code

💁 We'll use Composio to add the Figma MCP server support to our Claude Code.

You don't need to create an account; head over to mcp.composio.dev and, under the Figma integration, generate the command.

The command should look something like this:

npx @composio/mcp@latest setup "<https://mcp.composio.dev/partner/composio/figma/mcp?customerId=><customer_id>" "figma-605dcr-13" --client claude 

💡NOTE: You can pretty much use the same command to set up for Cursor as well. The only difference is to change the --client to use cursor and that's it. You can then simply go ahead and start cloning any design.
Upon running this command, you should see something like this:

As you can see, by default, it saves to the ~/.config/Claude/claude_desktop_config.json.
However, I prefer not to save it globally. So, in the project where you plan to run Claude Code, make sure you copy that file to a local .mcp.json file.

This helps separate MCP servers per project, which is very helpful when adding multiple ones in the future for other projects.

Run the following command to copy the file to the current directory:

cp ~/.config/Claude/claude_desktop_config.json .mcp.json 

By doing just that, you're almost done with the complete setup.

Run Claude in the project where you've just copied the .mcp.json file, and you should see something like this:

Hit yes, and inside Claude Code, run /mcpYou should see the recent MCP server status as connected, and you can view a list of all the tools as well.

Now, that's all the setup you need to do on the Claude side. There's one small step left, and as you can guess, that's to authenticate with Composio.

Currently, we've only added the server but have not yet authenticated Composio to connect to our Figma account. So, inside Claude Code, ask it to initiate a connection to the Figma MCP server, and it should give you a URL.

Head over to that URL, and you should be authenticated like so:

And just like that, you're done! You can now clone any Figma design, no matter how complex it is!

Demo

💁 In this demo, I'll clone a sample CRM Dashboard design from Figma.

All you need is the link to the Figma file. Just chat with Claude Code, then sit back and relax. Your clone will be ready in seconds.

Prompt: I need you to clone the dashboard from this Figma design: . Use HTML, CSS, and JS. Make sure you clone the exact design. Don't show your creativity, make it exact.

Here's the Figma template:

Here's what it generated:

As you can see, it's almost an exact copy of the original design. You could ask it to build with Tailwind and any JS frameworks like Next.js, but for simplicity, I asked it to use plain HTML, CSS, and JS, and it did a pretty good job.

Here’s the video demo:

You can find the entire code it generated here: Code for the Figma Dashboard.

Conclusion

It's remarkable how quickly things are evolving with MCPs, coding agents, and LLMs. However, there are also emerging challenges, particularly in terms of security, availability, and reliability. Trusting random server providers without a proper safety net can be fatal. It's kinda what Composio stands for. Check out the trust page for more.

Additionally, if you ever build on top of us, please tag us on Twitter and LinkedIn for free credits.