### MCP Figma Package Installation and Setup Commands

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

Various commands for installing the @sethdouglasford/mcp-figma package globally, using npx, and running specific setup scripts for different AI assistants.

```bash
npm install -g @sethdouglasford/mcp-figma

npx @sethdouglasford/mcp-figma

npm run setup:cursor
npm run setup:windsurf
npm run setup:github-copilot
npm run setup:claude-desktop
```

--------------------------------

### Quick Setup for Figma MCP Project

Source: https://github.com/sethdford/mcp-figma/blob/main/SETUP_SUMMARY.md

This snippet provides the essential bash commands to install project dependencies using npm and start the WebSocket server. This setup is universal and required for any supported AI assistant to interact with the Figma MCP project.

```bash
# 1. Install dependencies
npm install

# 2. Start WebSocket server  
npm run socket
```

--------------------------------

### Install MCP Figma Package via npx

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

Command to install and execute the @sethdouglasford/mcp-figma package using npx.

```bash
npx @sethdouglasford/mcp-figma@latest
```

--------------------------------

### GitHub Repository Configuration Checklist

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

Essential settings and configurations for the GitHub repository, including naming, description, topics, and feature enablement.

```APIDOC
GitHub Repository Configuration:
  Name: @sethdouglasford/mcp-figma
  Description: MCP server for Figma integration with AI assistants (Cursor, GitHub Copilot, Windsurf, Claude Desktop)
  Topics: mcp, figma, ai, cursor, copilot, windsurf, claude, model-context-protocol
  Settings:
    Enable Issues: Yes
    Enable Wiki: Optional
    Branch Protection: main branch
```

--------------------------------

### GitHub Repository Creation Command

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

Command to create a new public GitHub repository for the @sethdouglasford/mcp-figma project with a specified description.

```bash
gh repo create @sethdouglasford/mcp-figma --public --description "MCP server for Figma integration with AI assistants"
```

--------------------------------

### Project Naming Scheme Updates

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

Overview of the updated naming conventions for the project, package, plugin, and repository.

```APIDOC
Project Naming Updates:
  Project Name:
    Old: cursor-talk-to-figma-mcp
    New: @sethdouglasford/mcp-figma
  Package Name:
    Old: ai-figma-mcp
    New: @sethdouglasford/mcp-figma
  Plugin Name:
    Old: AI Figma MCP Plugin
    New: MCP Figma Plugin
  Repository:
    Expected: github.com/sethford/@sethdouglasford/mcp-figma
```

--------------------------------

### Community File Status and Recommendations

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

Status of key community files and recommendations for adding contributing guidelines, issue templates, and pull request templates.

```APIDOC
Community Files:
  README.md: Updated with new naming
  LICENSE: Already MIT
  Contributing Guidelines: Consider adding
  Issue Templates: Consider adding
  Pull Request Template: Consider adding
```

--------------------------------

### Project File Update Checklist

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

List of files that have been updated to reflect the new project naming and structure.

```APIDOC
Updated Files:
  package.json: Repository URL, name, bin, author
  scripts/setup-*.sh: Package name in all setup scripts
  readme.md: All package references updated
  smithery.yaml: Package name updated
  src/cursor_mcp_plugin/manifest.json: Plugin name and ID
  src/cursor_mcp_plugin/ui.html: All UI text updated
  src/cursor_mcp_plugin/code.js: Comments updated
```

--------------------------------

### NPM Package Build and Publish Commands

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

Commands to build and publish the @sethdouglasford/mcp-figma package to the NPM registry, including a dry run for testing.

```bash
npm run build
npm publish --dry-run

npm publish
```

--------------------------------

### VS Code Extension Installation Flow Diagram

Source: https://github.com/sethdford/mcp-figma/blob/main/PROJECT_SUMMARY.md

Visual representation of the step-by-step installation and setup process for the MCP Figma VS Code extension, guiding users from installation through AI assistant configuration, server startup, and Figma plugin integration.

```Mermaid
graph TD
    A[Install VS Code Extension] --> B[Open Command Palette]
    B --> C[MCP Figma: Setup MCP Server]
    C --> D[Select AI Assistant]
    D --> E[Auto-Configure MCP]
    E --> F[Start WebSocket Server]
    F --> G[Install Figma Plugin]
    G --> H[Start Using AI with Figma! 🎨]
```

--------------------------------

### Install package directly from GitHub using npx

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

Users can install and run a package directly from a GitHub repository using `npx`, providing a convenient way to distribute and use packages without publishing them to npm.

```bash
npx github:yourusername/ai-figma-mcp
```

--------------------------------

### Install npm package globally or via npx

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

