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 "Install 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 Related Servers Score Discussions

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

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	\n	`collect_bound_variables`	Collect and aggregate all bound variables with resolved values
`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 installed

license - permissive license

quality - not tested

maintenance

How are these scores calculated?

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
open source
OpenAI
Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/renfei-design/Figma_AI_Bridge'

If you have feedback or need assistance with the MCP directory API, please join our Discord server