Log inSubmit server
Figma Context MCP logo

Figma Context MCP

Extracts Figma design data, images, and SVGs into compact, CSS-oriented output for AI coding workflows.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Figma Context MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "figma-context-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@tmegit/figma-to-code-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y @tmegit/figma-to-code-mcp

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 7d ago.

Overview

Figma-Context-MCP MCP server connects AI coding clients to the Figma API and converts design data into compact, CSS-oriented output. Its MCP tools fetch design details, image fill URLs, rendered node images, and vector SVG data. Configure it as a Node.js 18+ stdio server with a Figma personal access token, then provide a Figma file, frame, or group link in an agent chat. Reach for it when an agent needs design structure and visual assets to implement a Figma-based interface.

Use cases

  • Generate interface code from a Figma frame
  • Inspect Figma layout and typography data
  • Retrieve image assets for implementation
  • Render design nodes as PNG references
  • Export vector nodes as SVG

Key features

  • CSS-oriented design data
  • Figma variable resolution
  • Image fill URL retrieval
  • PNG node rendering
  • SVG reading and export
  • Library variable caching

Tools4

What Figma Context MCP lets your agent do. Expand a tool for its parameters.

Self-reported~63 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

5/5 checks healthy over the last 41d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 15d ago via OSV.dev · @tmegit/figma-to-code-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars7Stargazers on the source repository.
npm downloads647Package downloads in the last 30 days.
Last commit1mo agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Tools exposed4Callable tools this server registers over MCP.
Directory activity2 viewsConfig copies, upvotes, and views on AllMCPs.

How Figma Context MCP works

What Figma-Context-MCP does

Figma-Context-MCP MCP server retrieves design information from Figma and reformats it for AI-assisted UI implementation. The main design fetch returns inline styles, layout properties, typography, colors, spacing, effects, text, and component information using names that correspond more closely to CSS. It removes Figma metadata that is not needed for code generation, such as bounding boxes, constraints, and prototype data.

The transformation also resolves Figma variables when enabled, represents layout with flexbox-oriented primitives, and collapses repeated patterns. The resulting payload is intended to preserve UI-building information while being substantially smaller than the source response. SVG assets can be written to a configured directory.

How it works

An agent client starts the server through MCP, then sends a Figma file, frame, or group link as part of a design implementation request. The server calls the Figma API for the requested nodes and related styles. Depending on configuration, it also reads local variables and resolves components from library files. The processed result is returned in YAML by default, or JSON when that output mode is selected.

A single design fetch can make several Figma API requests. Library components and variables can therefore affect request volume and rate-limit usage. Library variable files may be prefetched and cached to reduce repeated work during later design fetches.

Setup and configuration

Node.js 18 or newer is required. A typical stdio setup runs the published package with npx and supplies a Figma personal access token through --figma-api-key or FIGMA_API_KEY. CLI options take precedence over environment variables. The server listens on port 3333 and host 127.0.0.1 by default when using its HTTP-related settings.

Supported environment variables include FIGMA_API_KEY, FIGMA_OAUTH_TOKEN, FIGMA_TO_CODE_MCP_PORT, PORT, FIGMA_TO_CODE_MCP_HOST, OUTPUT_FORMAT, SKIP_IMAGE_DOWNLOADS, and FIGMA_SVG_OUTPUT_DIR. Library prefetch and caching can be configured with FIGMA_LIBRARY_VARIABLE_PREFETCH_FILE_KEYS, FIGMA_MCP_CACHE_PATH, FIGMA_MCP_CACHE_TTL_MS, and FIGMA_MCP_REFRESH_CACHE.

The token needs file_content:read and library_content:read for the corresponding data. file_variables:read is optional and applies to variable access on Enterprise plans.

Tools and capabilities

  • get_figma_design fetches CSS-aligned, LLM-oriented design data and can export SVGs to a selected directory.
  • get_image_fills returns image-fill URLs from a Figma file.
  • render_node_images renders selected Figma nodes as PNG images.
  • read_vector_svg reads vector node data as SVG.

Use Figma-Context-MCP MCP server when an agent needs structured design properties together with image or vector assets. The tools cover both data extraction for code generation and visual references for the implementation process.

Limitations and notes

Variable resolution requires a Figma Enterprise plan; set resolveVariables to false when that access is unavailable. The design-fetch operation can consume multiple API requests, especially when library files are involved.

The library cache is used only when library file keys are configured. Its path may identify a file or directory, and the refresh flag forces a startup refetch. SVG output defaults to a temporary directory unless another location is provided.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Figma Context MCP

Figma-Context-MCP is an MCP server that connects AI coding clients to the Figma API. Its main tools fetch CSS-oriented design data, image fill URLs, rendered node PNGs, and vector SVG data. It helps agents inspect Figma files, frames, and groups when generating interface code.

Install it by configuring an MCP client to run the published package with Node.js 18 or later and `npx`. Pass a Figma token with `--figma-api-key`, or set `FIGMA_API_KEY` in the client environment. The documented setup uses stdio mode.

Yes, Figma-Context-MCP works with Cursor through its MCP configuration. Add the server command and Figma API key, open Cursor chat in agent mode, and provide a Figma file, frame, or group link for the agent to inspect.

It needs `file_content:read` to read file nodes, layout, and styles, plus `library_content:read` to read published components and styles. `file_variables:read` is optional for variables and requires an Enterprise plan.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFigma Context MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/figma-context-mcp?style=directory)](https://allmcps.com/mcp/figma-context-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/figma-context-mcp"><img src="https://allmcps.com/api/badge/figma-context-mcp?style=directory" alt="Figma Context MCP on AllMCPs" /></a>