Quickstart

Let your agent set it up

The fastest way to get started: copy this prompt into your coding agent. It walks through creating a Figma token and adding the server, and stops at the two steps you need to do yourself — signing in to Figma and copying the token.

Setup prompt

Set up the Framelink MCP for Figma server for me. Work through these steps in order and stop where I need to act.

1. Open https://www.figma.com in a browser. If Figma asks for credentials, stop and let me sign in myself. Do not type them for me.

2. From the file browser, click the account menu in the top left and choose "Settings". Open the Security tab and scroll to "Personal access tokens". Click "Generate new token".

3. Name the token "Framelink MCP" and set an expiration. Then tick exactly these scopes:
   current_user:read
   file_comments:read
   file_comments:write
   file_content:read
   file_metadata:read
   file_versions:read
   library_assets:read
   library_content:read
   team_library_content:read
   file_dev_resources:read
   file_dev_resources:write

4. Click "Generate token", then stop. Figma shows the token once and I'll copy it myself — don't read it out of the page. Tell me you're waiting, and I'll paste it back to you.

5. Once I give you the token, add the MCP server to whichever harness you are running in right now. Look up that harness's own MCP configuration format and file location rather than guessing; if you aren't sure which harness you're in, ask me. The server is:

     command: npx
     args:    -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

   Replace YOUR-KEY with the token I gave you.

   On Windows, npx is a batch file that most MCP clients can't launch directly. Use "cmd" as the command and put "/c", "npx" at the front of the args instead.

   Give the server the name Framelink_Figma_MCP. If a config file already has an entry for it, update that entry instead of adding a second one.

6. Reload your MCP servers (restart if that's what your harness needs) and confirm the Framelink tools are available. If they aren't, read the server's startup output and tell me what failed.

7. Tell me you're ready, and I'll send you a Figma link to build from.

Get a Figma access token

Open your Figma account settings

From the home page in Figma, click your profile icon in the top left corner, then choose Settings.

Generate a new token

In the settings dialog, switch to the Security tab, scroll down to Personal access tokens, and click Generate new token.

The Security tab of Figma settings, with the Generate new token link highlighted

Select the scopes the MCP needs

Give the token a name, set an expiration, then check every scope shown below before clicking Generate token. Figma tokens are scoped, and a token created with the defaults will not have what the MCP needs.

The Figma token scope picker with current_user:read, file_comments:read, file_comments:write, file_content:read, file_metadata:read, file_versions:read, library_assets:read, library_content:read, team_library_content:read, file_dev_resources:read, and file_dev_resources:write all checked

If you need more detailed instructions, you can find them in Figma’s documentation on access tokens.

Install in your editor or agent

The most common clients are below. For anything else, see other editors and agents.

Run this command in your terminal. See the Claude Code MCP docs for more info.

claude mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Go to Settings → Cursor Settings → MCP → Add new global MCP server.Or paste the following into your ~/.cursor/mcp.json file. You can also install in a specific project by creating .cursor/mcp.json in your project folder. See the Cursor MCP docs for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Add this to your Antigravity MCP config file. See the Antigravity MCP docs for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Add the following to your Codex configuration. See OpenAI Codex for more info.

[mcp_servers.Framelink_Figma_MCP]
command = "npx"
args = ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]

Add this to your OpenCode configuration file. See the OpenCode MCP docs for more info.

{
  "mcp": {
    "Framelink_Figma_MCP": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"],
      "enabled": true
    }
  }
}

Use the Add manually feature and fill in the JSON configuration. See the Trae docs for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Navigate to Kiro → MCP Servers.
Click the + Add button.
Paste the configuration:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"],
      "env": {},
      "disabled": false,
      "autoApprove": []
    }
  }
}

Click Save to apply.

See the Kiro MCP docs for more info.

Add this to your VS Code MCP config file. See the VS Code MCP docs for more info.

