figma-to-code-mcp

felixAnhalt/figma-to-code-mcp
★ 1 stars TypeScript 🤖 AI/LLM Updated today
MCP server to extract Figma design information and convert it to mostly css for coding agents.
View on GitHub →

Quick Install

Copy the config for your editor. Some servers may need additional setup — check the README.

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "figma-to-code-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "felixAnhalt/figma-to-code-mcp"
      ]
    }
  }
}

README Excerpt

<div align="center"> <h1>Figma To Code MCP</h1> <h3>Transform Figma design data into a compact, LLM-friendly format for code generation and UI building.</h3> <a href="https://npmcharts.com/compare/tmegit-figma-to-code-mcp?interval=30"> <img alt="weekly downloads" src="https://img.shields.io/npm/dm/tmegit-figma-to-code-mcp.svg">

Tools (13)

FIGMA_API_KEYFIGMA_LIBRARY_VARIABLE_PREFETCH_FILE_KEYSFIGMA_MCP_CACHE_PATHFIGMA_MCP_CACHE_TTL_MSFIGMA_MCP_REFRESH_CACHEFIGMA_OAUTH_TOKENFIGMA_SVG_OUTPUT_DIRFIGMA_TO_CODE_MCP_HOSTOUTPUT_FORMATget_figma_designget_image_fillsread_vector_svgrender_node_images