📌Overview

Purpose: The Figma MCP Server facilitates AI-powered coding tools to interact efficiently with Figma design files, enhancing the accuracy of code generation based on design specifications.

Overview: The Figma MCP Server connects AI tools like Cursor to Figma, allowing them to access design data directly. This enables more accurate implementation of designs compared to traditional methods, such as using screenshots. The server acts as an intermediary, simplifying the data received from the Figma API to optimize the context provided to AI models.

Key Features:

Efficient Integration: Seamlessly link AI tools like Cursor to Figma to enable them to fetch relevant design information and generate code accurately.
Simplified Data Translation: The server translates complex Figma API responses into a streamlined format, ensuring that only the most relevant styling and layout details are shared with the AI for improved output.

Figma MCP Server

This server connects AI-powered coding tools such as Cursor and Windsurf to your Figma files using the Model Context Protocol (MCP). This allows tools to utilize Figma design data more effectively than traditional methods.

Quick Start

To get started quickly, run the following command (replace <your-figma-api-key> with your actual API key):

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

How It Works

Open Cursor's composer in agent mode.
Paste a link to a Figma file, frame, or group.
Request Cursor to implement a design or perform an action.
Cursor fetches the relevant metadata from Figma to assist in writing the code.

The MCP server is tailored for Cursor, simplifying Figma API responses to provide only crucial layout and styling information, enhancing the AI's accuracy.

Installation

Quick Server Setup with NPM

You can quickly run the server without a local installation:

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

Configuration for Other Tools

For compatibility with tools like Windsurf and Cline that require configuration files, use the following JSON structure:

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}

Running from Local Source

Clone the repository.
Install dependencies using pnpm install.
Copy .env.example to .env and fill in your Figma API access token (read access is sufficient).
Run the server with pnpm run dev.

Configuration

The server can be configured via environment variables or command-line arguments, with command-line arguments taking precedence.

Environment Variables

FIGMA_API_KEY: Your Figma API access token (required)
PORT: Port for the server (default: 3333)

Command-line Arguments

--version: Show version number
--figma-api-key: Your Figma API access token
--port: The port for the server
--stdio: Run the server in command mode
--help: Show help menu

Connecting to Cursor

Start the server:

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

Connect Cursor to the MCP server by following the instructions in Cursor's settings under the features tab.
Using the Composer: Once connected, you can start using the tools in Cursor's composer. Dropping a specific Figma element link will trigger the get_file tool.

Inspecting Responses

To inspect responses more easily, run the inspect command, starting the MCP inspector:

pnpm inspect

Available Tools

The server provides the following tools:

`get_figma_data`

Fetches information about a Figma file or a specific node.

Parameters:

fileKey (required): Key of the Figma file.
nodeId (optional, recommended): ID of the node to fetch.
depth (optional): How deep to traverse the node tree.

`download_figma_images` (WIP)

Downloads SVG and PNG images used in a Figma file based on node IDs.