Figma Developer MCP

Name: Figma Developer MCP
Availability: InStock
Author: GLips

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

MCP Free Verified stdio 102 lines By GLips Awesome List - punkpeye/awesome-mcp-servers

Description

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

Quick Install

npx figma-developer-mcp

Installation

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](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).

### MacOS / Linux

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

### Windows

```json
{
  "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 [Frameli

Stack & Dependencies

rest-api-spec sdk cross-env dotenv express js-yaml remeda sharp yargs zod

Frequently Asked Questions

What technologies does Figma Developer MCP require?

This MCP server requires rest-api-spec, sdk, cross-env, dotenv, express, js-yaml, remeda, sharp, yargs, and zod. Ensure these are available in your environment before configuring it with Claude Code.

How does Figma Developer MCP communicate with Claude?

Figma Developer MCP uses the stdio transport protocol to communicate with Claude Code via the Model Context Protocol.

How do I install Figma Developer MCP?

You can install Figma Developer MCP using npx: `npx figma-developer-mcp`. Add it to your Claude Code MCP configuration to start using it.

Is Figma Developer MCP free to use?

Figma Developer MCP is completely free to use. You can download the configuration or copy it directly from the page.

Download Config GitHub

Framelink MCP for Figma
  
    🌐 Available in:
    한국어 (Korean) |
    日本語 (Japanese) |
    简体中文 (Simplified Chinese) |
    繁體中文 (Traditional Chinese)
  
  Give your coding agent access to your Figma data.Implement designs in any framework in one-shot.

Give [Cursor](https://cursor.sh/) and other AI-powered coding tools access to your Figma files with this [Model Context Protocol](https://modelcontextprotocol.io/introduction) 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](https://youtu.be/6G9yb-LrEqg)

[![Watch the video](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg)

## 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](https://www.figma.com/developers/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](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).

### MacOS / Linux

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

### Windows

```json
{
  "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](https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme).

## 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](https://framelink.ai?utm_source=github&utm_medium=referral&utm_campaign=readme) site.

Description

Quick Install

Installation

Stack & Dependencies

Frequently Asked Questions

AI Marketing Skills Newsletter