Framelink Figma MCP Server

FeaturedLocal

framelink.aiMedia & Design16.1kUpdated 18w ago

About Framelink Figma MCP Server

Framelink Figma MCP Server is an MCP server that gives Cursor and other AI coding tools access to Figma design data. It simplifies Figma API responses so that only layout and styling details reach the model, which is aimed at implementing designs in code.

Key features

01Reads data from Figma files, frames and groups
02Simplifies Figma API responses to layout and styling
03Runs via npx with stdio transport
04Configurable through FIGMA_API_KEY and PORT

Use cases

01Implementing a Figma design as UI code in Cursor
02Supplying layout and style context from designs to AI coding tools

MCP support

This project is an MCP server that exposes Figma design data to MCP clients such as Cursor. It simplifies and translates Figma API responses before returning them as context.

#typescript #ai #mcp #cursor #figma

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config

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

Run commandnpx -y figma-developer-mcp

Environment variables to set

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

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages

npmfigma-developer-mcp0.13.2stdio

Tools

Saved tool list · updated 3w ago

Parameter	Type	Required	Description
depth	number	No	How many levels deep to traverse the node tree, only use if explicitly requested by the user
fileKey	string	Yes	The key of the Figma file to fetch, often found in a provided URL like figma.com/(file\|design)/<fileKey>/...
nodeId	string	No	The ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided

Details

From the project README

Framelink MCP for Figma

Give your coding agent access to your Figma data.
Implement designs in any framework in one-shot.

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.

See quickstart instructions →

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

The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the Framelink site.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

Read the getting-started guide

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.