Figma Context MCP Tokens

The Figma MCP server is a middleware that provides access to Figma design data for AI programming tools, supporting detailed CSS property extraction and design token generation, helping developers convert designs into code more accurately.

Developer tools Image and video processing #Design to code #CSS extraction #Design tokens #Figma integration .TypeScript

rating : 2 points

downloads : 19

update time : 2025-04-28

What is Figma MCP Server?

Figma MCP Server is a server based on the Model Context Protocol that provides AI programming tools such as Cursor and Windsurf with the ability to access Figma design files. By simplifying the Figma API response, it only provides the most relevant layout and style information, making AI code generation more accurate and efficient.

How to use Figma MCP Server?

Simply run a simple command line to start the server, and then connect in the supported AI tools. You can directly paste the Figma file link, and the AI tool will automatically obtain the design data to assist with coding.

Applicable scenarios

It is most suitable for scenarios where you need to quickly convert Figma designs into front - end code, especially when you want the AI tool to accurately understand the design details rather than relying on screenshots.

Main features

Enhanced CSS extractionAutomatically extract detailed CSS properties, including colors, sizes, borders, shadows, and typography styles, ensuring high consistency between the code and the design.

Design token generationAutomatically generate reusable design tokens from Figma designs, supporting multiple formats such as CSS, SCSS, TypeScript, and JSON.

Seamless Figma integrationDirectly obtain design data through the Figma API, supporting links to files, frames, and specific elements.

AI - optimized outputSimplify the Figma API response and only provide the most relevant context required for AI coding, improving the accuracy of the generated code.

Advantages and limitations

Advantages

Convey design details more accurately than screenshots

Automatically extract CSS properties and design tokens, reducing manual work

Support multiple AI programming tools

Simplify the API response and improve the AI understanding efficiency

Limitations

Requires a Figma API access token

Large Figma files may require targeted selection of specific elements

Some advanced Figma features may not be fully supported

How to use

Get a Figma API key

Create a personal access token in the Figma account settings. Only read permission is required.

Start the MCP server

Use npm, yarn, or pnpm to run the server and provide your Figma API key.

Connect to the AI tool

Add the MCP server address (default localhost:3333) in the settings of tools such as Cursor.

Use the Figma design

Paste the Figma link in the editor of the AI tool and request to implement the design or extract information.

Usage examples

Implement a button componentExtract the button style from the Figma design and generate React component code

Create a design systemGenerate a complete design token system from the Figma design

Implement a responsive layoutImplement a responsive layout based on the Figma frame design

Frequently Asked Questions

Why do we need the Figma MCP server instead of direct API calls?

How to get specific elements in a Figma file?

Which AI programming tools are supported?

Will the CSS extraction function increase the response time?

Related resources

Model Context Protocol official website

Understand the detailed specifications of the MCP protocol

Figma API documentation

Figma official API reference

Demo video

Watch a practical demonstration of using Figma design data in Cursor

GitHub repository

Project source code and issue tracking

🚀 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.

Connect to the MCP Server in Cursor

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!

Verify the Connection Status

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:

Copy the Link to a Figma Selection by Right-clicking

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.