Figma AI Bridge

Let GitHub Copilot in VS Code control Figma in real-time through MCP (Model Context Protocol).

▶️ Watch the demo on YouTube

Architecture

AI Assistant  ←stdio→  MCP Server (Node.js)  ←WebSocket→  Relay (port 3055)  ←WebSocket→  Figma Plugin

Quick Start

1. Clone & Install

git clone https://github.com/renfei1992-dev/Figma_AI_Bridge.git
cd Figma_AI_Bridge
npm run setup

2. Import the Figma Plugin

In Figma desktop app:

1. Go to Plugins → Development → Import plugin from manifest...
2. Select plugin/manifest.json from this repo

3. Configure VS Code

If you open this project folder in VS Code, the .vscode/mcp.json is already configured. You're done.

To use it globally (in any project), add to ~/Library/Application Support/Code/User/mcp.json (macOS) or %APPDATA%\Code\User\mcp.json (Windows):

{
  "servers": {
    "figma-ai-bridge": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/figma-ai-bridge/server/index.js"]
    }
  }
}

4. Each Session

1. Start the relay server — open a terminal and run:

   npm run relay
   

   Leave it running. The relay forwards messages between VS Code and Figma on port 3055.
2. Run the plugin in Figma — Plugins → Development → "Figma AI Bridge" → click Connect
3. Start designing — both the plugin and MCP server auto-join the same channel (auto), so you can immediately give design commands to Copilot

Tip: If you need multiple instances or custom channels, use the join_channel tool to switch.

Available Tools

Reading

Creating

Editing

Other

Design Skills

Design Token Variables

Helper Scripts

# Send a single command to Figma
node scripts/figma_cmd.mjs <channel> <command> '[paramsJSON]'

# Batch-bind design token variables
echo '[{"nodeId":"...","variableId":"...","property":"fill"}]' | node scripts/figma_bind_batch.mjs <channel>

Project Structure

figma-ai-bridge/
├── .github/
│   └── skills/                # AI skill definitions (prompt instructions)
│       ├── a11y-audit/        # WCAG accessibility audit
│       │   ├── SKILL.md
│       │   ├── references/    # WCAG criteria reference
│       │   ├── scripts/       # a11y_check.py (offline analysis)
│       │   └── tests/         # Unit tests
│       ├── content-review/    # UI text review & style fixes
│       │   ├── SKILL.md
│       │   ├── references/    # Style guide (grammar, caps, words, punctuation)
│       │   └── scripts/       # figma_text.py (extract & apply text)
│       ├── figma-doc/         # Structured documentation pages
│       │   └── SKILL.md
│       ├── figma-slides/      # Presentation slide decks
│       │   └── SKILL.md
│       ├── online-research/   # Live web research
│       │   └── SKILL.md
│       └── workflow-diagram/  # Flowcharts & process maps
│           └── SKILL.md
├── plugin/
│   ├── manifest.json      # Figma plugin manifest
│   ├── code.js            # Plugin sandbox code (runs in Figma)
│   └── ui.html            # Plugin UI (WebSocket bridge)
├── server/
│   ├── package.json       # Server dependencies
│   ├── index.js           # MCP server (stdio transport, connects to relay)
│   └── relay.js           # WebSocket relay server (port 3055)
├── scripts/
│   ├── figma_cmd.mjs      # CLI: send single command
│   └── figma_bind_batch.mjs  # CLI: batch variable binding
├── .vscode/
│   └── mcp.json           # VS Code MCP integration
├── package.json           # Root project metadata
├── LICENSE                # MIT
└── README.md

Skills

Skills are AI prompt instructions in .github/skills/ that teach Copilot how to perform complex multi-step design tasks. Each skill has a SKILL.md with the full workflow, and optionally references/ and scripts/ for supporting files.

Figma Sandbox Notes

The Figma plugin sandbox uses an older JS engine. The plugin code (plugin/code.js) avoids:

• Spread syntax (...)
• Template literals in some contexts
• for...of on objects
• Object.entries() with destructuring

All plugin code uses var, traditional for loops, and string concatenation for compatibility.

License

MIT