MC
Developer Tools

MCP Server for Figma via Claude Desktop

Enable seamless Figma design creation, editing, and real-time collaboration via an MCP server for Claude Desktop using natural language commands.

View on GitHub

Overview

This MCP server bridges Claude Desktop and Figma so you can drive Figma files with natural language through the Model Context Protocol (MCP). It exposes a small HTTP service that translates MCP tool calls into Figma API operations — creating frames, editing layers, exporting assets, posting comments, and more — enabling design creation, iteration, and collaborative review directly from Claude Desktop.

For developers, the server acts as a programmable adapter: it accepts structured tool-invocation requests from Claude Desktop, calls Figma’s REST API, and returns structured results that the assistant can use in a conversation. That makes it easy to automate routine design tasks, prototype UI changes quickly, and incorporate human feedback in real time without switching contexts.

Features

  • Natural-language-driven Figma editing via Claude Desktop (MCP)
  • Create, modify, and delete frames, layers, and components
  • Query files, list components, and fetch node details
  • Add and fetch comments for collaborative review
  • Export assets (PNG/SVG/PDF) for delivery to engineering or design systems
  • Webhook/streaming hooks for basic real-time updates (file change notifications)
  • Simple configuration for local or containerized deployment

Installation / Configuration

Prerequisites:

  • Node.js (14+) or compatible runtime (repo ships an npm project)
  • A Figma Personal Access Token (PAT)
  • Claude Desktop configured to talk to a local MCP server (host and port)

Quick start:

git clone https://github.com/gaganmanku96/talk-with-figma-claude.git
cd talk-with-figma-claude
cp .env.example .env
# Edit .env to add your FIGMA_TOKEN and other values
npm ci
npm start

Example .env (keys you should set):

FIGMA_TOKEN=your_figma_personal_access_token_here
MCP_HOST=0.0.0.0
MCP_PORT=3333
WEBHOOK_CALLBACK_URL=http://your-public-url/webhook  # optional

Run with Docker:

docker build -t mcp-figma .
docker run -e FIGMA_TOKEN=$FIGMA_TOKEN -p 3333:3333 mcp-figma

Configure Claude Desktop to point to the server (local example):

  • MCP Host: http://localhost:3333
  • MCP Manifest endpoint: http://localhost:3333/mcp/manifest (or /manifest depending on your Claude setup)

Available Tools / Resources

The server exposes a collection of tools (MCP-style) that map to Figma operations. Below is a representative list; check the server’s manifest (/mcp/manifest) for the exact tool signatures.

Tool namePurposeExample args
create_frameCreate a new frame/page in a file{ fileKey, pageName, frameName, width, height }
edit_nodeModify node properties (text, fills, size){ fileKey, nodeId, changes }
list_componentsList components in a file/page{ fileKey, pageName }
fetch_fileRetrieve file document / node tree{ fileKey }
add_commentAdd a comment to a file at coordinates{ fileKey, message, x, y }
export_assetsExport node(s) as PNG/SVG/PDF{ fileKey, nodeId, format, scale }
watch_fileSubscribe to basic changes or poll for updates{ fileKey }

Typical MCP request format (from Claude Desktop -> server):

{
  "tool": "edit_node",
  "args": {
    "fileKey": "AbCdEf123",
    "nodeId": "12:345",
    "changes": {
      "characters": "Update button text",
      "fills": [{ "type": "SOLID", "color": { "r": 0, "g": 0.5, "b": 1 } }]
    }
  }
}

Typical server response:

{
  "ok": true,
  "result": { "nodeId": "12:345", "updated": true },
  "message": "Text updated and fills changed"
}

Use Cases

  1. Create a new onboarding screen from a prompt

    • Prompt: “Create a 375x812 onboarding frame titled ‘Welcome’ with a hero image placeholder and a primary blue CTA that says ‘Get Started’.”
    • What happens: Claude sends a create_frame tool invocation; the server creates the frame, adds rectangle + text nodes, and returns node IDs and preview image URLs.

  2. Update a component across the file

    • Prompt: “Change the primary button color to #0a84ff and update its label to ‘Continue’ across the design system.”
    • What happens: Claude calls list_components to find the button component, then edit_node operations to update fills and text on the master component, propagating changes.

  3. Run a design review and collect feedback

    • Prompt: “Add a comment at (120, 420) on Page ‘SignUp’ saying: ‘Reduce top padding, align to baseline grid.’”
    • What happens: add_comment tool is invoked and the server returns a link to the comment in Figma; you can fetch comments or poll watch_file for replies
Tags:developer-tools