After publishing, users can install the package globally on their system using `npm install -g` or execute it directly without global installation using `npx`.

```bash
npm install -g ai-figma-mcp

npx ai-figma-mcp
```

--------------------------------

### Update Figma Plugin Installation Instructions in README.md

Source: https://github.com/sethdford/mcp-figma/blob/main/FIGMA_PUBLISHING_GUIDE.md

Provides Markdown code to update a project's README.md file, offering both Figma Community and manual installation options for a published Figma plugin.

```Markdown
## Figma Plugin Installation

**Option 1: From Figma Community (Recommended)**
1. Go to [MCP Figma Plugin on Figma Community](https://www.figma.com/community/plugin/[plugin-id])
2. Click "Install" 
3. The plugin will be available in your Figma plugins menu

**Option 2: Manual Installation**
1. Download the plugin files from GitHub
2. In Figma: Plugins → Development → Import plugin from manifest
3. Select the manifest.json file
```

--------------------------------

### Install and Run MCP Figma Server

Source: https://github.com/sethdford/mcp-figma/blob/main/FIGMA_PUBLISHING_COPY.md

Commands to install the Model Context Protocol (MCP) Figma server globally and start the WebSocket bridge for AI assistant integration.

```npm
npm install -g @sethdouglasford/mcp-figma
```

```npm
npm run socket
```

--------------------------------

### Setup MCP Figma Project Dependencies

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Executes the setup script to download necessary dependencies and build the MCP Figma project, preparing it for execution.

```bash
npm run setup
```

--------------------------------

### NPM Package Naming Rationale

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

Justification and characteristics of the chosen NPM package name, highlighting its brevity, clarity, and availability.

```APIDOC
NPM Package Name: @sethdouglasford/mcp-figma
  Characteristics:
    Short and memorable: Yes
    Clearly indicates MCP + Figma: Yes
    Follows NPM naming conventions: Yes
    Available on NPM registry: Yes
```

--------------------------------

### Example Figma Plugin Manifest Configuration

Source: https://github.com/sethdford/mcp-figma/blob/main/FIGMA_PUBLISHING_GUIDE.md

This JSON snippet provides a comprehensive example of a `manifest.json` file for a Figma plugin. It defines essential plugin metadata such as name, ID, API version, main entry points (`code.js`, `ui.html`), supported editor types, permissions, network access rules for allowed and development domains, and proposed API enablement flags.

```json
{
  "name": "MCP Figma Plugin",
  "id": "mcp-figma-plugin",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma", "figjam"],
  "permissions": [],
  "networkAccess": {
    "allowedDomains": ["https://google.com"],
    "devAllowedDomains": ["http://localhost:3055", "ws://localhost:3055"]
  },
  "documentAccess": "dynamic-page",
  "enableProposedApi": true,
  "enablePrivatePluginApi": true
}
```

--------------------------------

### Natural Language Usage Examples for Figma Interaction

Source: https://github.com/sethdford/mcp-figma/blob/main/SETUP_SUMMARY.md

These examples illustrate common natural language commands that can be used with supported AI assistants to interact with Figma. They demonstrate how to perform actions such as joining channels, modifying design elements, creating annotations, and querying accessibility issues.

```AI Prompt
"Join the Figma channel 'vblckgfu' and analyze the current design"
"Change the background color of the selected frame to blue"
"Create annotations for this component library"
"What accessibility issues exist in this design?"
```

--------------------------------

### Capture Screenshots for Figma Plugin Listing

Source: https://github.com/sethdford/mcp-figma/blob/main/FIGMA_PUBLISHING_GUIDE.md

This snippet details the types of screenshots recommended for the plugin listing, including the plugin connection interface, AI assistant interaction with Figma, and before/after design automation examples. It specifies that these should be saved in the `figma-assets/screenshots/` directory.

```bash
# Screenshots of:
# - Plugin connection interface
# - AI assistant interacting with Figma
# - Before/after design automation examples
# Save as: figma-assets/screenshots/
```

--------------------------------

### Required Package.json Updates

Source: https://github.com/sethdford/mcp-figma/blob/main/GITHUB_PROJECT_SETUP.md

Key fields in package.json that require updates for the new project structure, including repository URL, package name, binary name, and author.

```APIDOC
package.json Updates:
  Repository URL: https://github.com/sethford/@sethdouglasford/mcp-figma.git
  Package name: @sethdouglasford/mcp-figma
  Binary name: @sethdouglasford/mcp-figma
  Author: Seth Ford <seth@sethford.com>
```

--------------------------------

### Configure Claude Desktop AI assistant for ai-figma-mcp

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

