Skip to content
Get packs

Guide · Open source

How to use Figma-Context-MCP with Cursor: setup and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

Figma-Context-MCP is an open-source MCP server, written in TypeScript and released under the MIT licence, that gives an AI coding assistant such as Cursor read access to your Figma files. It is aimed at developers who want to turn a Figma frame or group into code. After this guide you will know what you need, how to add the server to your MCP client config, and how to ask Cursor to implement a design from a Figma link.

Framelink MCP for FigmaGLips/Figma-Context-MCP · ★ 16.1k · MIT

Quick start

  1. 1Create a Figma access token. Follow Figma's help article on personal access tokens and copy the token. The server cannot run without it.
  2. 2Install Node.js. Install Node.js. The README does not specify a version, so use a current release.
  3. 3Open your MCP config. Find the configuration file your editor uses for MCP servers, such as Cursor's MCP settings.
  4. 4Add the server entry. Add the figma-developer-mcp entry using npx, with your key in place of YOUR-KEY. Use the cmd /c form on Windows.
  5. 5Restart the client. Restart or reload Cursor so it picks up the new MCP server.
  6. 6Paste a Figma link. In agent mode, paste a link to a Figma file, frame or group and ask Cursor to implement it.

What Figma-Context-MCP does

The server sits between your AI client and the Figma API. You paste a link to a Figma file, frame or group into the chat, and the assistant fetches the relevant metadata from Figma to write code.

Before the response reaches the model, the server simplifies and translates the Figma API output so that only the most relevant layout and styling information is included. The project's README says that reducing the context this way helps the AI produce more accurate and relevant responses.

What you need before you start

You need three things: Node.js, a Figma API access token, and an MCP-compatible AI client such as Cursor. The README does not state a required Node.js version, so use a current LTS release and check the error output if something fails.

The README says you must create a Figma access token. It links to Figma's help article on managing personal access tokens.

  • Node.js (version not specified in the README)
  • A Figma API access token
  • An MCP-compatible AI client, such as Cursor

Add the server to your MCP config

Many editors and AI clients read a configuration file to manage MCP servers. Add the figma-developer-mcp entry to that file. On macOS and Linux the README uses npx directly. Replace YOUR-KEY with your Figma access token.

On Windows the README wraps the call in cmd /c, as shown in the second snippet below.

You can also set FIGMA_API_KEY and PORT in the env field of the config instead of passing the key as an argument.

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

Windows configuration

On Windows, the README uses the cmd command with /c as the first arguments so that npx runs correctly. The rest of the arguments are the same as on macOS and Linux.

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

Ask Cursor to implement a Figma design

Open the chat in your IDE, for example agent mode in Cursor. Paste a link to a Figma file, frame or group, then ask the assistant to do something with it, such as implementing the design. Cursor fetches the metadata from Figma and uses it to write the code.

The README says the server is specifically designed for Cursor. Other MCP-capable tools may work with the same config format, but the README does not document them, so test before relying on one.

  • Open agent mode or your equivalent chat panel.
  • Paste the Figma link to the frame or group you want built.
  • Name the framework and output you want in the same message.
  • Check the generated code against the design yourself.

Where to get more help

The README points to the Framelink quickstart and docs for further configuration detail. The project also links to a Discord server from its README badges.

What people use it for

  • Turning a Figma frame into front-end code in the framework you already use
  • Letting Cursor read layout and styling data instead of working from a screenshot
  • Implementing a single screen from a design file during a sprint
  • Giving a coding agent the design context for a component you are building

Frequently asked questions

Is Figma-Context-MCP free to use?

The project is released under the MIT licence, which is shown in the README badge and linked to the LICENSE file in the repository. The README does not discuss pricing for Figma or Cursor, so check those services' own terms.

Do I need a Figma API key to use it?

Yes. The README says you will need to create a Figma access token to use this server, and it links to Figma's instructions for personal access tokens.

Which AI tools does it work with?

The README says the server is specifically designed for use with Cursor. It is an MCP server, so it is meant for MCP-compatible clients. Other clients are not named in the README.

What do I need installed to run it?

You need Node.js, since the config runs the server with npx. The README does not state a minimum Node.js version.

How is it different from the official Figma MCP server?

The README does not compare the two projects. Figma's official MCP server is a separate project, so review its documentation and decide which fits your setup.

Why does Cursor sometimes produce inaccurate code from a Figma link?

The README says the server trims the Figma response so only the most relevant layout and styling information reaches the model, which it says improves accuracy. It does not promise perfect output, so review generated code against the design.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Figma-Context-MCP suits developers who use Cursor or another MCP-capable editor and want the AI to read layout data from Figma, provided they have a Figma access token. People who do not use an MCP client, lack a token, or want a visual design tool should look elsewhere, such as Figma itself or a different code-generation approach.

Install options & downloads