"mcp": {
  "servers": {
    "Framelink_Figma_MCP": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Run this command in your terminal, then /reload any open Pi session. Requires Pi 0.99 or later. See the Pi MCP docs for more info.

pi mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Other editors and agents

Amazon Q Developer CLI

Add this to your Amazon Q Developer CLI configuration file. See the Amazon Q Developer CLI docs for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Amp

Run this command in your terminal. See the Amp MCP docs for more info.

amp mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Augment Code

Press Cmd/Ctrl+Shift+P or go to the hamburger menu in the Augment panel.
Select Edit Settings.
Under Advanced, click Edit in settings.json.
Add the server configuration to the mcpServers array in the augment.advanced object:

"augment.advanced": {
  "mcpServers": [
    {
      "name": "Framelink_Figma_MCP",
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  ]
}

BoltAI

Open Settings, navigate to Plugins, and enter the following configuration. See BoltAI’s documentation for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Claude Desktop

Open Claude Desktop, go to Settings, then Developer, and edit your claude_desktop_config.json file. See the Claude Desktop MCP docs for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Cline

Open Cline in VS Code.
Click the hamburger menu icon to enter the MCP Servers section.
Choose the Installed tab.
Click Edit Configuration and add the following:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

See the Cline MCP docs for more info.

Copilot CLI

Open ~/.copilot/mcp-config.json and add the following configuration:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "type": "local",
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Copilot Coding Agent

Add the following configuration to Repository → Settings → Copilot → Coding agent → MCP configuration. See the GitHub Copilot coding agent docs for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Crush

Add this to your Crush configuration file. See the Crush MCP docs for more info.

{
  "$schema": "https://charm.land/crush.json",
  "mcp": {
    "Framelink_Figma_MCP": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Emdash

Emdash is an orchestration layer for running multiple coding agents in parallel. Emdash does not modify your agent’s config directly — you still need to configure your coding agent (Codex, Claude Code, Cursor, etc.) to connect to Framelink MCP for Figma using the instructions for that specific agent on this page.See the Emdash repository for more information.

Factory

Factory’s droid supports MCP servers through its CLI. See the Factory MCP docs for more info.

droid mcp add Framelink_Figma_MCP "npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio"

Gemini CLI

Open the Gemini CLI settings file at ~/.gemini/settings.json and add the following to the mcpServers object. See the Gemini CLI docs for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

JetBrains AI Assistant

In any JetBrains IDE, go to Settings → Tools → AI Assistant → Model Context Protocol (MCP).
Click + Add.
Click on Command in the top-left corner and select the As JSON option.
Add this configuration:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Click Apply to save changes.

See the JetBrains AI Assistant docs for more info.

Kilo Code

Create .kilocode/mcp.json in your project directory with the following configuration:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

You can also configure it via the Kilo Code UI under Settings → MCP Servers → Add Server.

LM Studio

Navigate to Program (right side) → Install → Edit mcp.json.
Paste the configuration:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Click Save.

See LM Studio MCP support for more info.

Perplexity Desktop

Navigate to Perplexity → Settings.
Select Connectors.
Click Add Connector.
Select Advanced.
Enter Server Name: Framelink_Figma_MCP
Paste the configuration:

{
  "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"],
  "command": "npx",
  "env": {}
}

Click Save.

See Perplexity’s MCP documentation for more info.

Qodo Gen

Open the Qodo Gen chat panel in VS Code or IntelliJ.
Click Connect more tools.
Click + Add new MCP.
Add the configuration:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

See the Qodo Gen docs for more info.

Qwen Code

You can use the CLI or add the config manually. See the Qwen Code MCP docs for more info.CLI

qwen mcp add Framelink_Figma_MCP npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Manual ConfigurationOpen ~/.qwen/settings.json (user scope) or .qwen/settings.json (project scope) and add:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Roo Code

Add this to your Roo Code MCP configuration file. See the Roo Code MCP docs for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Rovo Dev CLI

Edit your Rovo Dev CLI MCP config:

acli rovodev mcp

Then add the following:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Visual Studio 2022

Add this to your Visual Studio MCP configuration. See the Visual Studio MCP docs for more info.

{
  "mcp": {
    "servers": {
      "Framelink_Figma_MCP": {
        "type": "stdio",
        "command": "npx",
        "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
      }
    }
  }
}

Warp

Navigate to Settings → AI → Manage MCP servers.
Click the + Add button.
Paste the configuration:

{
  "Framelink_Figma_MCP": {
    "command": "npx",
    "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"],
    "env": {},
    "working_directory": null,
    "start_on_launch": true
  }
}

Click Save.

See the Warp MCP docs for more info.

Windsurf

Add this to your Windsurf MCP config file. See the Windsurf MCP docs for more info.

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Zed

Add this to your Zed settings.json. See the Zed Context Server docs for more info.

{
  "context_servers": {
    "Framelink_Figma_MCP": {
      "source": "custom",
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Zencoder

Go to the Zencoder menu (…).
Select Agent tools.
Click Add custom MCP.
Add the name and configuration:

{
  "command": "npx",
  "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}

Click Install.

Not listed? Most MCP clients take the same JSON. Check your editor’s docs, or join our Discord.

Windows, Bun, and Deno

Windows

On Windows, npx is a batch file (npx.cmd) and cannot be run directly by most MCP clients. Use cmd to run npx instead. In the JSON configuration above, replace "command": "npx" with "command": "cmd" and add "/c", "npx", to the beginning of the args array:

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Using Bun or Deno instead of npx

If you prefer an alternative runtime to Node.js, you can use Bun or Deno to run the MCP server. Use these in place of the npx command in your editor’s config above.Bun

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "bunx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Deno

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "deno",
      "args": [
        "run",
        "--allow-env",
        "--allow-net",
        "npm:figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

Implement your first design

After configuring your IDE, you’ll be able to pull complete design data from any Figma file.

Copy a link to a Figma frame or group

The MCP server compresses the data it receives from the Figma API by almost 90%. Even still, complex designs can overwhelm AI agents with too much information.You can try to get your editor to implement a whole design for you, but for the most consistent results, work on one section at a time.To do that, right click on the frame or group you’d like to implement, then select Copy/Paste as and choose Copy link to selection.

The Figma right-click menu with Copy/Paste as, then Copy link to selection

Paste the link into your editor

Once you have a link to the Figma frame or group, you can make a request to your editor’s AI agent.A request as simple as “Implement this Figma frame” along with the link should be enough to get the agent to call the MCP’s get_figma_data function, but more context is often helpful in getting the best results.

A Figma selection link pasted into an editor chat prompt

Get your design

After submitting your request, your coding agent will get to work. It should call the MCP’s get_figma_data function with the link you provided. Using the information returned from this function, your agent will generate a design.

A coding agent calling the MCP get_figma_data tool and writing the resulting markup

As you can see above, the agent decided to name the classes frame-### since the Figma frames used in this example used Figma’s default naming. Since this was a very simple design without much context about the intended use of the element, the agent just went with a literal interpretation of the frame’s contents.The design, however, is complete and functional.

The implemented design rendered in a browser

Troubleshooting

There are some common issues you might run into when connecting to Figma. See the troubleshooting guide for more information.

Next steps

This MCP is simple but powerful in the right hands. If you’re ready to take your prompting skills to the next level, check out the best practices guide to learn how to use the MCP to its full potential.

Get started

Guides

Reference

Let your agent set it up

Get a Figma access token

Install in your editor or agent

Other editors and agents

Windows, Bun, and Deno

Implement your first design

Troubleshooting

Next steps

​Let your agent set it up

​Get a Figma access token

​Install in your editor or agent

​Other editors and agents

​Windows, Bun, and Deno

​Implement your first design

​Troubleshooting

​Next steps

Let your agent set it up

Get a Figma access token

Install in your editor or agent

Other editors and agents

Windows, Bun, and Deno

Implement your first design

Troubleshooting

Next steps