Figma’s remote MCP server allows you to connect directly to an MCP server hosted by Figma. Then, you can use the context of your Figma design files to improve your workflows in your favorite AI development tools and build faster.
In this lesson, we’ll walk you through how to set up the remote Figma MCP server in these development tools. Then, we’ll show you how to use the Figma MCP server to pass context from your Figma Design files. Let’s get started!
Set up the Figma MCP server
Setting up the Figma MCP server requires you to configure your preferred development tools.
We’ll walk through the configurations to set up different development tools including Claude Code, Codex, Cursor, VS Code, and Gemini CLI in this lesson.
For a complete list of supported clients, check out our Guide to the Figma MCP server article to learn more.
Feel free to jump ahead to whichever tool you plan to use. And remember to install VS Code, Cursor, or Codex on your computer if you choose to use them as your development tool. For Claude code, we’ll setup the Figma MCP server using the terminal, but be sure to run npm install to install Claude code on your computer beforehand.
Claude Code
Note: Make sure to install Claude code in your terminal before the setup. Install Claude Code →
For setup steps, see Claude Code and Figma: Set up the MCP server.
Codex
Note: Make sure to install Codex on your computer before the setup. Download Codex →
For setup steps, see Codex and Figma: Set up the MCP server.
Cursor
Note: Make sure to install Cursor on your computer before the setup. Download Cursor →
For setup steps, see Cursor and Figma: Set up the MCP server.
Gemini CLI
Note: Make sure to install Gemini CLI on your computer before the setup. Install Gemini CLI →
For setup steps, see Gemini CLI and Figma: Set up the MCP server.
VS Code
Note: Make sure you have VS Code installed on your computer, and enabled GitHub co-pilot in order to set up the Figma MCP server. Download VS Code →
For setup steps, see VS Code and Figma: Set up the MCP server.
Using the Figma MCP server
To start using the Figma MCP server, you need:
- A full or dev seat (other seats may have usage limits with the MCP server)
- A Figma Design, Figma Make, or FigJam file
- Edit or view only permissions to that file. If someone else owns the file your team wants to use, just ask them to share it with you first.
The remote Figma MCP server is link-based. This means that you need to provide the context of the link or selection that you want the MCP server to use, by copying from a file, and pasting it into your tool of choice.
To get the link to an object, select a layer or frame in any of your Figma Design files:
- Right click on a layer.
- Choose copy link to selection. You can also copy the URL to that layer from your browser’s address bar. This will include the node ID for the object in your file.
- Then, paste the URL into your development tool to scope your prompt to that node.
You can also use the entire file URL if you have nothing selected on the canvas, and copy the URL from the address bar. Doing this allows you to extract context from the entire Design file If you’re using the MCP server with Figma Make, you will likely want to pass the entire file URL using this method.
Wrap up
Now that you’ve got the remote Figma MCP set up in your code editor, you’re ready to start building and coding with extra context and information straight from your Figma Design files.
Trying to set up the Figma MCP server on other code editors? Check out our developer docs to learn more.
Figma’s MCP servers work best with Code Connect to keep your codebase consistent with your design system. Check out our Code Connect documentation to learn more.