HTML to Figma — Design System

The only MCP that translates HTML into Figma using your own design system.

Give Claude an HTML file. It reads your design system — published components and design token variables — and builds the layout inside Figma using real DS instances. Not hardcoded shapes. Not a visual approximation. Real component instances with real token bindings.

Not a Figma product. This is an independent, open-source MCP server built for Claude Code.

Why this is different

Most HTML-to-Figma tools do a visual copy — they dump raw frames with hardcoded hex values. When you get the file, nothing connects to your design system. You have to re-apply tokens, swap in real components, and fix every layer by hand.

This tool does the opposite. Claude reads your HTML and your published component library at the same time, maps HTML elements to DS components, applies your token variables to every fill and text style, and builds a Figma file that's already part of your system.

If you update a token in your library and re-publish, the Figma nodes update automatically.

What you can do

Translate an HTML prototype into Figma

Have an existing HTML file — a prototype, a coded mockup, a landing page? Claude reads it and recreates it inside Figma using your design system instead of hardcoded values.

"Here's an HTML file I built as a prototype. Translate it into Figma on the 'Prototypes' page, artboard 'Onboarding v2'. Use my design system components wherever possible — match the layout, hierarchy, and content."

Build UI from a description

Describe a screen and Claude builds it in Figma — section by section, using your actual published components and design token variables.

"Go to the 'Screens' page in my design file and build a new dashboard on the artboard called 'Overview'. Use the top-nav shell. Include: 4 KPI metric cards, a line chart of weekly activity, a data table with sortable columns, and a donut chart by category."

Target specific library components and variables

Name the components you want, and Claude will find and insert the real library instances.

"Build a settings screen using my Sidebar, Modal/Large, and FormInput components. Use the surface-secondary background, spacing-xl gaps, and text-secondary for label colors."

Quick start

Step 1 — Make sure your Figma is set up (see Before you start below)

Step 2 — Run the installer:

bash <(curl -fsSL https://raw.githubusercontent.com/miapre/html-to-figma-design-system/main/install.sh)

The script clones this repo, runs npm install, asks for your Figma token, and prints the exact block to add to ~/.claude/settings.json.

Step 3 — Restart Claude Code, then each session:

1. cd ~/html-to-figma-design-system && npm run bridge — keep this terminal open
2. In Figma desktop: Plugins → Development → HTML to Figma — Design System → Run
3. The plugin badge shows ● ready — you're ready

Before you start: Figma requirements

These are the most common reason things break. Work through them in order before running the installer.