Which integrations are available for this server?

Provides tools to read, create, edit, and manage Figma documents, pages, nodes, styles, components, design tokens, and variables, enabling real-time design manipulation. Integrates with GitHub Copilot in VS Code via MCP to allow AI-assisted design commands on Figma.

How do I use Figma AI Bridge?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Figma AI Bridge Create a rectangle on the current page" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

Figma AI Bridge

by renfei-design

Overview Schema Source Related Servers Discussions Admin

JavaScript

Local

Figma AI Bridge

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

Demo Video

▶️ Watch the demo on YouTube

Architecture

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

Component	Location	Purpose
Figma Plugin	`plugin/`	Runs inside Figma, executes commands via `figma.*` APIs
MCP Server	`server/`	Defines MCP tools, connects to WebSocket relay on port 3055
VS Code Config	`.vscode/mcp.json`	Registers the MCP server with VS Code
Helper Scripts	`scripts/`	CLI utilities for batch operations

Related MCP server: Cursor Talk to Figma MCP

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:

Go to Plugins → Development → Import plugin from manifest...
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

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.
Run the plugin in Figma — Plugins → Development → "Figma AI Bridge" → click Connect
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

Tool	Description
`get_document_info`	Get info about the current Figma document
`get_selection`	Get current selection
`read_my_design`	Get detailed info about the current selection including all node details
`get_node_info`	Get info about a specific node by ID
`get_nodes_info`	Get info about multiple nodes
`get_styles`	Get all styles from the document
`get_local_components`	Get all local components
`get_annotations`	Get annotations for a node
`get_instance_overrides`	Get override properties from a component instance
`get_reactions`	Get prototyping reactions from nodes
`get_component_properties`	Get all variant/boolean/text properties from a component instance
`list_pages`	List all pages in the document

Creating

Tool	Description
`create_rectangle`	Create a rectangle
`create_frame`	Create a frame with optional auto-layout settings
`create_text`	Create a text element
`create_component_instance`	Create an instance of a component
`clone_node`	Clone an existing node
`create_section`	Create a section frame for organizing content
`create_page`	Create a new page in the document

Editing

Tool	Description
`set_fill_color`	Set fill color of a node
`set_stroke_color`	Set stroke color of a node
`set_text_content`	Set text content of a text node
`set_multiple_text_contents`	Batch-update multiple text nodes
`set_corner_radius`	Set corner radius
`set_layout_mode`	Set auto-layout mode (horizontal/vertical)
`set_padding`	Set padding for auto-layout frames
`set_axis_align`	Set axis alignment for auto-layout frames
`set_layout_sizing`	Set sizing modes (fixed/hug/fill)
`set_item_spacing`	Set spacing between children
`set_annotation`	Create or update an annotation
`set_multiple_annotations`	Batch-set annotations
`set_instance_overrides`	Apply overrides to component instances
`set_component_properties`	Switch component variant properties (Type, Size, etc.)
`move_node`	Move a node to a new position
`resize_node`	Resize a node
`rename_node`	Rename a node
`set_visibility`	Show or hide a node
`set_opacity`	Set node opacity
`reparent_node`	Move a node to a new parent frame
`reorder_node`	Change z-order of a node within its parent

Other

Tool	Description
`delete_node`	Delete a node
`delete_multiple_nodes`	Delete multiple nodes
`export_node_as_image`	Export a node as PNG/JPG/SVG/PDF
`scan_text_nodes`	Scan all text nodes in a subtree
`scan_nodes_by_types`	Scan for nodes of specific types
`set_focus`	Focus viewport on a node
`set_selections`	Set selection to specific nodes
`set_current_page`	Switch to a specific page
`set_default_connector`	Set default connector for FigJam
`create_connections`	Create connector lines between nodes
`group_nodes`	Group multiple nodes together
`ungroup_nodes`	Ungroup a group node
`join_channel`	Switch to a different WebSocket channel (auto-joined by default)

Design Skills

