Figma MCP Server

How to use

Install and run the MCP server using one of the provided workflows, then use your MCP client to fetch Figma data. You can retrieve node images, style data, SVGs, and full design element analyses from a Figma URL. Start the MCP, point your client at the server, and issue actions like image export, style extraction with CSS, or element analysis to get structured results.

How to install

Prerequisites: ensure you have Node.js (version 18 or later) and npm installed on your system.

# Option 1: Run via npx (recommended, no install)
npx figma-mcp-full-server figd_your_figma_token_here

# Option 2: Global install
# Install globally
npm install -g figma-mcp-full-server

# Run
figma-mcp-full-server figd_your_figma_token_here

# Option 3: Local project install
# Install in your project
npm install figma-mcp-full-server

# Run
npx figma-mcp-full-server figd_your_figma_token_here
# or
node_modules/.bin/figma-mcp-full-server figd_your_figma_token_here

# Option 4: Run from source (for development)

# Clone the repository and install
# (use your actual path when running)
git clone <repository>
cd figma-mcp
npm install
npm run build

# Run
npm start figd_your_figma_token_here
# or
node build/index.js figd_your_figma_token_here

Configuration examples for Claude Desktop

{
  "mcpServers": {
    "figma-mcp-full-server": {
      "command": "npx",
      "args": ["figma-mcp-full-server"],
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

Run from source (development)

{
  "mcpServers": {
    "figma-mcp": {
      "command": "node",
      "args": [
        "/absolute/path/to/figma-mcp/build/index.js"
      ],
      "cwd": "/absolute/path/to/figma-mcp",
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

Get started with a token

1) Log in to Figma. 2) Open Settings. 3) Create a personal access token starting with figd_. 4) Copy the token and use figd_your_figma_token_here in your configuration.

Notes on configuring your client

When you start the MCP server, point your MCP client at the running instance. Use the actions provided by the client to request Figma images, styles, or design element analyses. Ensure your Figma file is accessible with the token you supplied.

Security and best practices

Use environment variables for tokens and rotate tokens regularly. Grant the MCP server only the minimum necessary permissions to access your Figma files. Keep production tokens secure and avoid hardcoding values.

Troubleshooting

Common issues include module not found errors, access denied due to token problems, and startup failures from incorrect paths or Node.js versions. Verify you are using Node.js version 18 or newer, ensure the token is valid, and run builds with absolute paths. If starting from source, rebuild after changes.

Development notes

If you plan to modify the MCP server, you can run in development mode, build the project, and start the server with the token in your environment. Follow the project structure to locate the entry points and services for Figma API access, image export, and style extraction.

What you can do with the MCP server

- Export node images from a Figma URL in PNG, JPG, SVG, or PDF formats. - Extract detailed style data and generate CSS. - Process multiple nodes in batch for faster work. - Receive clear error messages and have guidance for remediation. - Analyze design elements deeply, including images, vectors, and components, and obtain SVG data when needed.

Tools and capabilities

This MCP server exposes a set of capabilities to interact with Figma programmatically, including image export, style extraction (with optional CSS), batch exports, and file information retrieval. You can also fetch node-specific images, SVG data, and extract all design elements contained in a node.

Quick Command Summary

- Run via npx: npx figma-mcp-full-server <token>
- Global install: npm install -g figma-mcp-full-server then run figma-mcp-full-server <token>
- Local project: npm install figma-mcp-full-server then npx figma-mcp-full-server <token>

get_figma_image

Get node image by Figma URL (export PNG/JPG/SVG/PDF)

get_figma_styles

Get node style data; optional CSS output

export_multiple_images

Batch export multiple nodes in one request

get_file_info

Get basic information about a Figma file

get_node_images

Get all image assets under a specific node

get_node_svg

Get SVG data for a specific node

extract_node_elements

Extract all design elements contained in a node