figme

An MCP server that lets your AI agent read Figma .fig files — offline, with no Figma account or API token.

Save a design from Figma as a .fig file, and your agent can read everything in it: layers and layout, colours, text, components, design tokens and images. figme can also draw any frame as a picture, so the agent can compare what it built with the design.

you: "what does the tab component in design.fig look like?"

fig_overview  → 10 pages, 2,046 components, 273 variables, 212 images
fig_find      → "lv2/tab/large" is 2:1337, on page "Page 1"
fig_style     → display:flex, direction:row, gap:8, padding:"8px 16px",
                cornerRadius:4, stroke #FFFFFF bound to variable "tab/large/underline"
                (active #FFFFFF / inactive #333333)

Why figme

• No account, token or network. figme reads the file on your disk and never contacts figma.com.
• Everything in the file. Layers and geometry, auto-layout, fills, strokes, effects, text with mixed styles, components and instances, variables, prototype links and images. Layout comes back as CSS flexbox, colours as hex, and colours bound to variables keep their token names.
• What Figma shows, not just what it stores. The layers inside a component instance come back with the instance's overrides applied, under the ids Figma itself gives them, and a shared style reports its live value rather than the stale copy cached beside it.
• Pictures as well as numbers. fig_render draws any layer as a PNG or SVG.
• Small responses. Even on a 116,000-node file, a response stays around 20 KB. Results are shallow by default, filterable and paged.
• Robust to Figma updates. Every .fig carries the schema that describes it, and figme decodes the file with that schema, so fields Figma adds later don't break it.

Quick start

You need Node.js 22.15 or newer.

1. Save the design as a .fig file. In Figma, choose File → Save local copy… If it's a Community file, click Open in Figma first.

2. Add figme to your agent. In Claude Code:

claude mcp add figme -- npx -y figme-mcp

For Cursor, VS Code, Windsurf and other clients, see Set up your client.

3. Ask. Give the full path to the file, and paste a Figma link if you have one:

Using figme, read /Users/me/Desktop/App.fig and build this frame as a React component: https://www.figma.com/design/AbC123/App?node-id=3017-121

The agent picks the tools from there. A few more things to try:

• "List the pages and the most-used components in /Users/me/Desktop/App.fig."
• "Turn the colour variables in /Users/me/Desktop/App.fig into CSS custom properties."
• "Render the sign-in screen in /Users/me/Desktop/App.fig to /Users/me/Desktop/sign-in.png."

Set up your client

Every client runs the same command, npx -y figme-mcp. Only the place you put it changes.

claude mcp add figme -- npx -y figme-mcp           # this project
claude mcp add -s user figme -- npx -y figme-mcp   # every project

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

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

<detail

... View full README on GitHub