Let your AI assistant design in Figma

An Hoàng — Tue, 21 Jul 2026 06:37:40 +0000

I Built an Open-Source Figma MCP Server That Doesn't Need a Figma API Token

Over the past few months, AI coding assistants have become surprisingly good at turning Figma designs into production code.

But after trying almost every Figma MCP server available, I kept running into the same problems.

They required a Figma API token.
API rate limits became frustrating during long sessions.
AI often generated placeholder icons or incorrect images instead of exporting the actual assets from Figma.
Working across multiple Figma files was cumbersome.

So I decided to build my own.

Today I'm open-sourcing Figma MCP Console.

What is Figma MCP Console?

Figma MCP Console is a local MCP server that connects AI assistants directly with Figma Desktop.

It works with:

Claude CLI
Claude Desktop
Codex CLI
Cursor
VS Code (GitHub Copilot)
Windsurf
Antigravity
and any MCP-compatible client.

Instead of relying on the Figma REST API, it communicates through a local bridge between the AI client and a Figma plugin.

That means:

no API token
no API rate limits
lower latency
direct interaction with the currently opened Figma file

Why I built it

The biggest pain point wasn't generating code.

It was getting the AI to faithfully reproduce the original design.

Most tools would output something like this:

different icons
different illustrations
different spacing
different assets

The layout looked similar, but it wasn't actually the same design.

I wanted the AI to export the real assets directly from Figma instead of hallucinating replacements.

What can it do?

1. Figma → Code

Paste a Figma frame link.

The AI can:

inspect the design
export icons
export images
generate production-ready code
compare the final implementation against a screenshot

Instead of stopping after generating code, I encourage the AI to take a screenshot and compare it with the original Figma frame.

This self-verification step dramatically improves the final result.

2. Requirement → Figma

You can also work in the opposite direction.

For example:

Design a SaaS landing page with a hero section, pricing cards and footer.

The AI creates the design directly inside Figma using Auto Layout.

After drawing everything, it screenshots its own work and fixes visual mistakes automatically.

3. Design Token Synchronization

The server can read Figma variables and design tokens.

This makes it much easier to synchronize:

colors
typography
spacing
themes

with your application's design system.

4. Bulk Editing

Instead of manually editing hundreds of layers, you can ask AI to:

rename layers
replace text
reorganize frames
update components

Multiple Figma files? No problem.

One feature I really wanted was support for multiple projects.

Every AI session connects to the same local bridge.

You can have multiple Figma files open simultaneously.

The AI simply chooses the correct file based on your prompt.

For example:

Copy the primary color from the Design System file into the CTA button in the Landing Page file.

No additional configuration is required.

Installation

There is no global installation.

Simply run:

npx -y figma-mcp-console

Then import the Figma development plugin once.

That's it.

Tech Stack

The project is built around:

Model Context Protocol (MCP)
TypeScript
Node.js
Figma Desktop Plugin API
Local WebSocket bridge

Why not use the Figma API?

The Figma API is excellent for many workflows.

However, for interactive AI design sessions, I wanted something that:

works instantly
avoids API authentication
isn't affected by rate limits
communicates directly with the currently opened document

A local bridge turned out to be a much better fit.

Roadmap

Some of the features I'm currently working on include:

smarter asset extraction
improved image matching
better design token synchronization
more editing operations
improved multi-file workflows

Feedback Welcome

This project is still evolving, and I'd love feedback from developers using AI-assisted UI development.

GitHub:

https://github.com/hoangann2000/figma-mcp-console

npm:

https://www.npmjs.com/package/figma-mcp-console

If you have ideas, feature requests, or bug reports, feel free to open an issue or start a discussion.

I'd love to hear how you're using MCP with Figma.

DEV Community: An Hoàng