talktofigma-desktop-mcp

Q: How do I install talktofigma-desktop-mcp?

Run npx skills add https://github.com/reason-machines/design-skills --skill talktofigma-desktop-mcp in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/talktofigma-desktop-mcp/ (personal) or .claude/skills/talktofigma-desktop-mcp/ (project).

by reason-machinesAI & Agents

Bridge Figma designs with AI assistants using TalkToFigma Desktop via Model Context Protocol

Installs: 115
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/design-skills --skill talktofigma-desktop-mcp

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads talktofigma-desktop-mcp automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

TalkToFigma Desktop MCP

Skill by 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:

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 from Figma Community.

3. Configure MCP Client

For Cursor, Claude Code, or VS Code with Cline:

Launch TalkToFigma Desktop
Right-click tray icon → "Settings"
Copy the MCP configuration path shown
Add to your MCP client config:

macOS (~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.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):

{
  "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

Launch TalkToFigma Desktop from Applications/Start Menu
Start WebSocket server: Right-click tray icon → "Start Server"
Verify status: Tray icon should show green (🟢 Active)
Open Figma: Run the Talk to Figma MCP plugin
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:

// 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.

await use_mcp_tool("TalkToFigmaDesktop", "leave_channel", {});

Reading Design Data

`get_current_page`

Get the currently active page in Figma.

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.

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.

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.

const buttons = await use_mcp_tool("TalkToFigmaDesktop", "search_nodes", {
  query: "Button",
  type: "COMPONENT"
});

`get_selection`

Get currently selected nodes in Figma.

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.

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.

await use_mcp_tool("TalkToFigmaDesktop", "create_frame", {
  name: "Mobile Screen",
  x: 100,
  y: 100,
  width: 375,
  height: 812
});

`create_text`

Create a text node.

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.

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.

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.

await use_mcp_tool("TalkToFigmaDesktop", "delete_node", {
  nodeId: "123:456"
});

Layout and Positioning

`set_auto_layout`

Apply auto layout to a frame.

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.

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.

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.

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.

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.

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.

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.

const images = await use_mcp_tool("TalkToFigmaDesktop", "get_image_fills", {
  nodeId: "123:456"
});

Common Workflows

Extract Design Tokens

// 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

// 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...
}

Sync Design Changes to Code

// 1. Get current selection in Figma
const selection = await use_mcp_tool("TalkToFigmaDesktop", "get_selection", {});

// 2. For each selected node
for (const node of selection) {
  const nodeData = await use_mcp_tool("TalkToFigmaDesktop", "get_node_by_id", {
    nodeId: node.id
  });
  
  // 3. Update corresponding code file
  const cssProperties = {
    width: `${nodeData.width}px`,
    height: `${nodeData.height}px`,
    backgroundColor: rgbToHex(nodeData.fills[0].color),
    borderRadius: `${nodeData.cornerRadius}px`
  };
  
  // Update CSS/styled-components...
}

Create UI from Specification

// 1. Join channel
await use_mcp_tool("TalkToFigmaDesktop", "join_channel", {
  channel: "FILE_KEY:PAGE_ID:VIEW_ID"
});

// 2. Create mobile frame
await use_mcp_tool("TalkToFigmaDesktop", "create_frame", {
  name: "Mobile/Login",
  x: 0,
  y: 0,
  width: 375,
  height: 812
});

// 3. Get the created frame
const frames = await use_mcp_tool("TalkToFigmaDesktop", "search_nodes", {
  query: "Mobile/Login",
  type: "FRAME"
});
const frameId = frames[0].id;

// 4. Set auto layout
await use_mcp_tool("TalkToFigmaDesktop", "set_auto_layout", {
  nodeId: frameId,
  mode: "VERTICAL",
  padding: 24,
  spacing: 16
});

// 5. Add heading
await use_mcp_tool("TalkToFigmaDesktop", "create_text", {
  name: "Title",
  characters: "Welcome Back",
  fontSize: 28,
  fontName: JSON.stringify({ family: "Inter", style: "Bold" })
});

// 6. Add input fields, buttons, etc.

Configuration

Environment Variables

TalkToFigma Desktop doesn't require API keys, but the stdio server path varies by platform:

# macOS
TALKTOFIGMA_STDIO_PATH="$HOME/Library/Application Support/TalkToFigma/mcp-server.cjs"

# Windows (Direct Install)
TALKTOFIGMA_STDIO_PATH="%APPDATA%\TalkToFigma\mcp-server.cjs"

# Windows (Store/MSIX)
# Check Settings page for exact path under LocalCache

WebSocket Port

Default port: 3055

To verify the server is running:

# macOS/Linux
lsof -i :3055

# Windows
netstat -ano | findstr :3055

Multi-Client Setup

Each AI client spawns its own stdio server process. All connect to the same WebSocket server (port 3055).

Cursor config (~/.cursor/mcp.json):

{
  "mcpServers": {
    "TalkToFigmaDesktop": {
      "command": "node",
      "args": ["/path/to/mcp-server.cjs"]
    }
  }
}

Claude Code config (~/.claude/mcp.json):

{
  "mcpServers": {
    "TalkToFigmaDesktop": {
      "command": "node",
      "args": ["/path/to/mcp-server.cjs"]
    }
  }
}

Troubleshooting

Server Won't Start

Check logs:

Right-click tray icon → "Terminal"
Look for error messages

Common issues:

Port 3055 already in use: Kill conflicting process or restart
Firewall blocking: Allow TalkToFigma through firewall

macOS port check:

lsof -i :3055
kill -9 <PID>

Windows port check:

netstat -ano | findstr :3055
taskkill /PID <PID> /F

