Remote server

danger

The Figma MCP Server is currently in open beta.

Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the beta period. Usage guidelines and rate limits will be announced when our MCP server is generally available.

Note: The remote server is being rolled out gradually. If you see 0 tools in your MCP client, it means your access hasn’t been enabled yet. We expect all users to have access by September 26.

Who can use this feature

Available on a Dev or Full seat on the Professional, Organization, or Enterprise plans

You must use a code editor or application that supports MCP Servers (i.e. VS Code, Cursor, Claude Code)

The MCP Server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.

MCP Servers are part of a standardized interface for AI agents to interact with data sources using the Model Context Protocol.

Figma's remote MCP server makes it possible to connect directly to your Figma files without needing to install Figma's desktop app. With just a valid Figma link, you can bring design context into your workflow wherever you're working.

With the server enabled, you can:

• Generate code from selected frames: Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.
• Extract design context: Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.
• Retrieve Make resources: Gather code resources from Make files and provide them to the LLM as context. This can help as you move from prototype to production application.
• Keep your design system components consistent with Code Connect: Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

To use this server, you'll need to sign in through Figma's OAuth authentication flow and have either a Dev or Full seat on a Pro, Organization, or Enterprise plan. Once set up, the remote server gives you a seamless way to access Figma data and integrate it with your tools.

Enabling the remote MCP server

VS Code

1. Open the .mcp.json file and paste this into it

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

2. Click on Start (above the MCP server name)
3. Allow Access
4. Start prompting!

Cursor

1. Go to Cursor settings > Tools & Integrations
2. Click "Add custom MCP"
3. Paste this in your mcp.json

{
  "mcpServers": {
    "figmaRemoteMcp": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

4. Click "Connect"
5. Click "Open"
6. Allow access
7. Start prompting!

Claude Code

1. Run the claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp command in your terminal to add the Figma MCP to Claude Code
2. Type /mcp in Claude to manage your MCP Servers
3. Enter to login & Allow Access
4. Back in Claude code, you should see: Authentication successful. Connected to figma-remote-mcp
5. Confirm your MCP Server is connected using /mcp command in Claude Code
6. Start prompting!

Using the MCP server

The MCP server introduces a set of tools that help LLMs translate designs in Figma. Once connected, you can prompt your MCP client to access a specific design node.

The remote server is link-based. To use it:

1. Copy the link to a frame or layer in Figma
2. Prompt your client to help you implement the design at the selected URL

note

Note: Your client won't be able to navigate to the selected URL, but it will extract the node-id that is required for the MCP server to identify which object to return information about.

Improving the MCP server output

For the best output, we recommend setting up rules to guide the agent. To get you started, we have some helpful example rules.