MCP Server

Active

MIT

io.github.GLips/Figma-Context-MCP MCP Server

io.github.GLips/Figma-Context-MCP

Give your coding agent direct access to Figma design data for one-shot UI implementation.

What is the io.github.GLips/Figma-Context-MCP MCP server?

The Figma-Context-MCP (Framelink MCP for Figma) server is a Model Context Protocol server that gives AI coding agents like Cursor access to Figma design file data. It fetches design metadata via the Figma API, simplifies and translates it into relevant layout and styling information, and feeds it to the AI so it can implement designs in code more accurately than working from screenshots alone.

Framelink MCP for Figma connects AI coding assistants such as Cursor to Figma files, frames, or groups. Instead of relying on screenshots, the AI agent pulls structured design data (layout, styling) directly from Figma's API through this MCP server, which trims the response down to only the most relevant information before passing it to the model. This lets developers paste a Figma link into their editor's chat and have the agent implement the design in any framework in essentially one shot.

How to install io.github.GLips/Figma-Context-MCP

Copy-paste configuration for popular MCP clients.

transport: stdio

Config generated by PluginBench — verify against the source before use.

Environment / auth

FIGMA_API_KEY
required
secret
Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Cursor

~/.cursor/mcp.json

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Windsurf

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

VS Code

.vscode/mcp.json

{
  "servers": {
    "Figma-Context-MCP": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Claude Code

claude mcp add Figma-Context-MCP --env FIGMA_API_KEY=<YOUR_FIGMA_API_KEY> -- npx -y figma-developer-mcp --stdio

Tools & capabilities

Tools this server exposes to the agent.

Figma file/frame data retrieval — Fetches metadata from the Figma API for a given file, frame, or group link, simplifying and translating the response into the most relevant layout and styling information for use by the AI model.

Use cases

Paste a Figma file, frame, or group link into Cursor and ask it to implement the design in code
Generate accurate front-end UI code from Figma layouts without relying on screenshots
Translate Figma layout and styling data directly into framework-specific components
Speed up design-to-code handoff for developers using AI coding agents

io.github.GLips/Figma-Context-MCP MCP server FAQ

What does the Figma-Context-MCP server do?

It lets AI coding agents like Cursor fetch and use Figma design file data (layout, styling) to implement UI designs in code, instead of relying on pasted screenshots.

Is it free to use?

The MCP server itself is free and open source (MIT licensed), but you need a Figma account and personal access token, and usage is subject to Figma's own API terms.

How do I install it in Cursor?

Add an entry to your MCP configuration file that runs `npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio` (or via `cmd /c npx ...` on Windows), or set FIGMA_API_KEY and PORT as environment variables.

What authentication is required?

A Figma personal access token (API key) is required, which you create from your Figma account settings and pass via the --figma-api-key flag or FIGMA_API_KEY environment variable.

Which AI tools can use this server?

It's designed for use with Cursor and other MCP-compatible AI coding tools/clients that support agent mode.

Does it work with any code framework?

Yes, the README states it can help implement designs in any framework since it just supplies structured Figma design context to the coding agent.

README (reference)

Source of truth, from the repository.

<a href="https://www.framelink.ai/?utm_source=github&utm_medium=referral&utm_campaign=readme" target="_blank" rel="noopener"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://www.framelink.ai/github/HeaderDark.png" /> <img alt="Framelink" src="https://www.framelink.ai/github/HeaderLight.png" /> </picture> </a> <div align="center"> <h1>Framelink MCP for Figma</h1> <h3>Give your coding agent access to your Figma data.<br/>Implement designs in any framework in one-shot.</h3> <a href="https://npmcharts.com/compare/figma-developer-mcp?interval=30"> <img alt="weekly downloads" src="https://img.shields.io/npm/dm/figma-developer-mcp.svg"> </a> <a href="https://github.com/GLips/Figma-Context-MCP/blob/main/LICENSE"> <img alt="MIT License" src="https://img.shields.io/github/license/GLips/Figma-Context-MCP" /> </a> <a href="https://framelink.ai/discord"> <img alt="Discord" src="https://img.shields.io/discord/1352337336913887343?color=7389D8&label&logo=discord&logoColor=ffffff" /> </a> <br /> <a href="https://twitter.com/glipsman"> <img alt="Twitter" src="https://img.shields.io/twitter/url?url=https%3A%2F%2Fx.com%2Fglipsman&label=%40glipsman" /> </a> </div> <br/>

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.

<h3><a href="https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme">See quickstart instructions →</a></h3>

Demo

Watch a demo of building a UI in Cursor with Figma design data

How it works

Open your IDE's chat (e.g. agent mode in Cursor).
Paste a link to a Figma file, frame, or group.
Ask Cursor to do something with the Figma file—e.g. implement the design.
Cursor will fetch the relevant metadata from Figma and use it to write your code.

This MCP server is specifically designed for use with Cursor. Before responding with context from the Figma API, it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.

Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.

Getting Started

Many code editors and other AI clients use a configuration file to manage MCP servers.

The figma-developer-mcp server can be configured by adding the following to your configuration file.

NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found here.

MacOS / Linux

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

Windows

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

Or you can set FIGMA_API_KEY and PORT in the env field.

If you need more information on how to configure the Framelink MCP for Figma, see the Framelink docs.

Star History

Learn More

Apache-2.0

View repository →