JSON configuration for the Claude Desktop AI assistant, detailing how to set up the `ai-figma-mcp` package by specifying `npx` as the command and the package name as an argument.

```json
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
```

--------------------------------

### Configure Windsurf AI assistant for ai-figma-mcp

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

JSON configuration for the Windsurf AI assistant, showing how to integrate the `ai-figma-mcp` package by defining the command as `npx` and providing the package name as an argument.

```json
{
  "servers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
```

--------------------------------

### Start MCP Figma Server

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Launches the MCP server for Figma integration, which also automatically starts the WebSocket server for communication with the Figma plugin.

```bash
npx ai-figma-mcp
```

--------------------------------

### Configure Cursor AI assistant for ai-figma-mcp

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

JSON configuration for the Cursor AI assistant, demonstrating how to integrate and use the `ai-figma-mcp` package by specifying `npx` as the command and the package name as an argument.

```json
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
```

--------------------------------

### Configure GitHub Copilot (VS Code) for ai-figma-mcp

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

JSON configuration for GitHub Copilot within VS Code, illustrating how to set up the `ai-figma-mcp` package for use by specifying the `npx` command and package name.

```json
{
  "mcp": {
    "servers": {
      "TalkToFigma": {
        "command": "npx",
        "args": ["ai-figma-mcp@latest"]
      }
    }
  }
}
```

--------------------------------

### Install Dependencies and Build Project

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Command to install project dependencies and build the necessary components for the MCP Figma plugin. This step prepares the project for local development or deployment.

```bash
npm run setup
```

--------------------------------

### Log in to npm CLI

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

Before publishing any package, ensure you are authenticated with the npm registry by logging in via the command-line interface.

```bash
npm login
```

--------------------------------

### Install VS Code Extension via CLI

Source: https://github.com/sethdford/mcp-figma/blob/main/PROJECT_SUMMARY.md

Provides the command-line instruction to install the MCP Figma VS Code extension directly from a VSIX file using the `code` CLI tool. This method is an alternative to installing via the VS Code UI.

```bash
code --install-extension mcp-figma-extension-1.0.0.vsix
```

--------------------------------

### Publish npm package

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

Perform a dry run to preview the files that will be included in the package before publishing. Once satisfied, execute the actual publish command to make the package available on the npm registry.

```bash
npm publish --dry-run

npm publish
```

--------------------------------

### Configure MCP server with GitHub npx reference

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

This JSON configuration snippet shows how to configure an MCP server to use a package directly from a GitHub repository via `npx`, specifying the GitHub path as an argument.

```json
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["github:yourusername/ai-figma-mcp"]
    }
  }
}
```

--------------------------------

### Figma Interaction: Join Channel and Describe Design

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

An example of a natural language prompt to an AI assistant, instructing it to join a specific Figma channel and provide a description of the current design.

```APIDOC
"Join the Figma channel 'vblckgfu' and tell me about the current design"
```

--------------------------------

### Create and link local npm package

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

For local development, use `npm link` in your project directory to create a symlink. This allows other projects to link to your local package globally, facilitating testing without publishing.

```bash
npm link

npm link ai-figma-mcp
```

--------------------------------

### MCP Figma Project Directory Structure

Source: https://github.com/sethdford/mcp-figma/blob/main/PROJECT_SUMMARY.md

Overview of the main directories and files within the `mcp-figma` project, highlighting key components like the MCP server, Figma plugin, WebSocket server implementation, setup scripts, and documentation.

```APIDOC
mcp-figma/
├─ src/
│  ├─ talk_to_figma_mcp/     # MCP server (Node.js)
│  ├─ mcp_plugin/            # Figma plugin
│  └─ socket.ts              # WebSocket server (Node.js)

├─ scripts/                  # Setup scripts (Node.js)
└─ docs/                     # Comprehensive documentation
```

--------------------------------

### Configure MCP server with local path

Source: https://github.com/sethdford/mcp-figma/blob/main/PUBLISHING_GUIDE.md

This JSON configuration snippet demonstrates how to set up an MCP server to use a local path to your built JavaScript server file, allowing direct execution from a specified location.

```json
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "node",
      "args": ["/path/to/your/project/dist/talk_to_figma_mcp/server.js"]
    }
  }
}
```

--------------------------------

### Check Node.js Version

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Verifies that Node.js version 18 or higher is installed on the system, which is a prerequisite for running the MCP Figma project.

```bash
node --version
```

--------------------------------

### Check Node.js and npm versions in WSL (Bash)

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Verify the installed versions of Node.js and npm within your WSL environment. This ensures compatibility with the MCP server requirements.

```bash
node --version
npm --version
```

