What is AIConnect for Figma?
AIConnect for Figma is an open source MCP server plus a Figma plugin. An AI coding agent calls its tools to create frames, text, auto-layout, fills, design tokens and whole pages through batch_ops, all over a local relay with no cloud service and no telemetry.
AIConnect is an MCP server and Figma plugin that gives an AI coding agent a pen in your real Figma file. It runs locally, talks only to a relay on localhost, and sends nothing to a cloud service.
The agent creates frames, text, auto-layout, fills, gradients, effects and SVGs, imports images, clones nodes and builds a design token system. Its headline tool, batch_ops, assembles a whole page in one round trip.
How batch_ops builds a page
Operations in a batch run in order inside the plugin. Children refer to parents created earlier in the same batch with @ref placeholders, and the reply is a compact map of ids and errors, not a long node dump.
What the agent can do beyond drawing
- Generate a palette or theme from a preset, a brand name or a single color, then create and bind Figma variables.
- Export tokens as DTCG, CSS or Tailwind output, and read Dev Mode style CSS for any node with get_css.
- Check text contrast against WCAG and get auto-fix suggestions, plus font pairing recommendations.
- Insert icons from the Iconify library and openly licensed images from Openverse, in place on the canvas.
- Read its own work back through get_page_snapshot and get_console_logs, so it can correct mistakes.
Who AIConnect for Figma is for
Best for
- Designers and developers who want an agent to draft layouts and token systems directly in Figma, then refine them by hand.
- Teams comparing bridge style servers such as the Figma AI bridge and Figma Pilot before choosing one.
- Agents guided by a skill such as Figma generate design, with a design token skill covering naming rules.
Not for
- Anyone on the Figma web app only. The README says the browser version cannot import plugins, so the desktop app is required.
- Hands off automation. The Figma window must stay focused, because Figma pauses background plugins and calls then time out.
Use it with UiChemy
AIConnect designs inside Figma, and UiChemy picks up from there. Once the agent has drawn a page, Figma to WordPress converts it, and Composer edits the result in Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect AIConnect for Figma: Let an Agent Design Whole Pages Locally to your AI client
npx -y aiconnect-figma-mcpCheck prerequisites
Install Node 18 or later, or Bun, and the free Figma desktop app. The browser version of Figma cannot import plugins.
Add the server
Put the mcpServers entry above in .mcp.json for Claude Code or mcp.json for Cursor. The server hosts the relay itself, so no second process is needed.
Install the plugin
Download aiconnect-figma-plugin.zip from the latest GitHub release and unzip it. In the Figma desktop app choose Plugins, Development, Import plugin from manifest, and pick manifest.json.
Start a fresh session
Restart your agent so the new tools load, then run the AIConnect for Figma plugin from the Development menu. A red panel before an agent attaches is normal.
Join the channel
Ask the agent to call get_status, then join_channel with no arguments, which auto-detects the running plugin. Keep the Figma window focused while it works.
Client configuration
{
"mcpServers": {
"AIConnect": {
"command": "npx",
"args": ["-y", "aiconnect-figma-mcp"]
}
}
}Endpoints and ports
ws://localhost:3055WebSocket between the MCP server and the Figma pluginnpx -y aiconnect-figma-mcp relayOptional, shares one relay across several agentsWhat you can do with it
- Whole pages in one callbatch_ops sends a full layout once, instead of 100 or more individual calls.
- Local and privateEverything talks to a relay on localhost. The README states there is no cloud and no telemetry.
- Design token workflowVariables can be created, bound and exported to DTCG, CSS or Tailwind.
- Built in design intelligencePalette, theme, contrast, font pairing, icon and image tools work without API keys.
- Dev Mode style CSSget_css returns CSS for any node, and the README says no paid Dev seat is needed.
- Self checkingget_status, get_console_logs and get_page_snapshot let the agent verify what it built.
- Client agnosticIt works with any MCP client, not one editor, and the code is MIT licensed.
Tools it exposes
batch_ops
Builds a whole page or section in one round trip, with @ref placeholders linking children to parents.
join_channel
Connects the agent to the running plugin. With no arguments it auto-detects the channel.
get_status
Reports connection status so the agent can check the plugin before building.
create_frame
Creates a frame, including auto-layout frames with fills.
create_text
Creates a text node inside a parent frame.
apply_brand
Builds a full token system from a preset, a brand name or one color.
generate_palette
Generates OKLCH color ramps.
generate_theme
Generates a theme, which can then be bound to variables.
check_contrast
Runs WCAG contrast checks and suggests automatic fixes.
suggest_fonts
Recommends typeface pairings.
insert_icon
Inserts an Iconify icon in place on the canvas.
search_icons
Searches the Iconify catalog of 200k+ icons.
search_images
Searches openly licensed Openverse imagery.
create_variable
Creates a Figma variable.
bind_variable
Binds a variable to a node property.
export_tokens
Exports design tokens as DTCG, CSS or Tailwind.
get_css
Returns Dev Mode style CSS for a node, with no paid Dev seat.
get_page_snapshot
Lets the agent see its own work and self correct.
Frequently asked questions
What is AIConnect for Figma?
It is an open source MCP server and Figma plugin that lets an AI coding agent create and edit layers in your real Figma file. Everything runs locally through a relay on localhost, and the README states that nothing leaves your machine.
How do I install AIConnect for Figma?
Add an mcpServers entry that runs npx -y aiconnect-figma-mcp, download the plugin zip from the latest GitHub release, and import its manifest.json in the Figma desktop app. Then start a fresh agent session so the tools load, and call join_channel.
Why do I need to restart my agent session?
MCP clients load a server's tools when a session starts, so the session you added the server in cannot see join_channel yet. A fresh session loads it, and that session's server hosts the relay that turns the plugin panel from red to green.
Does it work with Claude Code?
Yes. The README gives .mcp.json as the config file for Claude Code and mcp.json for Cursor, and calls the server compatible with any MCP client. It also offers a setup prompt you can paste into Claude Code or Cursor to have the agent install it.
What does batch_ops do?
It builds a whole page or section in one round trip. Operations run in sequence inside the plugin, later operations can point at earlier ones with @ref placeholders, and the result is a compact map of ids and errors instead of a long node dump.
Which tools does it expose?
The README groups its tools into reads, create and edit, style, layout, batch, design tokens, debugging and design intelligence. Examples include create_frame, set_fill_color, create_variable, export_tokens, get_css, check_contrast and insert_icon. The README quotes two different totals, so count them in the repository.
Why do calls time out sometimes?
Figma pauses background plugins. The README advises keeping the Figma window focused while the agent works, since an unfocused window shows up as command timeouts. If you want to compare other plugin based servers, see the Figma AI bridge for another route.