https://github.com/GLips/Figma-Context-MCP
MCP server to provide Figma layout information to AI coding agents like Cursor
https://github.com/GLips/Figma-Context-MCP
ai cursor figma mcp typescript
Last synced: about 2 months ago
JSON representation
MCP server to provide Figma layout information to AI coding agents like Cursor
- Host: GitHub
- URL: https://github.com/GLips/Figma-Context-MCP
- Owner: GLips
- License: mit
- Created: 2025-02-13T02:55:06.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-02-21T19:49:13.000Z (about 2 months ago)
- Last Synced: 2025-02-21T20:32:23.631Z (about 2 months ago)
- Topics: ai, cursor, figma, mcp, typescript
- Language: TypeScript
- Homepage:
- Size: 429 KB
- Stars: 118
- Watchers: 1
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-mcp-list - GLips/Figma-Context-MCP - Context-MCP?style=social)](https://github.com/GLips/Figma-Context-MCP): Gives coding agents direct access to Figma data. (Uncategorized / Uncategorized)
- awesome-mcp-servers - GLips/Figma-Context-MCP - Provide coding agents direct access to Figma data to help them one-shot design implementation. (Legend / 💻 <a name="developer-tools"></a>Developer Tools)
- awesome-mcp-servers - GLips/Figma-Context-MCP - Provide coding agents direct access to Figma data to help them one-shot design implementation. (Legend / 💻 <a name="developer-tools"></a>Developer Tools)
- awesome-mcp-servers - Figma - Paste a link to your Figma design to get its data in a ready-to-implement format. (💻 <a name="development-tools"></a>Development Tools)
- awesome-mcp - Framelink Figma MCP Server - <img src="./images/languages/typescript.svg" > Give your coding agent access to your Figma data. Implement designs in any framework in one-shot. (Mcp Servers / integration)
- StarryDivineSky - GLips/Figma-Context-MCP - Context-MCP是一个MCP服务器，旨在为像Cursor这样的AI编码助手提供Figma布局信息。它允许AI智能体理解Figma设计，从而更好地进行代码生成和编辑。该项目通过解析Figma文件，提取图层、属性和约束等信息，并将其转换为AI可以理解的格式。核心功能是提供Figma上下文，帮助AI更准确地理解设计意图。使用场景包括自动生成代码、智能代码补全和设计稿到代码的转换。该项目简化了AI与Figma的集成，提升了AI编码助手的效率和准确性。它通过创建一个服务器，监听来自AI客户端的请求，并返回相关的Figma布局数据。项目目标是成为AI编码助手与Figma设计之间的桥梁。 (A01_文本生成_文本对话 / 大语言对话模型及数据)
- awesome-mcp-servers - Framelink Figma Connector - MCP server to provide Figma layout information to AI coding agents like Cursor (Table of Contents / Other Tools and Integrations)
- awesome-mcp-servers - Framelink Figma Connector - MCP server to provide Figma layout information to AI coding agents like Cursor (Table of Contents / Other Tools and Integrations)
README
# Figma MCP Server
Give [Cursor](https://cursor.sh/) 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.
Get started quickly, see [Configuration](#configuration) for more details:
```bash
npx figma-developer-mcp --figma-api-key=
```
## Demo Video
[Watch a demo of building a UI in Cursor with Figma design data](https://youtu.be/6G9yb-LrEqg)
[](https://youtu.be/6G9yb-LrEqg)
## How it works
1. Open Cursor's composer in agent mode.
1. Paste a link to a Figma file, frame, or group.
1. Ask Cursor to do something with the Figma file—e.g. implement a design.
1. 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.
## Installation
### Running the server quickly with NPM
You can run the server quickly without installing or building the repo using NPM:
```bash
npx figma-developer-mcp --figma-api-key=
# or
pnpx figma-developer-mcp --figma-api-key=
# or
yarn dlx figma-developer-mcp --figma-api-key=
# or
bunx figma-developer-mcp --figma-api-key=
```
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).
### Running the server from local source
1. Clone the [repository](https://github.com/GLips/Figma-Context-MCP)
2. Install dependencies with `pnpm install`
3. Copy `.env.example` to `.env` and fill in your [Figma API access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens). Only read access is required.
4. Run the server with `pnpm run dev`, along with any of the flags from the [Command-line Arguments](#command-line-arguments) section.
## Configuration
The server can be configured using either environment variables (via `.env` file) or command-line arguments. Command-line arguments take precedence over environment variables.
### Environment Variables
- `FIGMA_API_KEY`: Your [Figma API access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) (required)
- `PORT`: The port to run the server on (default: 3333)
### Command-line Arguments
- `--version`: Show version number
- `--figma-api-key`: Your Figma API access token
- `--port`: The port to run the server on
- `--stdio`: Run the server in command mode, instead of default HTTP/SSE
- `--help`: Show help menu
## Connecting to Cursor
### Start the server
```bash
> npx figma-developer-mcp --figma-api-key=
# Initializing Figma MCP Server in HTTP mode on port 3333...
# HTTP server listening on port 3333
# SSE endpoint available at http://localhost:3333/sse
# Message endpoint available at http://localhost:3333/messages
```
### Connect Cursor to the MCP server
Once the server is running, [connect Cursor to the MCP server](https://docs.cursor.com/context/model-context-protocol) in Cursor's settings, under the features tab.
After the server has been connected, you can confirm Cursor's has a valid connection before getting started. If you get a green dot and the tools show up, you're good to go!
### Start using Composer with your Figma designs
Once the MCP server is connected, **you can start using the tools in Cursor's composer, as long as the composer is in agent mode.**
Dropping a link to a Figma file in the composer and asking Cursor to do something with it should automatically trigger the `get_file` tool.
Most Figma files end up being huge, so you'll probably want to link to a specific frame or group within the file. With a single element selected, you can hit `CMD + L` to copy the link to the element. You can also find it in the context menu:
Once you have a link to a specific element, you can drop it in the composer and ask Cursor to do something with it.
## Inspect Responses
To inspect responses from the MCP server more easily, you can run the `inspect` command, which launches the `@modelcontextprotocol/inspector` web UI for triggering tool calls and reviewing responses:
```bash
pnpm inspect
# > [email protected] inspect
# > pnpx @modelcontextprotocol/inspector
#
# Starting MCP inspector...
# Proxy server listening on port 3333
#
# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀
```
## Available Tools
The server provides the following MCP tools:
### get_file
Fetches information about a Figma file.
Parameters:
- `fileKey` (string): The key of the Figma file to fetch
- `depth` (number, optional): How many levels deep to traverse the node tree
### get_node
Fetches information about a specific node within a Figma file.
Parameters:
- `fileKey` (string): The key of the Figma file containing the node
- `nodeId` (string): The ID of the node to fetch