Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 98 additions & 3 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,18 @@ This project implements a Model Context Protocol (MCP) integration between Curso

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

## Windows Support

Windows support was added by [@Clark934](https://github.com/Clark934) with contributions including:

- PowerShell setup scripts for automated installation
- Windows-specific MCP configuration using environment variables
- Proper path handling for Windows environments
- Documentation for Windows setup and configuration
- Fixed WebSocket server startup for Windows environments

The Windows fork of this project can be found at: https://github.com/Clark934/cursor-talk-to-figma-mcp-windows

## Project Structure

- `src/talk_to_figma_mcp/` - TypeScript MCP server for Figma integration
Expand All @@ -12,8 +24,76 @@ https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

## Get Started

### Windows Setup

1. Install Bun:

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

2. Add Bun to your PowerShell profile (run PowerShell as Administrator):

```powershell
if (!(Test-Path -Path $PROFILE)) {
New-Item -ItemType File -Path $PROFILE -Force
}
Add-Content -Path $PROFILE -Value "Set-Alias -Name bun -Value `"$env:USERPROFILE\.bun\bin\bun.exe`" -Scope Global"
```

3. Close and reopen PowerShell

4. Clone and setup the project:

```powershell
git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp
.\scripts\setup.ps1
```

5. Configure the MCP server in Cursor (create/edit `%USERPROFILE%\.cursor\mcp.json`):

```json
{
"mcpServers": {
"TalkToFigma": {
"command": "%USERPROFILE%\\.bun\\bin\\bun.exe",
"args": [
"C:/path/to/your/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
]
}
}
}
```

Replace `C:/path/to/your` with your actual project path.

6. Start the WebSocket server:

```powershell
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
.\scripts\start.ps1
```

7. Install the Figma Plugin:

- Open Figma
- Go to Plugins > Development > Import plugin from manifest
- Select `src/cursor_mcp_plugin/manifest.json` from your project directory
- The plugin will appear as "Cursor MCP Plugin" in your development plugins

8. Use the Plugin:
- Open a Figma file
- Run the plugin from Plugins > Development > Cursor MCP Plugin
- Note the channel ID shown in the plugin window
- In Cursor, use `join_channel` with the shown channel ID to connect

### Linux/Mac Setup

1. Install Bun if you haven't already:

For Linux/Mac:

```bash
curl -fsSL https://bun.sh/install | bash
```
Expand Down Expand Up @@ -67,7 +147,16 @@ Add the server to your Cursor MCP configuration in `~/.cursor/mcp.json`:

### WebSocket Server

Start the WebSocket server:
The WebSocket server must be running for the MCP to communicate with Figma.

For Windows:

```powershell
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
.\scripts\start.ps1
```

For Linux/Mac:

```bash
bun socket
Expand Down Expand Up @@ -207,12 +296,18 @@ When working with the Figma MCP:
- 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`
- 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


## License

MIT

Added Windows support including:

- PowerShell setup script for Windows installation
- Windows-specific commands for running Bun
- Updated documentation with Windows-specific instructions
- Added Windows-specific MCP configuration
24 changes: 24 additions & 0 deletions scripts/setup.ps1
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Create .cursor directory if it doesn't exist
New-Item -ItemType Directory -Force -Path ".cursor"

# Get current directory path
$CURRENT_DIR = (Get-Location).Path

# Install dependencies
& "$env:USERPROFILE\.bun\bin\bun.exe" install

# Create mcp.json with the current directory path
$mcpJson = @"
{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": [
"$($CURRENT_DIR -replace '\\', '/')/src/talk_to_figma_mcp/server.ts"
]
}
}
}
"@

$mcpJson | Out-File -FilePath ".cursor/mcp.json" -Encoding UTF8
2 changes: 2 additions & 0 deletions scripts/start.ps1
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Start WebSocket server
& "$env:USERPROFILE\.bun\bin\bun.exe" run src/socket.ts