What is Github Copilot Talk To Figma Mcp

GitHub Copilot Talk to Figma MCP is a plugin that integrates GitHub Copilot with Figma, enabling communication between the two platforms for reading and modifying design files programmatically.

Use cases

Use cases include automating design updates based on code changes, generating design assets from code, and enhancing collaboration between designers and developers.

How to use

To use the GitHub Copilot Talk to Figma MCP, install Bun, run the setup command to install the MCP in your GitHub Copilot project, start the WebSocket server, and then run the MCP server. Finally, install the Figma plugin to link it with GitHub Copilot.

Key features

Key features include seamless integration between GitHub Copilot and Figma, the ability to read and modify designs programmatically, and a WebSocket server that facilitates real-time communication.

Where to use

This MCP can be used in design and development environments where Figma and GitHub Copilot are utilized, particularly in UI/UX design workflows and collaborative projects.

GitHub Copilot Talk to Figma MCP

This project implements a Model Context Protocol (MCP) integration between GitHub Copilot AI using Visual Studio Code and Figma, allowing GitHub Copilot to communicate with Figma for reading designs and modifying them programmatically.

Project Structure

• src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration
• src/github-copilot-mcp-plugin/ - Figma plugin for communicating with GitHub Copilot using Visual Studio code
• src/socket.ts - WebSocket server that facilitates communication between the MCP server and Figma plugin

Get Started

1. Install Bun if you haven’t already:

curl -fsSL https://bun.sh/install | bash

2. Run setup, this will also install MCP in your GitHub Copilot’s active project

bun setup

3. Start the Websocket server

bun socket

4. MCP server

bunx github-copilot-talk-to-figma-mcp-plugin

5. Install Figma Plugin

Quick Video Tutorial

A video tutorial demonstrating the setup and usage of this plugin will be available soon.

Manual Setup and Installation

MCP Server: Integration with Visual Studio Code

Add the server to your GitHub Copilot MCP configuration in ~/.github-copilot/mcp.json:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": [
        "github-copilot-talk-to-figma-mcp-plugin@latest"
      ]
    }
  }
}

WebSocket Server

Start the WebSocket server:

bun socket

Figma Plugin

1. In Figma, go to Plugins > Development > New Plugin
2. Choose “Link existing plugin”
3. Select the src/github-copilot-mcp-plugin/manifest.json file
4. The plugin should now be available in your Figma development plugins

Windows + WSL Guide

1. Install bun via powershell

powershell -c "irm bun.sh/install.ps1|iex"

2. Uncomment the hostname 0.0.0.0 in src/socket.ts

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

3. Start the websocket

bun socket

Usage

1. Start the WebSocket server
2. Install the MCP server in GitHub Copilot
3. Open Figma and run the GitHub Copilot MCP Plugin
4. Connect the plugin to the WebSocket server by joining a channel using join_channel
5. Use GitHub Copilot to communicate with Figma using the MCP tools

MCP Tools

The MCP server provides the following tools for interacting with Figma:

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)

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

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

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

Troubleshooting

WebSocket Connection Issues

• Ensure the WebSocket server is running (bun socket).
• Check that the hostname is correctly configured in src/socket.ts.

Figma Plugin Not Appearing

• Verify that the plugin is linked correctly in Figma’s development settings.
• Ensure the manifest.json file is in the correct location.

MCP Command Errors

• Check the WebSocket logs for error messages.
• Ensure the MCP server is installed and running (bunx github-copilot-talk-to-figma-mcp-plugin).

How It Works

1. The MCP server acts as a bridge between GitHub Copilot and Figma.
2. The WebSocket server facilitates real-time communication between the MCP server and the Figma plugin.
3. GitHub Copilot sends commands to the MCP server, which are executed in Figma via the plugin.

Example Use Cases

Create a Login Page

FastFigma: Create a login page with email, password fields, and a submit button

Bulk Text Replacement

FastFigma: Replace all instances of "Lorem Ipsum" with "Sample Text" in the current document

Prerequisites

• A Figma account
• GitHub Copilot subscription
• Node.js and Bun installed

Development

Building the Figma Plugin

1. Navigate to the Figma plugin directory:

   cd src/github-copilot-mcp-plugin
   

2. Edit code.js and ui.html

Tips for Faster Responses with GitHub Copilot in Figma

To maximize execution speed and efficiency when using GitHub Copilot with Figma, follow these steps:

FastFigma Prompt Template

Use the following prompt template to streamline your design requests:

System instruction: When creating Figma designs, you must follow these rules strictly:
1. Plan the entire design structure upfront without explaining your thinking
2. Execute all commands in rapid sequence without narration between steps
3. Skip all progress updates during execution
4. Only provide a brief summary after all commands are complete
5. When I use the prefix "FastFigma:", apply these rules rigidly

Your goal is to maximize execution speed by eliminating all thinking/narration delays between commands.

Format for Design Requests

When making design requests, use the following format:

FastFigma: [your specific design request]

Example

FastFigma: Create a login page with email, password fields, and a submit button

By using this approach, you can ensure that GitHub Copilot processes your requests faster and more efficiently, minimizing delays and unnecessary explanations.

Best Practices

When working with the Figma MCP:

1. Always join a channel before sending commands
2. Get document overview using get_document_info first
3. Check current selection with get_selection before modifications
4. Use appropriate creation tools based on needs:
   • create_frame for containers
   • create_rectangle for basic shapes
   • create_text for text elements
5. Verify changes using get_node_info
6. Use component instances when possible for consistency
7. Handle errors appropriately as all commands can throw exceptions
8. For large designs:
   • Use chunking parameters in scan_text_nodes
   • Monitor progress through WebSocket updates
   • Implement appropriate error handling
9. For text operations:
   • Use batch operations when possible
   • Consider structural relationships
   • Verify changes with targeted exports
10. For converting legacy annotations:
    • Scan text nodes to identify numbered markers and descriptions
    • Use scan_nodes_by_types to find UI elements that annotations refer to
    • Match markers with their target elements using path, name, or proximity
    • Categorize annotations appropriately with get_annotations
    • Create native annotations with set_multiple_annotations in batches
    • Verify all annotations are properly linked to their targets
    • Delete legacy annotation nodes after successful conversion

Attribution

This project is a fork of Cursor Talk to Figma MCP by @sonnylazuardi, adapted for use with GitHub Copilot. The original project is licensed under MIT.

License

MIT