Framelink Figma MCP

listing.by

Give coding agents simplified Figma layout and style data so they can implement designs from a file, frame or group link.

state.local.long (state.local.title)listing.badge.runs_withstate.key.long

listing.local.explain

npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

listing.local.needs listing.local.note

  • FIGMA_API_KEY listing.env.secret Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens
act.add_to a11y.new_tab

listing.share.h

listing.share.p_local

mcp.tc/i/framelink-figma

Framelink MCP for Figma connects AI coding tools such as Cursor to the Figma API. You paste a link to a Figma file, frame or group, and the server fetches the design metadata and reduces it to the layout and styling information that matters, so the model can write code that matches the design.

It runs locally over stdio through npx using the figma-developer-mcp package. A Figma personal access token is required, passed with the --figma-api-key flag or the FIGMA_API_KEY environment variable. This is a community project, separate from Figma's own Dev Mode server.

  • Fetch design data from a Figma file, frame or group link
  • Receive simplified layout and styling info instead of raw API output
  • Implement designs in any framework from Figma context
  • Works with Cursor and other MCP-capable coding clients

listing.notools.key

  • Implement this Figma frame as a React component: YOUR_FIGMA_LINK

  • Read the layout of this Figma group and build it with plain HTML and CSS

  • Use the Figma file at this link to build the pricing page in Vue

  • Match the spacing and colors from this Figma frame in my existing component

listing.setup.local

Claude Code

  1. Run this in a terminal, in your project folder:
claude mcp add --transport stdio framelink-figma --env "FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>" -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio
  1. Start Claude Code and type /mcp. framelink-figma should show as connected.

Add --scope user to make it available in every project. Replace the placeholders with your own values.

Claude Desktop

  1. Open Settings → Developer → Edit Config. It opens claude_desktop_config.json. Add:
claude_desktop_config.json
{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}
  1. Save the file and restart Claude Desktop. Replace the placeholders with your own values.

Needs Node.js on your computer. The file lives in ~/Library/Application Support/Claude/ on macOS and %APPDATA%\Claude\ on Windows.

Cursor

Add to Cursor a11y.new_tab

Or add it by hand to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project):

mcp.json
{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Needs Node.js on your computer. Replace the placeholders with your own values.

VS Code

Add it to .vscode/mcp.json. VS Code asks for the secret the first time and stores it securely:

.vscode/mcp.json
{
  "servers": {
    "framelink-figma": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "${input:figma-api-key}"
      }
    }
  },
  "inputs": [
    {
      "type": "promptString",
      "id": "figma-api-key",
      "description": "FIGMA_API_KEY",
      "password": true
    }
  ]
}

Needs Node.js on your computer.

Devin Desktop

  1. Add it to ~/.config/devin/mcp_config.json (macOS and Linux) or %APPDATA%\devin\mcp_config.json (Windows):
mcp_config.json
{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}
  1. Refresh the MCP server list in Cascade. Replace the placeholders with your own values.

Devin Desktop is the new name for Windsurf.

Codex

codex mcp add framelink-figma --env "FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>" -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

Or edit ~/.codex/config.toml directly:

config.toml
[mcp_servers.framelink-figma]
command = "npx"
args = ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio"]
env = { FIGMA_API_KEY = "<YOUR_FIGMA_API_KEY>" }

Needs Node.js on your computer. Replace the placeholders with your own values.

Gemini CLI

gemini mcp add -e "FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>" framelink-figma npx -- -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

This adds it to the current project. Add -s user to use it everywhere.

Any client

Most clients that start local servers accept this shape:

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Zed puts servers under context_servers in its settings, with the same command, args and env fields.

Needs Node.js on your computer. Replace the placeholders with your own values.

Can I paste mcp.tc/i/framelink-figma into my MCP client?

No. Framelink Figma MCP runs on your own computer, started by your client, so it has no web address to connect to. The quick link is the page to share; the install command is npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio.

Does Framelink Figma MCP need an API key?

Yes. It reads FIGMA_API_KEY from its environment, and FIGMA_API_KEY is a secret. Put the value in your client's config on your own machine, never in a shared file.

Is Framelink Figma MCP a remote or a local server?

Local. Your client starts it as a process on your computer with npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio, which needs Node.js.

What can Framelink Figma MCP do?

You can fetch design data from a Figma file, frame or group link, receive simplified layout and styling info instead of raw API output and implement designs in any framework from Figma context.

Which clients can use it?

Any client that starts local servers: Claude Code, Claude Desktop, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed and others. claude.ai and ChatGPT only connect to remote servers.

Who wrote this page?

mcp.tc's robot read Framelink Figma MCP's public metadata (its package and repository pages), and an AI model drafted the text from it. A person reviews anything the checks can't confirm. The text can still be wrong, so if you spot a mistake, use Report this listing on this page.

listing.em.lead_local listing.em.how

listing.more_in

  • Talk to Figma

    Grab

    state.local.label (state.local.title)

    Read and modify Figma designs from an AI agent through a local WebSocket relay and a Figma plugin.

    mcp.tc/i/talk-to-figma

  • DaVinci Resolve

    Samuel Gursky

    state.local.label (state.local.title)

    Control DaVinci Resolve Studio from your assistant: edit timelines, organize media, set up renders and work on color.

    mcp.tc/i/davinci-resolve

  • Ableton MCP

    Siddharth Ahuja

    state.local.label (state.local.title)

    Control Ableton Live from your assistant: create tracks, MIDI clips and arrangements, and load instruments and effects.

    mcp.tc/i/ableton

  • FreeCAD MCP

    neka-nat

    state.local.label (state.local.title)

    Control FreeCAD from an MCP client to create and edit 3D models, run Python scripts and run FEM analyses.

    mcp.tc/i/freecad

  • TerraVision

    patrickchugh

    state.local.label (state.local.title)

    Generate AWS, Azure and GCP architecture diagrams with official icons from a description, a JSON graph or Terraform code.

    mcp.tc/i/terravision

  • Ignite UI Theming

    Infragistics (IgniteUI)

    state.local.label (state.local.title)

    Generate Sass palettes, typography, elevations and themes for Ignite UI components from your AI assistant.

    mcp.tc/i/ignite-ui-theming

listing.disclaimer_checked