What is Figma AI Bridge?
Figma AI Bridge is an MIT licensed project that lets GitHub Copilot in VS Code control Figma in real time. A Node.js MCP server talks over WebSocket to a relay on port 3055, which talks to a Figma plugin that runs the commands. It ships read, create, edit and variable tools plus six skills.
The README opens with one promise: let GitHub Copilot in VS Code control Figma in real time through MCP. It is a small stack you run yourself, made of a Node.js server, a relay and a Figma plugin.
The plugin executes each command through the figma APIs inside the Figma desktop app. The MCP server defines the tools, and the relay forwards messages between the two on port 3055.
What changes in your agent's output
- The agent can read the document, selection, styles, local components and prototyping reactions before it changes anything.
- It creates frames with auto-layout, rectangles, text, sections, pages and component instances directly on the canvas.
- It edits fills, strokes, padding, spacing, sizing and variant properties, and can batch-update many text nodes at once.
- It binds design token variables to fills and strokes, and resolves variables to their current values.
Skills that ship with the repo
The repo also includes six prompt skills under .github/skills/ for multi-step jobs. They cover accessibility audits, content review, documentation pages, slide decks, online research and workflow diagrams.
- a11y-audit scans frames for WCAG 2.2 issues such as contrast, font size, touch targets and alt text, then annotates violations.
- content-review checks UI text against grammar, capitalization and punctuation rules and applies fixes.
- figma-slides builds decks with seven slide types, sorted into sections on the canvas.
Who Figma AI Bridge is for
Best for
- VS Code users who want Copilot to draw and edit in Figma rather than only read from it.
- Designers automating repetitive canvas work, who may also compare Claude Talk to Figma.
- Teams that want a path that writes to the canvas. Related: the Figma MCP server.
Not for
- Anyone who wants a hosted server. You start the relay in a terminal each session and keep it running.
- Users without the Figma desktop app, since the plugin is imported from a manifest there.
- Design-to-code work. The tools edit Figma layers and do not emit HTML or CSS.
Use it with UiChemy
Figma AI Bridge produces and edits designs inside Figma. Once a frame is ready, UiChemy's Figma to WordPress converts it into an editable WordPress page, and Composer handles later tweaks. Click Get Started on uichemy.com.
Connect Figma AI Bridge MCP: Let Copilot Design in Figma in Real Time to your AI client
npm run setupClone and install
Clone the repository as the README directs, move into the folder, and run
npm run setup.Import the Figma plugin
In the Figma desktop app choose Plugins, Development, Import plugin from manifest, then select
plugin/manifest.json.Configure VS Code
Opening the project folder in VS Code uses the bundled
.vscode/mcp.json. For global use, add the config above to your usermcp.jsonwith the real path.Start the relay each session
Run
npm run relayin a terminal and leave it open. Then run the Figma AI Bridge plugin in Figma and click Connect.Start designing
The plugin and server both join the
autochannel, so commands work right away. Usejoin_channelto switch channels for multiple instances.
Client configuration
{
"servers": {
"figma-ai-bridge": {
"type": "stdio",
"command": "node",
"args": ["/absolute/path/to/figma-ai-bridge/server/index.js"]
}
}
}Endpoints and ports
WebSocket on port 3055Forwards messages between the MCP server and the Figma pluginserver/index.jsMCP server, stdio transportWhat you can do with it
- Real-time canvas controlCommands travel from the agent through the relay to the plugin, which applies them inside Figma.
- Wide tool setDozens of tools cover reading, creating, editing, deleting, exporting and scanning nodes.
- Design token variablesScan, collect, resolve and bind variables to fills and strokes.
- Slides and docsDedicated tools build presentation slides and structured documentation pages.
- Workflow diagramsOne tool produces flowcharts with auto-layout, shapes and arrows.
- Six prompt skillsAccessibility audit, content review, docs, slides, research and diagrams are packaged as SKILL.md workflows.
- Helper scriptsCLI scripts send a single command or batch-bind variables on a chosen channel.
Tools it exposes
get_document_info
Returns information about the current Figma document.
read_my_design
Returns detailed info about the current selection, including all node details.
get_styles
Gets all styles from the document.
get_local_components
Gets all local components.
create_frame
Creates a frame with optional auto-layout settings.
create_text
Creates a text element.
set_multiple_text_contents
Batch-updates multiple text nodes.
set_layout_mode
Sets auto-layout mode to horizontal or vertical.
set_component_properties
Switches component variant properties such as type and size.
export_node_as_image
Exports a node as PNG, JPG, SVG or PDF.
scan_text_nodes
Scans all text nodes in a subtree.
create_slide
Creates a single presentation slide in one of seven layouts.
create_workflow_diagram
Builds a flowchart or process diagram with shapes, arrows and auto-layout.
bind_variable_to_fill
Binds a design token variable to a node's fill color.
resolve_variable
Resolves a variable by ID to get its current value.
join_channel
Switches to a different WebSocket channel.
Frequently asked questions
What is Figma AI Bridge?
It is an MIT licensed project that lets an AI assistant control Figma in real time over MCP. It has a Node.js MCP server, a relay on port 3055 and a Figma plugin. The README demonstrates it with GitHub Copilot in VS Code.
How do I install Figma AI Bridge?
Clone the repository, run npm run setup, import plugin/manifest.json in the Figma desktop app, and configure VS Code. Each session, run npm run relay and click Connect in the plugin.
Which agents does it support?
The README documents GitHub Copilot in VS Code, configured through .vscode/mcp.json. The server uses stdio, so a client that can launch a Node.js stdio server may work, but the README does not document other clients.
Do I need to keep a server running?
Yes. You start the relay with npm run relay and leave it running for the session. The MCP server connects to it on port 3055, and the Figma plugin connects to the same relay.
Can it change design token variables?
It can bind a variable to a node's fill or stroke, scan a node tree for bound variables, collect them with resolved values, and resolve a variable by ID. A helper script batch-binds variables from JSON.
What are the included skills?
Six prompt skills live in .github/skills/: a11y-audit, content-review, figma-doc, figma-slides, online-research and workflow-diagram. Each has a SKILL.md with the full workflow. The a11y-audit skill adds references, a Python check script and unit tests, while content-review adds a style guide.
How does it compare with other Figma MCP servers?
This one focuses on writing to the canvas through a plugin and relay, which you start each session. It needs the Figma desktop app open with the plugin connected. To compare other Figma servers, see Claude Talk to Figma and Framelink Figma MCP.