home / mcp / figma mcp server

Figma MCP Server

Bridges Figma design data to React implementations, converting styles, layout, and assets into a React-ready format.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "sanjeev23oct-figma-mcp": {
      "command": "node",
      "args": [
        "d:/<folder>>/figma-mcp/build/index.js"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your figma token"
      }
    }
  }
}

This MCP server bridges Figma designs and React implementations, translating Figma file data into a React-friendly output. It enables pixel-perfect conversion, style processing, asset management, and layout transformation so you can generate React components directly from your designs.

How to use

You will connect your MCP client to the Figma MCP server to fetch processed design data. Use the provided MCP endpoint configuration to run the local server, then query the server for processed content such as React-ready components and image assets.

How to install

Prerequisites: Node.js installed on your machine. You may also need npm or npx for package management.

Step 1: Install dependencies and build the server code locally if you are using a local setup.

Step 2: Prepare environment variables.

Step 3: Run the server using the local runtime configuration shown in the configuration snippet.

Configuration and usage notes

The server exposes MCP endpoints that you can use from your MCP client. It requires a Figma access token to access Figma file data. You can run the server in stdio mode (local process) with the command shown in the configuration example.

Tools and end results

Two primary tools are available to fetch and process data from Figma: get_file_content and get_node_images. get_file_content fetches and processes Figma file content, converting layout, styles, and components into a React-ready structure. get_node_images retrieves image assets from Figma in formats like PNG, JPG, and SVG, with optional scaling.

Notes on usage with Cursor IDE and VS Code

Configure your MCP client in the IDE you use to point to the local stdio server. Cursor IDE allows a dedicated .cursor/mcp.json configuration, while VS Code uses settings.json to specify the node command and arguments along with the Figma access token.

Example project reference

An example project directory demonstrates how to integrate the MCP server to produce a pixel-perfect React implementation from a Figma design.

Processing pipeline

Input: Figma file data via the Figma API. Processing: style conversion, layout transformation to Flexbox, component hierarchy mapping, and asset optimization. Output: React-ready component data.

Available tools

get_file_content

Fetches and processes Figma file content, converting layout, styles, and components into a React-ready structure.

get_node_images

Retrieves image assets from Figma in multiple formats with optional scaling.