talktofigma-desktop-mcp

# TalkToFigma Desktop MCP > Skill by [ara.so](https://ara.so) — Design Skills collection. TalkToFigma Desktop is a cross-platform desktop application that bridges Figma and AI coding assistants through the Model Context Protocol (MCP). It provides 50+ MCP tools for reading and manipulating Figma designs, enabling AI agents to directly interact with design files through a WebSocket server and stdio-based MCP servers. ## Architecture Overview ``` MCP Client (Cursor/Claude Code) → stdio MCP Server → WebSocket (port 3055) → Desktop App → Figma Plugin ``` The desktop app manages: - **WebSocket server** on port 3055 for real-time communication - **stdio MCP servers** spawned independently by each AI client - **Channel-based routing** for multi-client support - **System tray interface** for server management ## Installation ### 1. Install Desktop Application Download from [GitHub Releases](https://github.com/grab/TalkToFigmaDesktop/releases): - **macOS**: `TalkToFigma-v*.*.*.zip` (Universal binary) - **Windows**: `TalkToFigma-v*.*.*.exe` **First run on macOS**: Right-click app → "Open" → "Open" (bypass Gatekeeper) **First run on Windows**: SmartScreen → "More info" → "Run anyway" ### 2. Install Figma Plugin Install the [Talk to Figma MCP Plugin](https://www.figma.com/community/plugin/1485687494525374295/talk-to-figma-mcp-plugin) from Figma Community. ### 3. Configure MCP Client **For Cursor, Claude Code, or VS Code with Cline:** 1. Launch TalkToFigma Desktop 2. Right-click tray icon → "Settings" 3. Copy the MCP configuration path shown 4. Add to your MCP client config: **macOS** (`~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json`): ```json { "mcpServers": { "TalkToFigmaDesktop": { "command": "node", "args": [ "/Users/yourname/Library/Application Support/TalkToFigma/mcp-server.cjs" ] } } } ``` **Windows Direct Install** (`%APPDATA%\Cursor\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json`): ```json { "mcpServers": { "TalkToFigmaDesktop": { "command": "node", "args": [ "%APPDATA%\\TalkToFigma\\mcp-server.cjs" ] } } } ``` **Windows Store/MSIX**: Use the exact path from Settings page (usually under `%LOCALAPPDATA%\Packages\...\LocalCache\Roaming\TalkToFigma\mcp-server.cjs`) ## Starting the Server 1. **Launch TalkToFigma Desktop** from Applications/Start Menu 2. **Start WebSocket server**: Right-click tray icon → "Start Server" 3. **Verify status**: Tray icon should show green (🟢 Active) 4. **Open Figma**: Run the Talk to Figma MCP plugin 5. **Connect**: Plugin should show "Connected" status ## MCP Tools Reference ### Core Connection Tools #### `join_channel` Join a Figma file channel to start interacting with it. **Parameters:** - `channel` (string): Format `{file_key}:{page_id}:{view_id}` **Usage:** ```typescript // Extract from Figma URL: https://www.figma.com/design/ABC123/Project?node-id=1-2&t=xyz // Format: ABC123:1:2 await use_mcp_tool("TalkToFigmaDesktop", "join_channel", { channel: "ABC123:1:2" }); ``` #### `leave_channel` Leave the current Figma file channel. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "leave_channel", {}); ``` ### Reading Design Data #### `get_current_page` Get the currently active page in Figma. ```typescript const page = await use_mcp_tool("TalkToFigmaDesktop", "get_current_page", {}); // Returns: { id: "1:2", name: "Page 1", type: "PAGE" } ``` #### `get_node_by_id` Retrieve a specific node by its ID. ```typescript const node = await use_mcp_tool("TalkToFigmaDesktop", "get_node_by_id", { nodeId: "123:456" }); // Returns complete node data including children, properties, styles ``` #### `get_all_nodes` Get all nodes in the current page with optional filtering. ```typescript const allFrames = await use_mcp_tool("TalkToFigmaDesktop", "get_all_nodes", { type: "FRAME" }); const allComponents = await use_mcp_tool("TalkToFigmaDesktop", "get_all_nodes", { type: "COMPONENT" }); ``` #### `search_nodes` Search for nodes by name or type. ```typescript const buttons = await use_mcp_tool("TalkToFigmaDesktop", "search_nodes", { query: "Button", type: "COMPONENT" }); ``` #### `get_selection` Get currently selected nodes in Figma. ```typescript const selection = await use_mcp_tool("TalkToFigmaDesktop", "get_selection", {}); // Returns: [{ id: "123:456", name: "Selected Frame", type: "FRAME" }] ``` ### Creating and Modifying Nodes #### `create_rectangle` Create a rectangle node. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "create_rectangle", { name: "Background", x: 0, y: 0, width: 375, height: 812, fills: JSON.stringify([{ type: "SOLID", color: { r: 0.95, g: 0.95, b: 0.95 } }]) }); ``` #### `create_frame` Create a frame container. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "create_frame", { name: "Mobile Screen", x: 100, y: 100, width: 375, height: 812 }); ``` #### `create_text` Create a text node. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "create_text", { name: "Heading", characters: "Welcome to TalkToFigma", x: 20, y: 40, fontSize: 24, fontName: JSON.stringify({ family: "Inter", style: "Bold" }) }); ``` #### `create_component` Create a reusable component. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "create_component", { name: "Button/Primary", x: 0, y: 0, width: 120, height: 44 }); ``` #### `set_properties` Modify properties of existing nodes. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "set_properties", { nodeId: "123:456", properties: JSON.stringify({ name: "Updated Button", x: 50, y: 50, fills: [{ type: "SOLID", color: { r: 0.2, g: 0.4, b: 0.8 } }] }) }); ``` #### `delete_node` Delete a node by ID. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "delete_node", { nodeId: "123:456" }); ``` ### Layout and Positioning #### `set_auto_layout` Apply auto layout to a frame. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "set_auto_layout", { nodeId: "123:456", mode: "VERTICAL", padding: 16, spacing: 12, primaryAxisAlignItems: "MIN", counterAxisAlignItems: "CENTER" }); ``` #### `group_nodes` Group multiple nodes together. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "group_nodes", { nodeIds: JSON.stringify(["123:456", "123:457", "123:458"]), name: "Button Group" }); ``` ### Styles and Design Tokens #### `get_local_paint_styles` Get all local color styles. ```typescript const colors = await use_mcp_tool("TalkToFigmaDesktop", "get_local_paint_styles", {}); // Returns: [{ id: "S:...", name: "Primary/Blue", paints: [...] }] ``` #### `get_local_text_styles` Get all local text styles. ```typescript const textStyles = await use_mcp_tool("TalkToFigmaDesktop", "get_local_text_styles", {}); // Returns: [{ id: "S:...", name: "Heading/H1", fontSize: 32, ... }] ``` #### `create_paint_style` Create a new color style. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "create_paint_style", { name: "Brand/Primary", paints: JSON.stringify([{ type: "SOLID", color: { r: 0.2, g: 0.4, b: 0.8 } }]) }); ``` #### `apply_paint_style` Apply a color style to a node. ```typescript await use_mcp_tool("TalkToFigmaDesktop", "apply_paint_style", { nodeId: "123:456", styleId: "S:abc123..." }); ``` ### Export and Assets #### `export_node` Export a node as an image. ```typescript const imageData = await use_mcp_tool("TalkToFigmaDesktop", "export_node", { nodeId: "123:456", format: "PNG", scale: 2 }); // Returns base64-encoded image data ``` #### `get_image_fills` Get image fill data from nodes. ```typescript const images = await use_mcp_tool("TalkToFigmaDesktop", "get_image_fills", { nodeId: "123:456" }); ``` ## Common Workflows ### Extract Design Tokens ```typescript // 1. Join the Figma file await use_mcp_tool("TalkToFigmaDesktop", "join_channel", { channel: "FILE_KEY:PAGE_ID:VIEW_ID" }); // 2. Get all color styles const colors = await use_mcp_tool("TalkToFigmaDesktop", "get_local_paint_styles", {}); // 3. Get all text styles const typography = await use_mcp_tool("TalkToFigmaDesktop", "get_local_text_styles", {}); // 4. Convert to design tokens const tokens = { colors: colors.map(style => ({ name: style.name.replace(/\//g, '-'), value: rgbToHex(style.paints[0].color) })), typography: typography.map(style => ({ name: style.name.replace(/\//g, '-'), fontSize: style.fontSize, fontFamily: style.fontName.family, fontWeight: style.fontName.style })) }; ``` ### Build Component Library ```typescript // 1. Search for all components const components = await use_mcp_tool("TalkToFigmaDesktop", "get_all_nodes", { type: "COMPONENT" }); // 2. For each component, get detailed properties for (const comp of components) { const details = await use_mcp_tool("TalkToFigmaDesktop", "get_node_by_id", { nodeId: comp.id }); // 3. Generate React component code const componentCode = generateReactComponent(details); // Write to file system... }