--------------------------------

### Figma Interaction: Read Design Elements

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Examples of natural language prompts for an AI assistant to query and retrieve information about elements, layout structure, and text nodes within a Figma design.

```APIDOC
"What elements are currently selected in Figma?"
"Read the design and describe the layout structure"
"Get information about all text nodes in the current design"
```

--------------------------------

### Create Cover Image for Figma Community Listing

Source: https://github.com/sethdford/mcp-figma/blob/main/FIGMA_PUBLISHING_GUIDE.md

This snippet outlines the requirements for the 1920x960px cover image, emphasizing content that showcases Figma and AI assistant integration, including the plugin interface and connection flow. It also specifies the saving location as `figma-assets/cover-image.png`.

```bash
# Create a 1920x960px banner image
# Show: Figma + AI assistant integration
# Include: Plugin interface, connection flow
# Save as: figma-assets/cover-image.png
```

--------------------------------

### Watch for Changes and Rebuild Automatically

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Start a development process that automatically rebuilds TypeScript files whenever changes are detected, facilitating rapid development.

```bash
npm run dev
```

--------------------------------

### GitHub Copilot Repository-Level MCP Configuration

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

JSON configuration for integrating the MCP server with GitHub Copilot at the repository level. This setup enables Copilot to use the MCP server's tools, enhancing its capabilities for Figma interaction.

```json
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"],
      "tools": ["*"]
    }
  }
}
```

--------------------------------

### Create Plugin Icon for Figma Community

Source: https://github.com/sethdford/mcp-figma/blob/main/FIGMA_PUBLISHING_GUIDE.md

This snippet provides instructions for creating the required 128x128px plugin icon. It suggests design elements like Figma logo and AI/connection elements, and specifies the saving location and filename as `src/mcp_plugin/icon.png`.

```bash
# Create a 128x128px icon representing MCP/AI connectivity
# Suggested design: Figma logo + AI/connection elements
# Save as: src/mcp_plugin/icon.png
```

--------------------------------

### Update Operation Progress UI

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

This function dynamically updates the user interface to reflect the progress of an ongoing operation. It takes `progressData` as input, which includes progress percentage, a message, and status. The function manages the visibility of a progress container, adjusts the width of a progress bar, updates text content, and applies specific CSS classes based on the operation's status (started, in progress, completed, or error), including a timed hide for completed operations.

```JavaScript
function updateProgressUI(progressData) {
  // Show progress container if hidden
  progressContainer.classList.remove("hidden");
  // Update progress bar
  const progress = progressData.progress || 0;
  progressBar.style.width = `${progress}%`;
  progressPercentage.textContent = `${progress}%`;
  // Update message
  progressMessage.textContent = progressData.message || "Operation in progress";
  // Update status text based on operation state
  if (progressData.status === 'started') {
    progressStatus.textContent = "Started";
    progressStatus.className = "";
  } else if (progressData.status === 'in_progress') {
    progressStatus.textContent = "In Progress";
    progressStatus.className = "";
  } else if (progressData.status === 'completed') {
    progressStatus.textContent = "Completed";
    progressStatus.className = "operation-complete";
    // Hide progress container after 5 seconds
    setTimeout(() => {
      progressContainer.classList.add("hidden");
    }, 5000);
  } else if (progressData.status === 'error') {
    progressStatus.textContent = "Error";
    progressStatus.className = "operation-error";
  }
}
```

--------------------------------

### WebSocket Server Migration: Bun to Node.js

Source: https://github.com/sethdford/mcp-figma/blob/main/PROJECT_SUMMARY.md

Illustrates the code changes for the WebSocket server, migrating from Bun's built-in `Bun.serve` to Node.js's `http` and `ws` libraries, showcasing the new enhanced handlers for improved functionality and compatibility.

```Bun
// Before (Bun):
Bun.serve({
  fetch(req, server) {
    return server.upgrade(req) ? undefined : new Response("Error");
  },
  websocket: { /* handlers */ }
});
```

```TypeScript
// After (Node.js):
const server = http.createServer();
const wss = new WebSocketServer({ server });
wss.on('connection', (ws) => { /* enhanced handlers */ });
```

--------------------------------

### Clone Repository and Navigate

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Instructions to clone the `ai-figma-mcp` repository from GitHub and change the current directory to the cloned repository for further development.

```bash
git clone https://github.com/your-repo/ai-figma-mcp.git
cd ai-figma-mcp
```

--------------------------------

### Manually Configure GitHub Copilot MCP Server in VS Code settings.json

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

JSON configuration to be added directly to VS Code's `settings.json` file, enabling the TalkToFigma MCP server for GitHub Copilot.

