Figma Context MCP Tokens

🚀 Figma MCP Server Guide

This guide provides a comprehensive overview of the Figma MCP server, including installation, configuration, usage, and more. It helps you quickly get started with using the server to handle Figma design files.

🚀 Quick Start

📦 Installation

First, install the necessary dependencies:

pnpm install

▶️ Start the Development Server

After the installation is complete, start the development server:

pnpm run dev

✨ Features

get_figma_data Tool

This tool is used to retrieve information about a specified Figma file.

Parameters:

• fileKey (string): The key of the Figma file for which you want to retrieve information.
• nodeId (string, optional): The ID of a specific node.
• depth (number, optional): The depth level for traversing the node tree.
• extractCssProperties (boolean, optional): Whether to extract detailed CSS properties for each node (default: true).

generate_design_tokens Tool

This tool generates design tokens from a Figma file and exports them in a specified format.

Parameters:

• fileKey (string): The key of the Figma file to process.
• nodeId (string, optional): The ID of a specific node.
• depth (number, optional): The depth level for traversing the node tree.
• format (string, optional): The output format of the design tokens (options: "css", "scss", "ts", "json"; default: "css").
• outputPath (string, optional): The file path to save the design tokens.
• prefix (string, optional): An optional prefix for variable names (e.g., "my-app-").

🔧 Configuration

Environment Variables

• FIGMA_API_KEY: Your Figma API access token (required).
• PORT: The port on which the server runs (default: 3333).

Command-line Arguments

• --version: Displays the version number.
• --figma-api-key: Your Figma API access token.
• --port: The port on which the server runs.
• --stdio: Runs the server in command mode instead of the default HTTP/SSE mode.
• --help: Displays the help menu.

🔗 Connect to Cursor

Start the Server

> npx figma-developer-mcp --figma-api-key=<Your Figma API Token>
# Initialize the 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 started, connect Cursor to the MCP server in Cursor's settings, located under the Features tab.

After a successful connection, confirm that Cursor shows a valid connection status before proceeding. If a green dot is displayed and the tools are visible, it means everything is working!

Start Using Composer to Process Your Figma Designs

Once the MCP server is successfully connected, you can start using the tools in Cursor's Composer as long as Composer is in proxy mode.

Drag the link to a Figma file into Composer and let Cursor perform operations on it. This will automatically trigger the get_figma_data tool.

Most Figma files are very large, so you may need to link to a specific frame or group within the file. You can copy the link to an element by selecting it and pressing CMD + L. You can also find this option in the right-click menu:

Once you have a link to a specific element, you can drag it into Composer and let Cursor perform operations on it.

💻 Usage Examples

Example 1: Get Figma File Information

curl --header "Content-Type: application/json" \
     --request POST \
     --data '{"fileKey":"your_figma_file_key","nodeId":"your_node_id"}' \
     http://localhost:3333/api/get_figma_data

Example 2: Generate Design Tokens

curl --header "Content-Type: application/json" \
     --request POST \
     --data '{"fileKey":"your_figma_file_key","nodeId":"your_node_id","depth":2,"format":"scss","outputPath":"./tokens.scss","prefix":"my-app-"}' \
     http://localhost:3333/api/generate_design_tokens

📋 Inspection

To more easily inspect the responses from the MCP server, you can run the inspect command to start the @modelcontextprotocol/inspector web UI for triggering tool calls and viewing responses:

pnpm inspect
# > figma-mcp@0.1.7 inspect
# > pnpx @modelcontextprotocol/inspector
#
# Start the MCP Inspector...
# Proxy server listening on port 3333...
#
# 🔍 MCP Inspector is up and running at http://localhost:5174

Visit http://localhost:5174 to view tool calls and responses.

⚠️ Important Note

⚠️ Important Note

• Ensure that the server is running on the correct port and that the network configuration allows external access.
• Use a valid Figma API token to get full functionality support.
• When processing large files, performance issues may occur. It is recommended to optimize the data extraction and processing logic.

📚 Documentation

For more detailed information, please refer to the Figma MCP Server Documentation.