figma-coder-mcp

figma-coder-mcp

Figma Coder is an MCP server and CLI that turns any Figma frame into pixel-faithful, self-contained HTML, right inside your AI coding agent. No screenshots, no rebuilding by hand. Works with any Figma account: no paid plan, completely free.

Homepage: https://figmacoder.sitenow.cloud

figma-coder-mcp is one program that is two things at once: an MCP server your AI agent talks to, and a command-line tool you can run in a terminal. It runs in two modes and picks one automatically: with a Figma token it converts locally on your machine; without one it uses the hosted backend. Both modes produce identical output.

npm i -g figma-coder-mcp      # or run on demand with: npx figma-coder-mcp

Setup

Setup is two steps. Step 1 (required): add the server to your project's .mcp.json. Step 2: give it access to Figma using either a personal access token (local mode) or by signing in with Figma (remote mode).

Local mode — personal access token

Create a personal access token (figd_…) in your Figma account settings (Settings → Security → Personal access tokens: https://www.figma.com/settings). Add the server to .mcp.json with the token in the inline env:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-coder-mcp"],
      "env": { "FIGMA_PAT": "figd_xxx" }
    }
  }
}

Prefer not to keep the token in the project file? Run npx figma-coder-mcp set-token figd_xxx to store it once in the global settings file instead, and leave the env out.

Remote mode — sign in with Figma (OAuth)

Add the server to .mcp.json with no token, then run npx figma-coder-mcp login once to authorize via the hosted backend. The login is stored globally; no token lives in your project.

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-coder-mcp"]
    }
  }
}

login opens the authorize page in your browser, captures the token the backend hands back over a one-shot loopback server, and stores it in ~/.figma-mcp/settings.json. The access token is refreshed silently when it expires; re-run login only if the refresh token itself is revoked. Set FIGMA_MCP_NO_BROWSER=1 on headless/SSH hosts to print the URL instead of launching a browser.

Then ask your agent: "Convert this Figma frame to HTML."

Tools

Once the server is registered, your agent can call these two tools. There is nothing to configure: just ask in plain language and the agent picks the right one.

Tool	What it does
get_figma_data	Returns a compact, token-efficient design tree for the agent to reason about and generate code from. Repeated styles are deduped into globalVars.styles (each node carries a short style ref), per-node position/size stays inline as box, and repeated subtrees are hoisted into elements (occurrences become {ref}) — typically 30–45% smaller than the raw per-node CSS. Returned as minified JSON (most token-efficient); pass format:"yaml" for a more readable (but larger) form. Small results come back inline; large ones are written to a file and summarised.
convert_figma_to_html	Produces finished, self-contained HTML + Tailwind. Asset inlining is off by default (placeholders shown for images/vectors); pass assets:true to render & inline them. The HTML is written to a file and a compact summary + path is returned to keep the agent's context small. Args: mode (tailwind/inline), document, assets, assetScale, round, llm, outFile.

Conversion fidelity

The deterministic converter preserves a lot of Figma intent automatically:

• Auto-layout → responsive flex: consumes layoutSizing (FILL → flex-1/self-stretch, HUG → content-sized, FIXED → px) plus gap, padding, alignment and min/max — auto-layout frames come out responsive, not pixel-frozen. Non-auto-layout frames stay exact-positioned.
• Images: image fills honor scaleMode (FILL/FIT/TILE/STRETCH) and crop transforms. Icon/illustration groups collapse into a single SVG (fewer renders); image-filled ellipses become CSS circles.
• Styles: per-corner radius, stroke alignment (OUTSIDE/CENTER via outline), per-side borders, all gradient types (linear/radial/conic), blend modes, shadows, backdrop blur, opacity.
• Text: font, line-height, letter-spacing, alignment (incl. vertical), decoration/case, gradient text, and mixed-style runs (a bold/colored word becomes its own <span>).
• round (on by default): snaps on-grid values to idiomatic Tailwind tokens (p-4, gap-6, rounded-lg, text-2xl, font-bold, and exact palette colors → bg-blue-500); off-grid values and non-palette colors stay exact, so it never silently changes real sizes or colors. Pass round:false (or --no-round on the CLI) for exact arbitrary values everywhere.

Configuration

A setting can come from three places. When the same setting appears in more than one, the higher one wins: command flags > environment variables > stored settings.json.

Settings live in two places:

• .mcp.json (project scope): how your agent launches the server, plus an optional inline env (such as FIGMA_PAT). Only applies to this project.
• ~/.figma-mcp/settings.json (global scope): your stored Figma token or OAuth login, written by set-token / login. Shared by every project. You only have this file if you run set-token or login.

The global file mirrors the env block of a .mcp.json — user-facing values sit under env, keyed by the same names as the environment variables, so you can edit it by hand:

{
  "env": {
    "FIGMA_PAT": "figd_xxx",
    "FIGMA_MCP_API": "https://figmacoder-api.sitenow.cloud",
    "FIGMA_MCP_TOKEN": "<oauth access token>"
  },
  "refreshToken": "<oauth refresh token>",
  "apiTokenExpiresAt": 1735689600000
}

Environment variables:

Var	Meaning
FIGMA_PAT / FIGMA_TOKEN	Figma personal access token (local mode).
FIGMA_MCP_API	Backend converter base URL. Defaults to https://figmacoder-api.sitenow.cloud.
FIGMA_MCP_TOKEN	OAuth/bearer token for the backend. Usually set for you by login; an explicit value is used verbatim and never auto-refreshed.
FIGMA_MCP_MODE	auto (default) · local · remote. Auto prefers local.
FIGMA_MCP_OUT_DIR	Where HTML/JSON outputs are written. Default <cwd>/figma-output.
FIGMA_MCP_NO_BROWSER	If set, login prints the URL instead of opening a browser (headless/SSH).
OLLAMA_CLOUD_URL / OLLAMA_API_KEY / OLLAMA_CLOUD_MODELS	Optional, advanced. Only needed for the --llm restructure pass.

CLI

The same program also works on its own, without an agent. Flags for convert/data: --node <id>, --mode tailwind|inline, --assets (off by default), --no-round (idiomatic Tailwind snapping is on by default), --llm, --out <file>.

Command	What it does
figma-coder-mcp	Start the MCP server over stdio (the default command).
convert <url|key>	One-off convert to a self-contained HTML file.
data <url|key>	Print or save the compact design tree (deduped styles + repeated-subtree templates). --format json (default) or yaml.
set-token <PAT>	Store a Figma personal access token globally (local mode).
login	Sign in with Figma via OAuth, stored globally (remote mode).
status	Show how requests will be served. No secrets printed.
logout	Remove the global stored credentials.

figma-coder-mcp convert "https://www.figma.com/design/<key>/Title?node-id=1-23"
figma-coder-mcp convert <fileKey> --node 1:23 --assets --out page.html
figma-coder-mcp convert <fileKey> --node 1:23 --no-round   # exact arbitrary values
figma-coder-mcp data <fileKey> --node 1:23

License

MIT