Integrations
Enables creating and manipulating designs in Figma through either a Figma plugin or directly via the Figma API, supporting operations like creating projects, frames, components, layouts, interactions, retrieving file information, and exporting assets.
Claude Figma MCP
A Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.
Overview
This project offers two approaches for Claude to interact with Figma:
- Plugin Approach: Uses a Figma plugin to execute commands in Figma's UI
- Allows creating and manipulating designs from scratch
- Requires running the Figma plugin in the Figma application
- API Approach: Uses the Figma REST API directly
- Allows retrieving and exporting existing Figma files
- Works without opening Figma, but has more limited creation capabilities
- Requires a Figma API key
Installation
Using NPM (Recommended)
Install the package globally:
Or run it directly with npx:
Running from Local Source
- Clone this repository
- Install dependencies with
npm install
- Build the TypeScript code with
npm run build
- Run the server with
npm start
(HTTP mode) ornpm run start:cli
(STDIO mode)
Setting Up Claude Desktop Integration
Standard Approach (NPM Package)
Add the following to your Claude Desktop configuration file:
Figma API Approach
If you prefer using the Figma API directly (more reliable but with fewer creation capabilities):
Simplified Server Option
For environments where the standard server has issues, we provide a simplified server:
Setting up the Figma Plugin (Plugin Approach Only)
- Open Figma and go to Menu → Plugins → Development → Import plugin from manifest...
- Select the
figma-plugin/manifest.json
file from this repository - The plugin should now be available in your Figma plugins menu
Usage
Plugin Approach
- Start the MCP server in HTTP mode
- Open Figma and run the Claude MCP Integration plugin
- Click "Connect to MCP Server" in the plugin UI
- In Claude, use the Figma MCP tool to interact with Figma
API Approach
- Start the MCP server with your Figma API key
- In Claude, use the Figma MCP tool to interact with Figma files
- No need to open Figma - operations happen directly via the API
Available Tools
Plugin Approach Tools
create_project
: Create a new Figma projectcreate_frame
: Create a new frame/artboardcreate_rectangle
: Create a rectangle elementcreate_text
: Create a text elementcreate_component
: Create pre-defined UI components (buttons, inputs, etc.)create_layout
: Create common layout patterns (headers, footers, etc.)create_interaction
: Create interactive prototyping connections between elementsexport_frame
: Export a frame as an image
API Approach Tools
get_file
: Retrieve information about a Figma fileget_file_nodes
: Get specific nodes from a Figma fileget_comments
: Retrieve comments from a Figma filepost_comment
: Add a comment to a Figma fileget_team_components
: List components from a teamexport_image
: Export a frame or node as an image
Example Claude Prompts
Plugin Approach Examples
API Approach Examples
Configuration
The server can be configured using environment variables or command-line arguments:
Environment Variables
PORT
: HTTP server port (default: 3000)WEBSOCKET_PORT
: WebSocket server port for Figma plugin communication (default: 8080)FIGMA_API_KEY
: Figma API key (required for API approach)
Command Line Arguments
--port
: HTTP server port--websocket-port
: WebSocket server port--figma-api-key
: Figma API key--stdio
: Run in stdio mode (for Claude Desktop integration)
Troubleshooting
Connection Issues with Claude Desktop
If you have issues with the default server, try the simplified server option:
Plugin Can't Connect to Server
Make sure:
- The MCP server is running in HTTP mode
- The ports aren't blocked by a firewall
- The WebSocket port (default: 8080) matches in both server config and plugin
API Key Not Recognized
Ensure your Figma API key is:
- Valid and has the necessary permissions
- Correctly set in either the environment variable or command-line argument
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
This server cannot be installed
A Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.
Related MCP Servers
- AsecurityFlicenseAqualityEnables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.Last updated -2106TypeScript
- AsecurityFlicenseAqualityA Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.Last updated -18341
- -securityAlicense-qualityA Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.Last updated -1246TypeScriptMIT License
- -securityFlicense-qualityA Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.Last updated -TypeScript