npm package: @iflow-mcp/vitthalr-github-copilot-talk-to-figma-mcp
Description: GitHub Copilot Talk to Figma MCP
Latest version: 0.2.1

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

<!-- A demo video will be available soon -->

## 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:

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

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

```bash
bun setup
```

3. Start the Websocket server

```bash
bun socket
```

4. MCP server

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

5. Install [Figma Plugin](#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`:

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

### WebSocket Server

Start the WebSocket server:

```bash
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

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

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

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

3. Start the websocket

```bash
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](https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp) by [@sonnylazuardi](https://github.com/sonnylazuardi), adapted for use with GitHub Copilot. The original project is licensed under MIT.


## License

MIT