VS Code and Figma: Set up the MCP server – Figma Learn - Help Center

Before you start

Who can use this feature

Starter, Professional, Education, Organization, Government, and Enterprise plans

Requires VS Code with GitHub Copilot turned on

The Figma MCP server gives VS Code structured access to your Figma files. VS Code can read design context, such as components, variables, layout data, FigJam content, and Make resources. It can generate code from selected frames and use Code Connect to stay aligned with your real components. VS Code can also write to the canvas to create or update Figma content, and send live web interfaces to Figma as editable layers.

Jump to the setup instructions →

This article describes how to set up the Figma MCP server in VS Code. To learn more about the Figma MCP server and how to use it, see:

Figma offers two versions of the MCP server: remote and desktop. The remote server has the broadest set of features and is the best choice for most users. The desktop server is intended for specific organization and enterprise needs.

Set up the remote Figma MCP server (recommended)

The quickest way is to install the Figma MCP server in VS Code with one click, then follow the prompts to sign in. To set it up yourself instead:

Open the command palette:
- Mac: Cmd Shift P
- Windows: Ctrl Shift P
Search for and select one of these:
- MCP: Open User Configuration to use the Figma MCP server in all your projects
- MCP: Open Workspace Folder Configuration to use it only in your current workspace
If you don't have an mcp.json file yet, VS Code asks you to create one.

In the mcp.json file, paste this code:

{
  "inputs": [],
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

Save the file:
- Mac: Cmd S
- Windows: Ctrl S
Above the Figma server name in the file, click Start.
When prompted, click Allow access to let VS Code access your Figma account.

The Figma MCP server is now running in VS Code, and you're ready to start prompting. To see what you can do, check out Tools and example prompts.

Tip: For more reliable results, also install the Figma plugin for GitHub Copilot, which includes Figma's skills. Learn more about Figma skills for MCP.

Set up the desktop Figma MCP server

Note: We strongly recommend the remote server. The desktop server requires the Figma desktop app and a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan.

Instructions for the desktop Figma MCP server

Step 1: Enable the desktop server in Figma

Open the Figma desktop app and make sure it’s up to date.
Create or open a Figma Design file.
With nothing selected, switch to Dev Mode using the toggle in the toolbar, or press Shift D.
In the MCP server section of the right sidebar, click Enable desktop MCP server.

A confirmation message appears at the bottom of the screen when the server is running. The desktop server runs at http://127.0.0.1:3845/mcp.

Step 2: Add the desktop server to VS Code

Open the command palette and search for MCP: Add Server.
Select HTTP.
Paste the server URL http://127.0.0.1:3845/mcp, then press Enter.
When asked for a server ID, enter figma-desktop, then press Enter.
Choose where to save the server: for all your projects, or only for the current workspace.
Open the chat (Ctrl Cmd I on Mac, or Ctrl Alt I on Windows) and switch to Agent mode.
Type #get_design_context to check that the Figma MCP server tools are available. If no tools appear, restart the Figma desktop app and VS Code.

For more about MCP servers in VS Code, see VS Code's documentation.

Troubleshooting

If you have issues setting up or using the Figma MCP server, see the Figma MCP server FAQs.

What's next?

If you're coming from the Figma MCP collection, jump back into the previous article.

For more about using the Figma MCP server, see: