Framelink Figma MCP Server

What is Framelink Figma MCP Server about?

Delivers simplified Figma metadata to AI-powered coding tools such as Cursor, allowing the model to generate accurate UI code from a design link.

How to use Framelink Figma MCP Server?

Install the server via npx (no global install needed).
Add the MCP server configuration to your editor’s or AI client’s config file, specifying the command, arguments, and your Figma API key.
In the IDE chat, paste a Figma file, frame, or group link.
Ask the coding agent to implement or modify the design; the server supplies the relevant layout data.

Key features of Framelink Figma MCP Server

Focused context – extracts only the most relevant layout and styling data from the Figma API.
One‑shot design implementation – enables agents to generate complete UI code from a single prompt.
Cross‑platform configuration – works on macOS, Linux, and Windows with simple JSON snippets.
Zero‑install runtime – runs via npx without needing a permanent global package.
TypeScript‑based – offers strong typings for developers extending or integrating the server.

Use cases of Framelink Figma MCP Server

Rapid prototyping: turn a Figma mockup into working code instantly.
Agent‑assisted development: let AI agents fetch design details without manual copy‑pasting of screenshots.
Multi‑framework generation: generate React, Vue, or other framework code from the same design source.
Team workflows: embed the server in CI pipelines to verify that design‑to‑code translations stay up‑to‑date.

FAQ from the Framelink Figma MCP Server

Q: Do I need a Figma access token? A: Yes, a personal access token is required. Create one in Figma settings and supply it via the FIGMA_API_KEY environment variable or the --figma-api-key argument.

Q: Which editors support this MCP server? A: Any editor or AI client that can read an MCP configuration file, such as Cursor, VS Code extensions, or custom tooling.

Q: How does the server reduce context size? A: It filters the raw API response, keeping only layout coordinates, component hierarchy, and essential style attributes before sending them to the model.

Q: Can I run the server on a custom port? A: Yes, set the PORT environment variable in the configuration if you need a non‑default port.

Q: Is the package open source? A: The repository is MIT‑licensed and publicly available on GitHub.

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.

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