figma_mcp

MCP.Pizza Chef: nmfisher

figma_mcp is an MCP client that enables large language models to interact with Figma's plugin API. It supports basic design operations such as object selection, changing fill and stroke colors, creating basic shapes, and exporting nodes to PNG. Although currently in an early and limited state, it facilitates automated design workflows and integration of LLMs with Figma for enhanced creative control.

Use This MCP client To

Automate selection and modification of design objects in Figma Change fill and stroke colors of design elements programmatically Create basic shapes within Figma using natural language commands Export design nodes as PNG images for external use Integrate LLM-driven workflows with Figma design projects Enable AI-assisted design editing and prototyping in Figma

README

MCP server for Figma client

This is an (unofficial) MCP server to let LLM clients interact with Figma's plugin API.

This is a very early version, so only a small subset of functionality is exposed:

  • object selection
  • change fill/stroke color
  • create basic shapes
  • export node to PNG.

Even these features aren't very robust, so it's not very reliable at this stage.

Please feel free to fork and submit PRs for improvements/features.

Prequisites & installation

Figma plugin

  • node >= v20.18.1
git clone git@github.com:nmfisher/figma_mcp.git 
cd figma_mcp
pushd plugin && npm run build && popd

In Figma, right-click and Plugins->Development->Import plugin from Manifest, and select the manifest.json file at figma_mcp/plugin/dist.

The plugin won't connect to the MCP server immediately - this will happen automatically when your MCP client (e.g. Claude Desktop) tries to connect to the MCP server.

MCP server

pushd server && uv pip install --requirement pyproject.toml && popd

If you are using Claude Desktop, add the following to your /Users/{username}/Library/Application Support/Claude/claude_desktop_config.json file:

    "figma":{
        "command": "/path/to/figma_mcp/server/.venv/bin/python", 
        "args":["/path/to/figma_mcp/server/figma.py"],
        "enabled": true
    }

Implementation

This uses websockets to create a connection between the MCP server and the Figma plugin.

figma_mcp FAQ

How do I install the figma_mcp client?
Clone the repository, build the plugin with npm, and import it into Figma via Plugins->Development->Import plugin from Manifest.
What prerequisites are needed to run figma_mcp?
You need Node.js version 20.18.1 or higher and access to Figma's plugin environment.
How does figma_mcp connect to the MCP server?
The plugin connects automatically when an MCP client like Claude Desktop attempts to connect to the MCP server.
Is figma_mcp fully stable and feature-complete?
No, it is an early version with limited functionality and may not be fully reliable yet.
Can I contribute to figma_mcp development?
Yes, the project is open for forks and pull requests to improve features and stability.
What design operations does figma_mcp currently support?
It supports object selection, changing fill/stroke colors, creating basic shapes, and exporting nodes to PNG.
Does figma_mcp support advanced Figma plugin API features?
Currently, only a small subset of features is exposed; advanced features are not yet supported.
Which MCP clients can work with figma_mcp?
It is designed to work with MCP clients like Claude Desktop and others that support MCP protocol.