Note: Figma provides the local desktop version of the Figma MCP server for some specific organization and enterprise use cases, but we strongly recommend using the remote version of the Figma MCP server. The remote version of the server provides the broadest set of features.
Figma's MCP server brings context from your Figma files and your design into your favorite agentic development tools—like VS Code, Claude Code, and Cursor—to keep your code aligned to your design specifications.
In this lesson, we’ll walk you through the steps to set up the Figma desktop MCP server.
In order to use the Figma desktop MCP server, you’ll need the Figma Desktop app. So go ahead and download the desktop app if you haven’t already. And if you already have it, make sure you’re on the latest version.
Now let’s learn how to set up the desktop MCP server!
Setup the desktop MCP server
To get started setting up the desktop MCP server, follow these steps in Figma:
- Install and open the Figma desktop app.
- Open a Figma Design file.
- With nothing selected on canvas, click the toggle switch in the toolbar to switch to Dev Mode.
- Then, click to enable the MCP server in the right sidebar.
- Figma will display a confirmation message at the bottom of the screen letting you know the server is enabled and running, and you’ll see a button to copy the address for the server.
- Click copy URL, and keep it handy for your configuration in the next step.
Now, let's walk through how to add the Figma MCP server to a few development tools including Cursor, VS Code, and Claude Code. Be sure to install the tools on your computer before the setup. Feel free to jump ahead to whichever tool you plan to use.
Cursor
Before you set up the desktop Figma MCP server, download Cursor →
For setup steps, see Cursor and Figma: Set up the MCP server.
VS code
Before you set up the desktop Figma MCP server, download VS Code →
For setup steps, see VS Code and Figma: Set up the MCP server.
Claude Code
Before you set up the desktop Figma MCP server, download Claude Code →
For setup steps, see Claude Code and Figma: Set up the MCP server.
Using the desktop MCP server
Now that you’ve got the desktop MCP server set up, here are a few tips on how it works.
The MCP server is selection based. This means that it can understand which layers you have selected inside of a Figma file.
Try selecting a layer in your design file from the desktop app, and enter a prompt to ask the tool to generate a react component based on the selection. The agentic development tool will read your selection in the Figma file and generate code based on the design.
If you’re just getting started and don’t have design files to use with the available tools, you can find example files on the Figma Community, or grab a copy of Figma’s official Simple Design System to try out more of the tools.
Wrap up
With the Figma desktop MCP server set up, you’re ready to bring the context of all of your designs right into your development tools.
Trying to set up the Figma MCP server for code editors not covered in this video? Check out the full catalog of supported clients here.
And did you know that Figma’s MCP servers work best with Code Connect? Code Connect bridges your codebase and Dev Mode and enables the display of actual design system component code in Figma. You’ll find plenty about Code Connect in Figma’s developer documentation.
Check your knowledge!