DEV Community

An Hoàng
An Hoàng

Posted on

Let your AI assistant design in Figma

#ai #mcp #claude #figma

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)