```json
{
  "mcp": {
    "servers": {
      "TalkToFigma": {
        "command": "npx",
        "args": ["ai-figma-mcp@latest"]
      }
    }
  }
}
```

--------------------------------

### Configure GitHub Copilot MCP Server in VS Code UI

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

JSON configuration for adding the TalkToFigma MCP server to GitHub Copilot via the VS Code Command Palette, enabling AI assistant interaction with Figma.

```json
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
```

--------------------------------

### Initialize WebSocket Connection State and UI Elements

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

Defines the initial state for the WebSocket connection, including connection status, socket instance, server port, pending requests, and channel. It also references key UI elements from the HTML document for status display and interaction.

```JavaScript
const state = {
  connected: false,
  socket: null,
  serverPort: 3055,
  pendingRequests: new Map(),
  channel: null,
};

const portInput = document.getElementById("port");
const connectButton = document.getElementById("btn-connect");
const disconnectButton = document.getElementById("btn-disconnect");
const connectionStatus = document.getElementById("connection-status");

const tabs = document.querySelectorAll(".tab");
const tabContents = document.querySelectorAll(".tab-content");

const progressContainer = document.getElementById("progress-container");
const progressBar = document.getElementById("progress-bar");
const progressMessage = document.getElementById("progress-message");
const progressStatus = document.getElementById("progress-status");
const progressPercentage = document.getElementById("progress-percentage");
```

--------------------------------

### Build MCP Server and WebSocket Server

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Compile TypeScript files for the MCP server and WebSocket server, outputting the compiled files to the `dist` directory.

```bash
npm run build
```

--------------------------------

### Configure GitHub Copilot MCP Server in JetBrains IDEs

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

JSON configuration for integrating the TalkToFigma MCP server within JetBrains IDEs' `mcp.json` settings, allowing Copilot to interact with Figma.

```json
{
  "servers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
```

--------------------------------

### Configure Claude Desktop MCP Server

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

JSON configuration for adding the TalkToFigma MCP server to Claude Desktop's configuration file, enabling its interaction with Figma designs.

```json
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
```

--------------------------------

### Local Development Server Configuration

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

JSON configuration snippet for pointing an MCP server to a locally built server. This allows developers to test changes without deploying the plugin. Remember to replace the placeholder path with the actual absolute path to your project's `dist` directory.

```json
{
  "mcpServers": {
    "TalkToFigmaLocal": {
      "command": "node",
      "args": ["/path/to/your/project/dist/talk_to_figma_mcp/server.js"]
    }
  }
}
```

--------------------------------

### Publish VS Code Extension to Marketplace

Source: https://github.com/sethdford/mcp-figma/blob/main/PROJECT_SUMMARY.md

Illustrates the command used to publish the developed VS Code extension to the VS Code Marketplace. This command utilizes the `vsce` tool, which is essential for managing VS Code extensions.

```bash
vsce publish
```

--------------------------------

### Connect to AI Assistant MCP WebSocket Server

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

Establishes a WebSocket connection to the specified server port. It handles `onopen`, `onmessage`, `onclose`, and `onerror` events. Upon successful connection, it joins a dynamically generated channel and notifies the parent Figma plugin. Incoming messages are parsed and routed for further processing.