Plugin Can't Connect

Verify:

Desktop app is running (tray icon visible)
WebSocket server is active (green icon 🟢)
Figma plugin is running in the same file

Reset connection:

Right-click tray → "Stop Server"
Wait 5 seconds
Right-click tray → "Start Server"
Restart Figma plugin

MCP Client Can't Find Server

Check stdio path:

macOS:

ls -la ~/Library/Application\ Support/TalkToFigma/mcp-server.cjs

Windows:

dir "%APPDATA%\TalkToFigma\mcp-server.cjs"

If missing:

Restart TalkToFigma Desktop (installs stdio server on launch)
Check Settings page for correct path
Manually verify file exists

Channel Not Joined Error

Always call join_channel before any other operations:

// Extract channel from Figma URL
// https://www.figma.com/design/ABC123/Project?node-id=1-2
const channel = "ABC123:1:2";

await use_mcp_tool("TalkToFigmaDesktop", "join_channel", { channel });

// Now other operations work
const page = await use_mcp_tool("TalkToFigmaDesktop", "get_current_page", {});

Node ID Format Issues

Figma node IDs use format 123:456. Extract from:

Plugin selection: figma.currentPage.selection[0].id
URL parameters: node-id=123-456 → convert to 123:456

// Convert URL format to ID format
const nodeId = urlNodeId.replace(/-/g, ':'); // "123-456" → "123:456"

Building from Source

# Clone repository
git clone https://github.com/grab/TalkToFigmaDesktop.git
cd TalkToFigmaDesktop

# Install dependencies
npm install

# Development mode
npm start

# Build package
npm run package

# Create installer
npm run make

Output locations:

Development: Electron starts with hot reload
Package: out/TalkToFigma-{platform}-{arch}/
Installers: out/make/

API Reference Summary

Tool	Purpose	Key Parameters
`join_channel`	Connect to Figma file	`channel`
`get_current_page`	Get active page	-
`get_node_by_id`	Fetch node details	`nodeId`
`get_all_nodes`	List all nodes	`type` (optional)
`search_nodes`	Search by name/type	`query`, `type`
`get_selection`	Get selected nodes	-
`create_rectangle`	Create rectangle	`x`, `y`, `width`, `height`
`create_frame`	Create frame	`x`, `y`, `width`, `height`
`create_text`	Create text	`characters`, `fontSize`
`create_component`	Create component	`name`, `width`, `height`
`set_properties`	Update node	`nodeId`, `properties`
`delete_node`	Remove node	`nodeId`
`set_auto_layout`	Apply auto layout	`nodeId`, `mode`, `padding`
`get_local_paint_styles`	Get color styles	-
`get_local_text_styles`	Get text styles	-
`export_node`	Export as image	`nodeId`, `format`, `scale`

Full tool list available in desktop app Terminal logs on startup.

FAQ

What does the talktofigma-desktop-mcp skill do?

Bridge Figma designs with AI assistants using TalkToFigma Desktop via Model Context Protocol

How do I install talktofigma-desktop-mcp?

Run npx skills add https://github.com/reason-machines/design-skills --skill talktofigma-desktop-mcp in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/talktofigma-desktop-mcp/ (personal) or .claude/skills/talktofigma-desktop-mcp/ (project).

Which AI agents can use talktofigma-desktop-mcp?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is talktofigma-desktop-mcp safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains talktofigma-desktop-mcp?

It is published by reason-machines in reason-machines/design-skills. It has 115 recorded installs.

Popular ai & agents skills

View category →

google-agents-cli-publish

google/agents-cli

This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).

AI & Agents513.9K installs

google-agents-cli-eval

google/agents-cli

This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).

AI & Agents513.5K installs

skill-creator

anthropics/skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

OfficialAI & Agents416.4K installs

codex-pet

prime-skills/runcomfy-agent-skills

Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.

AI & Agents402.1K installs

full-output-enforcement

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

AI & Agents401K installs

executing-plans

obra/superpowers

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

AI & Agents245.7K installs

talktofigma-desktop-mcp

Install

Install

Describe the task

Review the result

SKILL.md

TalkToFigma Desktop MCP

Architecture Overview

Installation

1. Install Desktop Application

2. Install Figma Plugin

3. Configure MCP Client

Starting the Server

MCP Tools Reference

Core Connection Tools

join_channel

leave_channel

Reading Design Data

get_current_page

get_node_by_id

get_all_nodes

search_nodes

get_selection

Creating and Modifying Nodes

create_rectangle

create_frame

create_text

create_component

set_properties

delete_node

Layout and Positioning

set_auto_layout

group_nodes

Styles and Design Tokens

get_local_paint_styles

get_local_text_styles

create_paint_style

apply_paint_style

Export and Assets

export_node

get_image_fills

Common Workflows

Extract Design Tokens

Build Component Library

Sync Design Changes to Code

Create UI from Specification

Configuration

Environment Variables

WebSocket Port

Multi-Client Setup

Troubleshooting

Server Won't Start

Plugin Can't Connect

MCP Client Can't Find Server

Channel Not Joined Error

Node ID Format Issues

Building from Source

API Reference Summary

FAQ

More from reason-machines/design-skills

Popular ai & agents skills

`join_channel`

`leave_channel`

`get_current_page`

`get_node_by_id`

`get_all_nodes`

`search_nodes`

`get_selection`

`create_rectangle`

`create_frame`

`create_text`

`create_component`

`set_properties`

`delete_node`

`set_auto_layout`

`group_nodes`

`get_local_paint_styles`

`get_local_text_styles`

`create_paint_style`

`apply_paint_style`

`export_node`

`get_image_fills`