Use This MCP server To

Provide AI agents with real-time Figma design context Enable one-shot implementation of Figma designs in code Bridge design and development workflows via AI integration Support multi-framework UI code generation from Figma layouts Facilitate automated UI code updates from Figma changes

README

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

Watch the video

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 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

Star History Chart

Learn More

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

Figma-Context-MCP FAQ

How does Figma-Context-MCP connect to Figma?

It uses Figma's API to fetch layout and design data securely for AI agents.

Can this MCP server work with multiple AI coding agents?

Yes, it is designed to provide Figma context to various AI agents like Cursor.

Is the Figma data provided in real-time?

Yes, it delivers structured, real-time design context to enable up-to-date coding assistance.

Does it support multiple programming frameworks?

Yes, it facilitates design implementation in any code framework supported by the AI agent.

What languages is the documentation available in?

Documentation is available in Korean, Japanese, and Chinese.

Is the Figma-Context-MCP open source?

Yes, it is available under the MIT License on GitHub.

How does this MCP improve developer productivity?

By automating design-to-code translation, it reduces manual coding and errors.

Can it handle complex Figma layouts?

Yes, it provides detailed layout information suitable for complex UI designs.

Figma-Context-MCP

Use This MCP server To

README

Framelink Figma MCP Server