What is Figma

The Framelink Figma MCP Server is a tool that allows AI coding agents, like Cursor, to access Figma design data efficiently. It acts as a bridge between Figma and AI-powered coding tools, enabling them to retrieve relevant metadata from Figma files for accurate code generation.

Use cases

This server is particularly useful for developers who want to implement Figma designs into code quickly and accurately. It enhances the coding experience by allowing users to paste Figma links and ask AI tools to implement designs, leading to more precise and relevant code outputs.

How to use

To use the Framelink Figma MCP Server, configure it in your code editor’s configuration file with your Figma API key. Once set up, you can initiate a chat in your IDE, paste a Figma link, and query the AI to manipulate the design data for code generation.

Key features

The server simplifies and translates the context received from the Figma API, focusing on relevant layout and styling information. This reduces the complexity of the data fed to the AI, improving the accuracy of the responses and the overall efficiency of the coding process.

Where to use

The Framelink Figma MCP Server is designed for use in various code editors and AI-powered coding environments. It is especially beneficial for tools like Cursor, which leverage Figma design data to produce high-quality, immediate coding outcomes.

Framelink Figma MCP Server

🌐 Available in: 한국어 (Korean) | 日本語 (Japanese) | 中文 (Chinese)

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

1. Open your IDE’s chat (e.g. agent mode in Cursor).
2. Paste a link to a Figma file, frame, or group.
3. Ask Cursor to do something with the Figma file—e.g. implement the design.
4. 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 Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

Windows

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "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 Figma MCP server, see the Framelink docs.

Star History

Learn More

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

Sponsors

🥇 Gold Sponsors

Framelink

🥈 Silver Sponsors

🥉 Bronze Sponsors

😻 Smaller Backers