```JavaScript
async function connectToServer(port) {
  try {
    if (state.connected && state.socket) {
      updateConnectionStatus(true, "Already connected to server");
      return;
    }
    state.serverPort = port;
    state.socket = new WebSocket(`ws://localhost:${port}`);
    state.socket.onopen = () => {
      const channelName = generateChannelName();
      console.log("Joining channel:", channelName);
      state.channel = channelName;
      state.socket.send(
        JSON.stringify({ type: "join", channel: channelName.trim(), })
      );
    };
    state.socket.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        console.log("Received message:", data);
        if (data.type === "system") {
          if (data.message && data.message.result) {
            state.connected = true;
            const channelName = data.channel;
            updateConnectionStatus(
              true,
              `Connected to server on port ${port} in channel: <strong>${channelName}</strong>`
            );
            parent.postMessage(
              { pluginMessage: { type: "notify", message: `Connected to AI assistant MCP server on port ${port} in channel: ${channelName}`, }, },
              "*"
            );
          }
        } else if (data.type === "error") {
          console.error("Error:", data.message);
          updateConnectionStatus(false, `Error: ${data.message}`);
          state.socket.close();
        }
        handleSocketMessage(data);
      } catch (error) {
        console.error("Error parsing message:", error);
      }
    };
    state.socket.onclose = () => {
      state.connected = false;
      state.socket = null;
      updateConnectionStatus(false, "Disconnected from server");
    };
    state.socket.onerror = (error) => {
      console.error("WebSocket error:", error);
      updateConnectionStatus(false, "Connection error");
      state.connected = false;
      state.socket = null;
    };
  } catch (error) {
    console.error("Connection error:", error);
    updateConnectionStatus(
      false,
      `Connection error: ${error.message || "Unknown error"}`
    );
  }
}
```

--------------------------------

### Configure Windsurf MCP Server

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

JSON configuration for integrating the TalkToFigma MCP server into Windsurf's Cascade agent settings, allowing it to interact with Figma.

```json
{
  "servers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
```

--------------------------------

### Figma MCP Plugin API Reference

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Comprehensive API documentation for the Figma Multi-Control Protocol (MCP) plugin, detailing functions for auto layout, styling, node organization, component management, export, connection handling, and strategic prompts.

```APIDOC
Auto Layout & Spacing:
  set_layout_mode - Set the layout mode and wrap behavior of a frame (NONE, HORIZONTAL, VERTICAL)
  set_padding - Set padding values for an auto-layout frame (top, right, bottom, left)
  set_axis_align - Set primary and counter axis alignment for auto-layout frames
  set_layout_sizing - Set horizontal and vertical sizing modes for auto-layout frames (FIXED, HUG, FILL)
  set_item_spacing - Set distance between children in an auto-layout frame

Styling:
  set_fill_color - Set the fill color of a node (RGBA)
  set_stroke_color - Set the stroke color and weight of a node
  set_corner_radius - Set the corner radius of a node with optional per-corner control

Layout & Organization:
  move_node - Move a node to a new position
  resize_node - Resize a node with new dimensions
  delete_node - Delete a node
  delete_multiple_nodes - Delete multiple nodes at once efficiently
  clone_node - Create a copy of an existing node with optional position offset

Components & Styles:
  get_styles - Get information about local styles
  get_local_components - Get information about local components
  create_component_instance - Create an instance of a component
  get_instance_overrides - Extract override properties from a selected component instance
  set_instance_overrides - Apply extracted overrides to target instances

Export & Advanced:
  export_node_as_image - Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as text

Connection Management:
  join_channel - Join a specific channel to communicate with Figma

MCP Prompts:
  design_strategy - Best practices for working with Figma designs
  read_design_strategy - Best practices for reading Figma designs
  text_replacement_strategy - Systematic approach for replacing text in Figma designs
  annotation_conversion_strategy - Strategy for converting manual annotations to Figma's native annotations
  swap_overrides_instances - Strategy for transferring overrides between component instances in Figma
  reaction_to_connector_strategy - Strategy for converting Figma prototype reactions to connector lines using the output of 'get_reactions', and guiding the use 'create_connections' in sequence
```

--------------------------------

### Configure Cursor MCP Server

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

JSON configuration for adding the TalkToFigma MCP server to Cursor's settings, enabling its Agent mode to communicate with Figma.

```json
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
```

--------------------------------

### VS Code Extension Package Structure

Source: https://github.com/sethdford/mcp-figma/blob/main/PROJECT_SUMMARY.md

Detailed breakdown of the `mcp-figma-extension` VS Code package contents, including file types and their purpose, illustrating its professional icon, MIT License, compiled TypeScript, comprehensive README, and VS Code integration.

```APIDOC
📦 mcp-figma-extension-1.0.0.vsix (1.67 MB)
├─ 🎨 Icon: Professional Figma-themed icon
├─ 📄 License: MIT License included
├─ 🔧 Compiled TypeScript: Ready-to-run extension
├─ 📚 Documentation: Comprehensive README
└─ ⚙️ Configuration: Complete VS Code integration
```

--------------------------------

### Send Command to WebSocket Server and Await Response

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

Sends a command to the connected WebSocket server, encapsulating it with a unique ID and channel information. It returns a Promise that resolves with the server's response or rejects on error or timeout. Pending requests are managed using a `Map`.

```JavaScript
async function sendCommand(command, params) {
  return new Promise((resolve, reject) => {
    if (!state.connected || !state.socket) {
      reject(new Error("Not connected to server"));
      return;
    }
    const id = generateId();
    state.pendingRequests.set(id, { resolve, reject });
    state.socket.send(
      JSON.stringify({ id, type: "message", channel: state.channel, message: { id, command, params, }, })
    );
    setTimeout(() => {
      if (state.pendingRequests.has(id)) {
        state.pendingRequests.delete(id);
        reject(new Error("Request timed out"));
      }
    }, 30000);
  });
}
```

--------------------------------

### Handle Server Connection/Disconnection UI

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

This section defines event handlers for UI buttons responsible for managing server connections. The connect button initiates a connection to a specified port (defaulting to 3055) and updates the UI status. The disconnect button triggers the disconnection process and updates the connection status display.

```JavaScript
connectButton.addEventListener("click", () => {
  const port = parseInt(portInput.value, 10) || 3055;
  updateConnectionStatus(false, "Connecting...");
  connectionStatus.className = "status info";
  connectToServer(port);
});
disconnectButton.addEventListener("click", () => {
  updateConnectionStatus(false, "Disconnecting...");
  connectionStatus.className = "status info";
  disconnectFromServer();
});
```

--------------------------------

### Enable Debug Logging

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Environment variable setting to enable verbose logging for the MCP server. Setting this to `true` provides more detailed output, which is helpful for debugging and troubleshooting issues.

```bash
export DEBUG=true
```

--------------------------------

### Navigate to Figma Plugin Directory

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Change the current directory to the Figma plugin's source location to access and modify its core files.

```bash
cd src/mcp_plugin
```

--------------------------------

### Handle UI Tab Switching

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

This code block implements client-side UI logic for tab navigation. It iterates through all tab elements, attaching a click event listener to each. When a tab is clicked, it deactivates all other tabs and their corresponding content, then activates the clicked tab and its associated content panel.

```JavaScript
tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    tabs.forEach((t) => t.classList.remove("active"));
    tabContents.forEach((c) => c.classList.remove("active"));
    tab.classList.add("active");
    const contentId = "content-" + tab.id.split("-")[1];
    document.getElementById(contentId).classList.add("active");
  });
});
```

--------------------------------

### Configure WebSocket Host for WSL Accessibility (TypeScript)

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Modify the src/socket.ts file to change the WebSocket server's listening address from 'localhost' to '0.0.0.0'. This allows the Figma plugin running on Windows to connect to the MCP server running in WSL.

```typescript
// const HOST = process.env.WS_HOST || 'localhost';
const HOST = process.env.WS_HOST || '0.0.0.0'; // Change 'localhost' to '0.0.0.0'
```

--------------------------------

### Handle Messages from Figma Plugin

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

This event listener handles messages sent from a Figma plugin to the main UI window. It parses the incoming message and, based on its `type`, dispatches various actions: updating connection status, triggering connect/disconnect button clicks, forwarding command results or errors back to the WebSocket server, or updating and forwarding operation progress information.

```JavaScript
window.onmessage = (event) => {
  const message = event.data.pluginMessage;
  if (!message) return;
  console.log("Received message from plugin:", message);
  switch (message.type) {
    case "connection-status":
      updateConnectionStatus(message.connected, message.message);
      break;
    case "auto-connect":
      connectButton.click();
      break;
    case "auto-disconnect":
      disconnectButton.click();
      break;
    case "command-result":
      // Forward the result from plugin code back to WebSocket
      sendSuccessResponse(message.id, message.result);
      break;
    case "command-error":
      // Forward the error from plugin code back to WebSocket
      sendErrorResponse(message.id, message.error);
      break;
    case "command_progress":
      // Update UI with progress information
      updateProgressUI(message);
      // Forward progress update to server
      sendProgressUpdateToServer(message);
      break;
  }
};
```

--------------------------------

### MCP Figma Server API Tools Reference (APIDOC)

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Reference documentation for the various tools and functions provided by the MCP server for interacting with Figma. These APIs allow for document manipulation, annotation management, prototyping, and creating/modifying design elements.

```APIDOC
Document & Selection:
- get_document_info - Get information about the current Figma document
- get_selection - Get information about the current selection
- read_my_design - Get detailed node information about the current selection without parameters
- get_node_info - Get detailed information about a specific node
- get_nodes_info - Get detailed information about multiple nodes by providing an array of node IDs

