copilot-figma-bridge

One-command setup for Figma MCP + GitHub Copilot / Cursor with structured design-to-code rules.

Enables AI assistants (GitHub Copilot, Cursor) to automatically fetch design data via MCP when given a Figma link, and produce high-quality, responsive, component-based code following structured rules.

Quick Start

# Run in your project root
npx copilot-figma-bridge

The interactive wizard walks you through:

1. Figma plan — detects free/paid, picks the best MCP connection mode
2. Framework — Django, Vue 3, React, Nuxt, Next.js, or vanilla HTML
3. CSS strategy — Tailwind, Bootstrap 4/5, SCSS, CSS Modules, BEM, UnoCSS
4. MCP targets — VS Code Chat, Copilot Coding Agent, Copilot CLI
5. Editor rules — Copilot instructions and/or Cursor rules

Language selection (English / 繁體中文) is the very first prompt.

Framelink Version Check

npm run check:framelink-update

This checks the pinned figma-developer-mcp version against npm latest.

Generated Files

| File | Purpose | |---|---| | .vscode/mcp.json | Figma MCP Server config for VS Code Copilot Chat | | .copilot/mcp-config.json | Figma MCP config for Copilot Coding Agent (PR agent) | | ~/.copilot/mcp-config.json | Figma MCP config for Copilot CLI (global, all projects) | | .github/copilot-instructions.md | Design-to-code rules for GitHub Copilot | | .cursorrules | Design-to-code rules for Cursor |

All MCP config files use merge — only the figma server entry is added/updated, other servers are preserved.

MCP Config Formats

The tool handles two different JSON formats automatically:

| Target | Root Key | tools | inputs | |---|---|---|---| | .vscode/mcp.json | servers | not needed | supported | | .copilot/mcp-config.json | mcpServers | ["*"] | not supported (uses env) |

Core Rules

MCP Tool Strategy

get_metadata        → Scout node structure (always first)
get_design_context  → Get full design content (primary source)
get_variable_defs   → Extract Design Tokens
get_screenshot      → Visual confirmation (last resort)

Tool calls follow a content-first principle — use structured data before consuming screenshot quota.

Component-Oriented Design

• Visually similar elements = same component
• Figma Component Properties → code props
• Follows Atomic Design granularity (Atom → Molecule → Organism)

Responsive Design (RWD)

• Never use Figma's fixed px values as width/height
• Auto Layout → Flexbox/Grid
• All spacing uses spacing scale or relative units

Large Node Detection

• get_metadata checks node complexity first
• Over 50 children or 5 levels deep → suggest more specific link

Figma MCP Connection Modes

| Mode | Plan Required | Quota | |---|---|---| | Remote | All plans | Free: 6/month; Paid: 200/day | | Desktop App | Paid + Dev/Full seat | 200/day | | Framelink MCP (GLips/Figma-Context-MCP) | Paid + API Key | 200/day |

Framelink mode uses the figma-developer-mcp package (source: GLips/Figma-Context-MCP) through stdio. During setup, Framelink mode requires entering a Figma Personal Access Token and validates it before continuing.

Free Plan Notes

Free plans are limited to 6 tool calls/month. The generated rules include built-in quota-saving strategies: metadata-first scouting, manual info fallback guides (SVG export, CSS copy), and avoiding unnecessary screenshot calls.

Supported Frameworks

• Django — Template fragments + {% include %} componentization
• Vue 3 — <script setup> + Composition API + SFC
• React — Functional Components + Hooks + TypeScript
• Nuxt 3 — Inherits Vue rules + file-based routing
• Next.js — App Router + Server Components
• Vanilla — Semantic HTML + Web Standards

Supported CSS Strategies

• Tailwind CSS — utility classes, spacing scale, responsive prefixes
• Bootstrap 5.x — grid system, utility classes, CSS Variables theming, no jQuery
• Bootstrap 4.x — grid system, no gap utilities, jQuery required, SCSS theming
• SCSS / SASS — BEM naming, variables, mixins
• CSS Modules — scoped styles, camelCase, composes
• Vanilla CSS (BEM) — custom properties, BEM naming
• UnoCSS — utility classes, attributify mode

Manual Installation

# Global install
npm install -g copilot-figma-bridge

# Run
copilot-figma-bridge

Resources

• Figma MCP Server Guide
• Figma Remote MCP Setup
• Figma Desktop MCP Setup
• VS Code MCP Servers
• GitHub Copilot CLI MCP
• Copilot Coding Agent MCP
• GLips/Figma-Context-MCP
• Figma Plans & Permissions

Third-Party Notice

Framelink mode integrates figma-developer-mcp from GLips/Figma-Context-MCP, licensed under MIT. See NOTICE for attribution details.

License

MIT