Claude Talk to Figma MCP

A Model Context Protocol (MCP) plugin that allows Claude Desktop and other AI tools (GitHub Copilot, Cursor, etc.) to interact directly with Figma, enabling powerful AI-assisted design capabilities.

Based on claude-talk-to-figma-mcp by Xúlio Zé, which itself was adapted from cursor-talk-to-figma-mcp by Sonny Lazuardi. This is a maintained fork with improvements and customizations.

Maintained by

Joshua Chisnerman — stranyer.com · GitHub

⚡ Installation

1. Prerequisites

• Claude Desktop or Cursor

• Figma Desktop

• Node.js installed

2. Setup

The Pro Way 🚀

If you already have Node.js installed, first navigate to the folder where you want to install the MCP and simply run:

This single command will clone the repository, install optimized dependencies (Bun), and start the socket server for you automatically.

Manual Way 🛠️

Use this if you prefer a manual setup:

• macOS/Linux: bun run build

• Windows: bun run build:win

3. AI client configuration

Option 1: DXT Package (Claude Desktop only)

1. Download: Get the latest claude-talk-to-figma-mcp.dxt from releases

2. Install: Double-click the .dxt file → Claude Desktop installs automatically

Option 2: JSON (Claude Desktop or Cursor)

• Claude Desktop: Run bun run configure-claude (restart Claude Desktop)

• Cursor:

  1. Go to Cursor Settings → Tools & Integrations

  2. Click "New MCP Server" to open mcp.json config (screenshot)

  3. Add this configuration:

  { "mcpServers": { "ClaudeTalkToFigma": { "command": "bunx", "args": ["claude-talk-to-figma-mcp@latest"] } } }

  4. Save the file (screenshot)

4. Setup Figma Plugin (Required for all methods)

Import src/claude_mcp_plugin/manifest.json in Figma → Menu → Plugins → Development

5. First Connection

1. Start server: bun socket (verify at http://localhost:3055/status)

2. Connect plugin: Open Claude MCP Plugin in Figma → copy channel ID

3. Test: Ask your AI client: "Talk to Figma, channel {channel-ID}"

✅ Success: Your AI should confirm connection and you can start designing!

🚀 Core Concepts

How It Works

Simple: Claude sends design commands → Figma executes them in real-time Bidirectional: Get info from Figma, create/modify elements, manage components

Key Capabilities

• Document Interaction: Analyze designs, get selections, export assets

• Element Creation: Shapes, text, frames with full styling control

• Smart Modifications: Colors, effects, auto-layout, responsive design

• Text Mastery: Advanced typography, font loading, text scanning

• Component Integration: Local and team library components

🛠️ Usage Patterns

Getting Started with AI Design

1. Make Claude a UX expert: Use this prompt 🎨

2. Connect to your project: "Talk to Figma, channel {channel-ID}"

3. Start designing: "Create a mobile app login screen with modern styling"

Effective Prompting Examples

📚 Command Reference

📄 Document Tools

🔧 Creation Tools

✏️ Modification Tools

📝 Text Tools

🎨 Component Tools

Building DXT Package (Developers)

To create your own DXT package:

This creates claude-talk-to-figma-mcp.dxt ready for distribution.

🧪 Testing & Quality Assurance

Automated Testing

Integration Testing

Manual Verification Checklist

• WebSocket server starts on port 3055

• Figma plugin connects and generates channel ID

• AI tool recognizes "ClaudeTalkToFigma" MCP (Claude Desktop, Cursor, etc.)

• Basic commands execute (create rectangle, change color)

• Error handling works (invalid commands, timeouts)

• Channel communication works between AI tool and Figma

🐛 Troubleshooting & Support

Connection Issues

• "Can't connect to WebSocket": Ensure bun socket is running

• "Plugin not found": Verify plugin import in Figma Development settings

• "MCP not available":

  • Claude Desktop: Run bun run configure-claude and restart Claude

  • Cursor IDE: Check MCP configuration in mcp.json file

  • Other AI tools: Verify MCP integration settings

Execution Problems

• "Command failed": Check Figma development console for errors

• "Font not found": Use load_font_async to verify font availability

• "Permission denied": Ensure you have edit access to the Figma document

• "Timeout errors": Complex operations may need retry

Performance Issues

• Slow responses: Large documents may require more processing time

• Memory usage: Close unused Figma tabs, restart if necessary

• WebSocket disconnects: Server auto-reconnects, restart if persistent

Common Solutions

1. Restart sequence: Stop server → Close AI tool → Restart both

2. Clean reinstall: Delete node_modules → bun install → bun run build

3. Check logs: Server terminal shows detailed error messages

4. Update fonts: Some team fonts require manual loading in Figma

5. Configuration check: Verify MCP setup in your AI tool's settings

6. Port conflicts: Ensure port 3055 is not used by other applications

🏗️ Advanced Topics

Architecture Deep Dive

Design Principles:

• MCP Server: Business logic, validation, default values

• WebSocket Server: Message routing and protocol translation

• Figma Plugin: Pure command executor in Figma context

Benefits:

• Clear separation of concerns

• Easy testing and maintenance

• Scalable architecture for additional tools

Project Structure

📄 License & Credits

License: MIT License - see LICENSE file

Original Authors:

• Xúlio Zé — Claude adaptation — GitHub

• Sonny Lazuardi — Original cursor-talk-to-figma-mcp — GitHub

This fork maintained by:

• Joshua Chisnerman — stranyer.com · GitHub

Acknowledgments:

• Anthropic team for Claude and Model Context Protocol

• Figma community for excellent plugin API

• Bun team for fast JavaScript runtime