Annotations:
- get_annotations - Get all annotations in the current document or specific node
- set_annotation - Create or update an annotation with markdown support
- set_multiple_annotations - Batch create/update multiple annotations efficiently
- scan_nodes_by_types - Scan for nodes with specific types (useful for finding annotation targets)

Prototyping & Connections:
- get_reactions - Get all prototype reactions from nodes with visual highlight animation
- set_default_connector - Set a copied FigJam connector as the default connector style for creating connections (must be set before creating connections)
- create_connections - Create FigJam connector lines between nodes, based on prototype flows or custom mapping

Creating Elements:
- create_rectangle - Create a new rectangle with position, size, and optional name
- create_frame - Create a new frame with position, size, and optional name
- create_text - Create a new text node with customizable font properties

Modifying text content:
- scan_text_nodes - Scan text nodes with intelligent chunking for large designs
- set_text_content - Set the text content of a single text node
- set_multiple_text_contents - Batch update multiple text nodes efficiently
```

--------------------------------

### Add Port Forwarding Rule for WSL (PowerShell)

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Create a port forwarding rule in Windows PowerShell to direct traffic from a specified port on the Windows host to the WSL instance. This is necessary if direct connection to WSL's IP is not sufficient.

```powershell
netsh interface portproxy add v4tov4 listenport=3055 listenaddress=0.0.0.0 connectport=3055 connectaddress=<Your_WSL_IP_Address>
```

--------------------------------

### WebSocket Message Protocol (MCP)

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

Defines the structure of messages exchanged over the WebSocket connection between the client and the AI assistant MCP server. This protocol supports system messages, error messages, and general command/response messages.

```APIDOC
WebSocket Message Structure:

