claude-talk-to-figma-mcp

<img src="images/claude-talk-to-figma.png" alt="Claude Talk to Figma collage" /> # 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. > **Important**: This project is based on [cursor-talk-to-figma-mcp](https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp) by Sonny Lazuardi. It has been adapted to work with Claude Desktop and expanded with additional tools. Original credit belongs to Sonny Lazuardi ❤️ ## ⚡ Installation ### 1. Prerequisites - [Claude Desktop](https://claude.ai/download) or [Cursor](https://cursor.com/downloads) + [Figma Desktop](https://www.figma.com/downloads/) + [Bun](https://bun.sh) installed ### 2. Setup ```bash git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git cd claude-talk-to-figma-mcp bun install ``` - **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](https://github.com/arinspunk/claude-talk-to-figma-mcp/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](images/cursor-config-1.png)) 3. Add this configuration: ```json { "mcpServers": { "ClaudeTalkToFigma": { "command": "bunx", "args": ["claude-talk-to-figma-mcp@latest"] } } } ``` 4. Save the file ([screenshot](images/cursor-config-2.png)) ### 4. Setup Figma Plugin (Required for all methods) Import `src/claude_mcp_plugin/manifest.json` in Figma → Menu → Plugins → Development ### 4. 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 ``` Claude Desktop ↔ MCP Server ↔ WebSocket Server ↔ Figma Plugin ``` **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](prompts/prompt-ux-ui-specialist.md) 🎨 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 ``` ✅ Good: "Create a dashboard with a sidebar navigation, header with user profile, and main content area with card-based metrics" ✅ Good: "Redesign this button component with hover states and better contrast ratios" ❌ Avoid: "Make it look nice" (too vague) ``` --- ## 📚 Command Reference ### 📄 Document Tools | Command | Purpose | Example Use | |---------|---------|-------------| | `get_document_info` | Document analysis | Get project overview | | `get_selection` | Current selection | What's selected now | | `get_node_info` | Element details | Inspect specific component | | `get_nodes_info` | Multiple elements info | Batch element inspection | | `scan_text_nodes` | Find all text | Text audit and updates | | `get_styles` | Document styles | Color/text style audit | | `join_channel` | Connect to Figma | Establish communication | | `export_node_as_image` | Asset export | Generate design assets | ### 🔧 Creation Tools | Command | Purpose | Example Use | |---------|---------|-------------| | `create_rectangle` | Basic shapes | Buttons, backgrounds | | `create_frame` | Layout containers | Page sections, cards | | `create_text` | Text elements | Headlines, labels | | `create_ellipse` | Circles/ovals | Profile pics, icons | | `create_polygon` | Multi-sided shapes | Custom geometric elements | | `create_star` | Star shapes | Decorative elements | | `clone_node` | Duplicate elements | Copy existing designs | | `group_nodes` | Organize elements | Component grouping | | `ungroup_nodes` | Separate groups | Break apart components | | `insert_child` | Nest elements | Hierarchical structure | | `flatten_node` | Vector operations | Boolean operations