figma-mcp

What is this?

figma-mcp is a Model Context Protocol server that gives LLM agents (Claude, GPT, etc.) the ability to read, inspect, and export from Figma files programmatically.

Built with the official MCP Python SDK using the FastMCP API.

Architecture

┌─────────────────────┐
│  Claude Desktop /   │
│  Any MCP Client     │
└────────┬────────────┘
         │ stdio
┌────────▼────────────┐
│  figma-mcp Server   │
│  (FastMCP)          │
└────────┬────────────┘
         │ HTTPS
┌────────▼────────────┐
│  Figma REST API     │
│  api.figma.com/v1   │
└─────────────────────┘

Project structure:

src/figma_mcp/
  __init__.py        # Entry point
  config.py          # Environment config (dotenv)
  utils.py           # Logger (stderr) + validation helpers
  figma_client.py    # Figma API client (requests)
  server.py          # FastMCP server + all tool definitions

Installation

git clone https://github.com/Anakintano/figma-mcp.git
cd figma-mcp
pip install -e .

Or with uv (recommended):

uv pip install -e .

Configuration

1. Get a Figma Token

1. Go to Figma Settings → Account → Personal access tokens

2. Click Generate new token

3. Copy the token

2. Set Environment Variable

Create a .env file in the project root:

FIGMA_ACCESS_TOKEN=figd_your_token_here

3. Claude Desktop Setup

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "figma": {
      "command": "python",
      "args": ["-m", "figma_mcp"],
      "cwd": "/path/to/figma-mcp",
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_your_token_here"
      }
    }
  }
}

Tools

Finding your file key: In any Figma URL like https://www.figma.com/file/ABC123xyz/My-Design, the file key is ABC123xyz.

Use Cases

1. Design System Audit

Prompt: "List all components in my Figma file abc123 and tell me which ones don't follow our naming convention"

The agent uses list_components to fetch every component, then analyzes naming patterns — great for enforcing consistency across large design systems.

2. Developer Handoff

Prompt: "Get the layout details of the login page frame 1:42 from file xyz789"

Uses get_frame_nodes to extract exact positions, sizes, colors, fonts, and spacing — giving developers precise specs without leaving the chat.

3. Asset Export Pipeline

Prompt: "Export all icon frames 1:10, 1:11, 1:12 as SVGs from file abc123"

The agent calls export_assets with format=svg and returns download URLs for each icon, ready for use in code.

4. Style Token Extraction

Prompt: "What are all the color and text styles in file myDesign? Format them as CSS variables"

Uses list_styles to pull every defined style, then the LLM formats them into usable CSS custom properties:

--color-primary: #3B82F6;
--color-secondary: #10B981;
--font-heading: Inter, 24px, 700;

5. Design Review / QA

Prompt: "Get the full structure of file abc123 and check if all frames have consistent padding"

Fetches the entire file with get_figma_file, then the LLM traverses the node tree to flag layout inconsistencies.

6. Multi-File Comparison

Prompt: "Compare the components in file designV1 vs designV2 and list what changed"

Calls list_components on both files, and the LLM diffs the results to produce a changelog of design changes.

Example Prompts

Here are ready-to-use prompts for Claude Desktop with this MCP server:

"Get the structure of my Figma file with key abc123XYZ"

"Show me all components in this design file"

"Export frame 1:42 as an SVG"

"What text styles are defined in this design?"

"Extract the layout specs for nodes 1:2 and 3:4"

"List all color styles and convert them to a Tailwind config"

"Get the login page frame and describe the UI elements"

API Reference

get_figma_file

get_frame_nodes

list_components

list_styles

export_assets

Running Tests

pytest tests/ -v

License

This project is licensed under the MIT License. Copyright © 2026 Aditya Saxena / anakintano