Tool	Description
`create_slide`	Create a single presentation slide (title, content, visual, statement, columns, comparison, numbered)
`batch_slides`	Create multiple slides in one call — faster than creating individually
`create_doc_page`	Build a structured documentation page with sections, tables, and columns
`create_workflow_diagram`	Build a flowchart/process diagram with shapes, arrows, and auto-layout
`get_canvas_bounds`	Get bounding box of all top-level content to avoid overlap

Design Token Variables

Tool	Description
`scan_bound_variables`	Scan a node tree for all bound design token variables
`get_bound_variables`	Get variables bound to a specific node
`resolve_variable`	Resolve a variable by ID to get its current value
`bind_variable_to_fill`	Bind a design token variable to a node's fill color
`bind_variable_to_stroke`	Bind a design token variable to a node's stroke color

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.

Skill	Description
a11y-audit	Scan Figma frames for WCAG 2.2 accessibility issues (contrast, font size, touch targets, alt text) and annotate violations
content-review	Review UI text against writing style guidelines (grammar, capitalization, word choice, punctuation) and apply fixes
figma-doc	Build structured documentation pages in Figma (paragraphs, columns, tables) in a single command
figma-slides	Create presentation decks with 7 slide types — auto-organized into sections on the canvas
online-research	Fetch live web data to ground content in current facts before creating docs or reports
workflow-diagram	Build flowcharts and process maps with auto-layout (shapes, arrows, swimlanes, decision diamonds)

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

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Resources

Need Help?

Related Servers

Related MCP Connectors

Figma MCP ServerOAuth
com.figma.mcp
The Figma MCP server brings Figma design context directly into your AI workflow.
Developer Tools Content Management Systems
31,977
hithereiamaliff-mcp-nextcloudOAuth
ai.smithery
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
Cloud Storage File Systems Workplace & Productivity
238
MaketaOAuth
pro.maketa
Build and edit app screen mockups and clickable prototypes from your AI assistant.
Design Tools Developer Tools
1
OpenRouter AOAuth
ai.openrouter.mcp
The OpenRouter MCP server plugs OpenRouter into the AI tools you already use. Once connected, your assistant can pull live OpenRouter data (models, prices, your credits, rankings, and docs) and send quick test messages, all without leaving your editor.
AI & Machine Learning
221

Related MCP Servers

Talk to Figma MCP
App Automation Developer Tools Content Management Systems
pipethedev
A
license
B
quality
D
maintenance
Allows Cursor AI to communicate with Figma for reading designs and modifying them programmatically through a Model Context Protocol integration.
Updated a year ago (2025-06-02 00:02 UTC)
38
707 npm
1
MIT
Cursor Talk to Figma MCP
Design Tools Developer Tools
ysocrius
F
license
B
quality
D
maintenance
Enables Cursor AI to read and modify Figma designs programmatically via the Model Context Protocol.
Updated a year ago (2025-07-10 14:29 UTC)
38
707 npm
3
-
cursor-talk-to-figma-mcp
Design Tools Developer Tools
amarpaniwork
A
license
Not graded
quality
D
maintenance
Enables Cursor AI to read and modify Figma designs via the Model Context Protocol, allowing programmatic control over documents, components, styles, and more.
Updated a year ago (2025-07-24 19:10 UTC)
707 npm
MIT
Handle Figma MCP
Design Tools Developer Tools
GEON1999
A
license
B
quality
D
maintenance
Enables AI assistants to read and modify Figma designs programmatically through the Model Context Protocol.
Updated 4 months ago (2026-05-19 05:22 UTC)
48
9 npm
1
MIT

Figma AI Bridge

Architecture

Quick Start

1. Clone & Install

2. Import the Figma Plugin

3. Configure VS Code

4. Each Session

Available Tools

Reading

Creating

Editing

Other

Design Skills

Design Token Variables

Helper Scripts

Project Structure

Skills

Figma Sandbox Notes

License

Resources

Related MCP Connectors

Related MCP Servers

Talk to Figma MCP

Cursor Talk to Figma MCP

cursor-talk-to-figma-mcp

Handle Figma MCP