I wanted to give my AI coding agent access to Figma.
Meet Figma Console MCP, a free tool developed by Southleft that lets Claude Code, OpenAI Codex, Cursor, and other AI agents work directly with Figma.
It uses Figma's Plugin API instead of relying exclusively on the official MCP server.
That means its local design operations aren't subject to the official 20-call monthly MCP quota.
Pretty much everything you'd expect from a serious Figma integration:
Create designs: Frames, shapes, text, components, and complete interface layouts.
Edit existing files: Change colors, typography, spacing, positioning, and other properties.
Manage design systems: Read and modify variables, tokens, components, and styles.
Build prototypes: Work with supported interactions and prototype connections.
Real-time monitoring: Track selections, document changes, and console output.
Visual debugging: Capture screenshots and inspect design elements.
Design-to-code workflows: Extract design specifications and compare them with your implementation.
FigJam support: Create diagrams, flowcharts, tables, and collaborative boards.
And it currently offers around 130 MCP tools in its full local setup.
That's a pretty serious toolkit.
But how does it actually work?
The project uses something called Figma Desktop Bridge.
It's a local plugin running inside the Figma desktop application.
Your AI agent communicates with an MCP server, which connects to the plugin through WebSocket.
The plugin then uses Figma's native Plugin API to inspect and modify your design.
In other words, your AI agent gets direct access to Figma's design functionality without clicking around the interface like a human.
And because the connection is local, it can also monitor changes as you work.
Want to try it?
Here's the basic setup.
Step 1: Install Figma Desktop
Download the macOS or Windows application:
https://www.figma.com/downloads/
Step 2: Get Figma Console MCP
Open the GitHub repository:
https://github.com/southleft/figma-console-mcp
You can configure the MCP server manually or ask your AI coding agent to follow the installation instructions.
For example:
"Set up figma-console-mcp from southleft/figma-console-mcp for my coding environment. Follow the official installation guide, configure the Figma Desktop Bridge, and verify the connection. Ask before modifying existing Figma files or changing global settings."
Step 3: Configure the connection
The recommended local setup requires Node.js 18+, an MCP-compatible AI client, and a Figma personal access token.
Keep your token in the appropriate local configuration. Don't paste it into public repositories or share it in conversations.
Step 4: Import the Desktop Bridge plugin
Open Figma Desktop and navigate to:
Plugins → Development → Import plugin from manifest
Select the manifest generated by Figma Console MCP.
After importing, open your design file and run:
Plugins → Development → Figma Desktop Bridge
Step 5: Start designing with AI
Now ask Claude Code or Codex something like:
"Open my current Figma design, inspect the existing layout, and create a new dashboard screen using the same typography, spacing, and color system."
Or:
"Review the components in this file and identify inconsistencies in the design system."
Or simply:
"Create a responsive SaaS landing page directly in Figma."
And here's the best part.
You can continue editing the design manually while your AI agent works with the same file.
No exporting screenshots after every change.
No manually transferring design specifications back and forth.
Now, one important caveat about the word "unlimited."
The local Plugin API connection avoids Figma's official MCP monthly call quota for those operations.
But Figma's separate REST API limits, account permissions, and your AI model's usage costs still apply where relevant.
So it's not literally unlimited access to every Figma feature.
And there's one notable difference from the official integration.
Figma Console MCP doesn't provide Figma's native Code Connect functionality, which links design components directly to their corresponding code components.
Still, for everyday AI-assisted design, editing, and design-system management, it's a remarkably capable alternative.
First, companies introduce AI integrations.
Then developers discover the limitations. Then someone builds an open-source alternative that gives users more control over their own workflows.
Figma Console MCP is another example of that shift.
Figma Console MCP on GitHub:
https://github.com/southleft/figma-console-mcp
Official installation guide:
https://github.com/southleft/figma-console-mcp/blob/main/docs/setup.md
Figma Desktop:
https://www.figma.com/downloads/
Official Figma MCP limits:
https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/
Free and open source under the MIT license.
#Figma #FigmaMCP #ClaudeCode #OpenAICodex #CursorAI #AIDesign #MCP #VibeCoding
YouTube / ABVX