A Better Figma MCP or How To Let Claude Design

The one where we give Claude access to the Figma API

The official Figma MCP server is pretty underwhelming at best. It is very intentionally one way only. You can pull context about your design, but you can’t manipulate the design itself.

That’s unfortunate because there’s still a LOT of manual minutiae involved with maintaining systems in Figma. Lots of clicking and dragging and renaming things. Things that are completely unrelated to the actual craft of design and just waste time. Things that can be completely automated.

It’s cool that Figma got ahead and were among the first to offer an MCP, but their MCP is so useless that it’s clear that it only exists as a means for Figma to control the narrative—after all, if you can use AI to generate designs, well you know what comes next.

A Better Way

Asking Claude to generate a complicated button component with multiple variants, states, and variables

It doesn’t have to be that way. It turns out that Figma exposes their entire plugin API right in the browser. Meaning, if you want to let Claude1 rip over your design, all you need to do is give it access to a browser. Once in a file, Claude can interact with the Figma plugin API itself by writing and executing code instead of manually clicking and dragging.

!!! SECURITY WARNING !!! Before you try this, it’s important to understand the risk. When you give your LLM access to a browser, it can do all sorts of things like delete your file or, if you’re not looking, go into your admin account and turn on some setting that sends you a bill for sending guest links or something. This is no worse than using the official Claude For Chrome plugin, but it’s important to read what it’s trying to do before approving any tool calls. And the cool thing is, if you don’t understand what it means, just keep asking it to explain.

Installation

For this to work, you only need a single MCP—a browser. There are a lot of options, I like the Chrome Devtools CDP. You can install it in Claude Code with:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Then all you need to do is prompt. Literally, just copy and paste this, login to Figma, navigate to your file, and ask Claude to do whatever. This really works best with Claude Code, but don’t be put off by the terribly-named, gatekept “Code” product name2. Claude Code can be used for so much more than just cranking out code.

PROMPT
## Instructions You'll be interacting with Figma via the web browser. First, you'll want to 1. Use the "navigate_page" tool to go to [Figma's website](https://www.figma.com/). Then, prompt the user to log in to their Figma account if they are not already logged in and open a specific design file. 2. Once the user has opened the design file, you can use the "evaluate_script" to confirm that you have access to the figma global object, which indicates that you are within the Figma environment. If you do not have access, inform the user that they need to open a Figma design file or see <troubleshooting> 3. After confirming access, execute the user's query using the "evaluate_script" tool to run JavaScript code that interacts with the Figma plugin API. You can perform tasks such as creating shapes, modifying properties, or extracting information from the design file. ## Rules of Engagement - Always explain in plain English what you are about to do. Assume that the user cannot read code. - Do not try to alternative solutions like using the REST API or manually interacting with the Figma UI <troubleshooting> If "figma is not defined", make sure that the user has appropriate permissions to edit the file and run plugins. If the user doesn't, suggest creating a new branch on the file. If the "figma" global is still not accessible, instruct the user to manually open any plugin and close it, then try again. There is a weird bug where the "figma" global is not available until a plugin has been opened at least once in the file. </troubleshooting> ## Additional Documentation The full reference to the Figma plugin API can be found here: [Figma Plugin API Documentation](https://developers.figma.com/docs/plugins/api/global-objects/).

That’s all you need. No third party plugins or websocket servers. Just have Claude open a browser and write code.

Plugin

To make it a little easier to install, I wrapped this (markdown file) in a claude code plugin:

/plugin marketplace add markacianfrani/claude-code-figma
/plugin install figma-friend

Use Cases

  • Creating and maintaining components
  • Auditing usage across multiple files
  • Triaging designs, random organization, and documentation
  • Comparing implementations against code
  • Literally whatever

This obviously doesn’t replace designers. And you can clearly see in my example where it got things wrong if you pay attention. It’s another tool in the toolbox that you can thoughtfully reach for. At least until Figma completely shuts this down.

Footnotes

  1. also works with any frontier model—codex, gemini, etc. ↩

  2. “unnecessarily aggressive, consider softening or removing”, nah I’m gonna keep that, but thank you AI. ↩