1. Join Channel Message (Client to Server):
   {
     "type": "join",
     "channel": "string" // Name of the channel to join
   }

2. System Message (Server to Client - e.g., successful join):
   {
     "type": "system",
     "message": {
       "result": "boolean" // true if successful
     },
     "channel": "string" // The channel name
   }

3. Error Message (Server to Client):
   {
     "type": "error",
     "message": "string" // Error description
   }

4. Command/Response Message (Bidirectional):
   {
     "id": "string", // Unique request ID
     "type": "message",
     "channel": "string",
     "message": {
       "id": "string", // Same as top-level ID
       "command": "string", // Command name (Client to Server)
       "params": "object", // Parameters for the command (Client to Server)
       "result": "any", // Result of the command (Server to Client)
       "error": "string" // Error message if command failed (Server to Client)
     }
   }
```

--------------------------------

### Process Incoming WebSocket Messages

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

Parses and processes incoming messages from the WebSocket server. It distinguishes between responses to pending requests (resolving/rejecting promises) and new commands. New commands are forwarded to the parent Figma plugin for execution via `parent.postMessage`.

```JavaScript
async function handleSocketMessage(payload) {
  const data = payload.message;
  console.log("handleSocketMessage", data);
  if (data.id && state.pendingRequests.has(data.id)) {
    const { resolve, reject } = state.pendingRequests.get(data.id);
    state.pendingRequests.delete(data.id);
    if (data.error) {
      reject(new Error(data.error));
    } else {
      resolve(data.result);
    }
    return;
  }
  if (data.command) {
    try {
      parent.postMessage(
        { pluginMessage: { type: "execute-command", id: data.id, command: data.command, params: data.params, }, },
        "*"
      );
    } catch (error) {
      sendErrorResponse(
        data.id,
        error.message || "Error executing command"
      );
    }
  }
}
```

--------------------------------

### Send Operation Progress Update to Server

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

This function sends progress updates from the client-side UI to the connected WebSocket server. It serializes the `progressData`, including a command ID, type, channel, and the progress details, into a JSON string. The function first verifies that the WebSocket connection is active, logging an error if it's not.

```JavaScript
function sendProgressUpdateToServer(progressData) {
  if (!state.connected || !state.socket) {
    console.error("Cannot send progress update: socket not connected");
    return;
  }
  console.log("Sending progress update to server:", progressData);
  state.socket.send(
    JSON.stringify({
      id: progressData.commandId,
      type: "progress_update",
      channel: state.channel,
      message: { id: progressData.commandId, type: "progress_update", data: progressData }
    })
  );
}
```

--------------------------------

### Configure Custom WebSocket Port

Source: https://github.com/sethdford/mcp-figma/blob/main/readme.md

Environment variable setting to specify a custom port for the MCP server's WebSocket. This is optional and defaults to `3055` if not set. Useful for avoiding port conflicts.

```bash
export FIGMA_WEBSOCKET_PORT=3056
```

--------------------------------

### Update WebSocket Connection Status in UI

Source: https://github.com/sethdford/mcp-figma/blob/main/src/mcp_plugin/ui.html

A utility function to update the visual connection status in the user interface. It sets the `connected` state, updates the text message, applies CSS classes for styling, and enables/disables connection buttons and the port input field accordingly.

```JavaScript
function updateConnectionStatus(isConnected, message) {
  state.connected = isConnected;
  connectionStatus.innerHTML = message || (isConnected ? "Connected to AI assistant MCP server" : "Not connected to AI assistant MCP server");
  connectionStatus.className = `status ${ isConnected ? "connected" : "disconnected" }`;
  connectButton.disabled = isConnected;
  disconnectButton.disabled = !isConnected;
  portInput.disabled = isConnected;
}
```