The official Figma MCP server WAS pretty underwhelming at best. It used to be one way only—you could only pull context about your design, but not manipulate it. They recently updated released an official way to push to Figma from Claude Code that might be enough for your everyday use case now. But if you still find it limiting, it’s actually pretty dang simple to give an LLM the ability to automate a LOT of the manual minutiae involved with maintaining systems in Figma. All of the clicking and dragging and renaming things. Things that are completely unrelated to the actual craft of design and just waste time.
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-friendUse 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.