Claude Talk to Figma
Enables AI assistants like Claude and Cursor to interact directly with Figma to create, modify, and analyze design elements in real-time. It provides a comprehensive suite of tools for document inspection, styling, component management, and automated
What is Claude Talk to Figma?
Claude Talk to Figma is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to enables ai assistants like claude and cursor to interact directly with figma to create, modify, and analyze design elements in real-time. it provides a comprehensive suite of tools for document inspec...
Enables AI assistants like Claude and Cursor to interact directly with Figma to create, modify, and analyze design elements in real-time. It provides a comprehensive suite of tools for document inspection, styling, component management, and automated
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Enables AI assistants like Claude and Cursor to interact dir
Use Cases
Maintainer
Works with
Installation
NPM
npx -y claude-talk-to-figma-mcpManual Installation
npx -y claude-talk-to-figma-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Claude Talk to Figma
Claude Talk to Figma MCP is a TypeScript-based MCP server that enables AI assistants — including Claude Desktop, Claude Code, Cursor, Windsurf, and GitHub Copilot — to read, create, and modify Figma designs in real time through a WebSocket bridge and a companion Figma plugin. It exposes a comprehensive suite of tools covering document inspection, text scanning, style extraction, element creation (shapes, text, frames), component management, and property modification (colors, borders, shadows, auto-layout, typography). Designers and developers use it to automate repetitive design tasks, generate UI from descriptions, and keep code and design in sync without switching between tools.
Prerequisites
- Node.js 18 or later installed (or Bun for faster startup)
- Figma desktop app installed with a Figma account
- An MCP-compatible client: Claude Desktop, Claude Code, Cursor, Windsurf, VS Code + GitHub Copilot, Cline, or Roo Code
- The claude-talk-to-figma-mcp npm package (installed automatically via npx)
Install and start the MCP server
Run the package via npx to install and start the WebSocket server in one command. On subsequent sessions use 'npm run socket' from the project directory.
npx -y claude-talk-to-figma-mcpInstall the Figma plugin
In Figma, go to Menu > Plugins > Development > 'Import plugin from manifest', then select the manifest file from the cloned package directory.
# Manifest location (after npx installs the package):
# node_modules/claude-talk-to-figma-mcp/src/claude_mcp_plugin/manifest.jsonRun the Figma plugin and get the channel ID
Open a Figma file, run the Claude MCP plugin from the Plugins menu, and copy the channel ID it displays.
Configure your MCP client
Add the server to your MCP client configuration using the npx command and the claude-talk-to-figma-mcp-server entrypoint.
Connect the AI to Figma
In your AI client, tell the assistant to connect to Figma using the channel ID from the plugin. Then start giving design instructions.
Claude Talk to Figma Examples
Client configuration
Add this block to your claude_desktop_config.json or Cursor mcp.json to register the Figma MCP server.
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
}
}
}Prompts to try
These prompts work once the AI is connected to Figma via the channel ID from the plugin.
- "Connect to Figma, channel {your-channel-id}, then get the current document structure."
- "Create a blue rectangle 400x200px in the current Figma frame and label it 'Hero Banner'."
- "Scan all text layers in this Figma file and list any that use a font size smaller than 12px."
- "Change the background color of the selected frame to #F5F5F5 and add a 1px border in #E0E0E0."
- "Find the 'Button/Primary' component and create 3 instances of it spaced 16px apart horizontally."Troubleshooting Claude Talk to Figma
AI says 'could not connect to Figma' or connection times out
Ensure the WebSocket server is running (npx claude-talk-to-figma-mcp in a terminal) and that the Figma plugin is open in an active Figma file. The channel ID from the plugin must match what you give the AI.
Figma plugin does not appear in the Plugins menu
The plugin must be imported from the manifest file, not installed from the Figma Community. Go to Plugins > Development > Import plugin from manifest and select the manifest.json in the node_modules directory.
Commands work in Claude Desktop but not in Cursor or VS Code
Different clients use different config file locations. For Cursor use mcp.json (not claude_desktop_config.json). For VS Code + GitHub Copilot, add the server under 'mcp.servers' in settings.json. Consult the repository's COMMANDS.md for client-specific setup.
Frequently Asked Questions about Claude Talk to Figma
What is Claude Talk to Figma?
Claude Talk to Figma is a Model Context Protocol (MCP) server that enables ai assistants like claude and cursor to interact directly with figma to create, modify, and analyze design elements in real-time. it provides a comprehensive suite of tools for document inspection, styling, component management, and automated It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Claude Talk to Figma?
Install via npm with the command: npx -y claude-talk-to-figma-mcp. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Claude Talk to Figma?
Claude Talk to Figma works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Claude Talk to Figma free to use?
Yes, Claude Talk to Figma is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Claude Talk to Figma Alternatives — Similar Developer Tools Servers
Looking for alternatives to Claude Talk to Figma? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Claude Talk to Figma in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Claude Talk to Figma?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.