Claude MarketplacesSubmit
felixanhalt avatar

Figma To Code Mcp

felixanhalt/figma-to-code-mcp

This server connects Claude to the Figma API and transforms design files into CSS-aligned JSON that's 99.5% smaller than raw API responses. It exposes tools to fetch design data with CSS property names (backgroundColor, flexDirection), resolve Figma variables to actual values, export SVGs, and render nodes as PNGs. The main trick is stripping out Figma metadata LLMs don't need for code generation while keeping layout, typography, colors, and spacing intact. You'll want this when building UIs from Figma designs in Cursor or similar tools. Requires a Figma personal access token with file_content:read and library_content:read scopes. Variable resolution needs an Enterprise plan, but you can disable it otherwise.

GitHub stars
7
tools
3
auth
Secret needed
transport
STDIO
env var
1
last updated
Jul 23, 2026
View on GitHub

Tools

3 tools

Public tool metadata for what this MCP can expose to an agent.

get_figma_designFetches CSS-aligned, LLM-optimized design data. Exports SVG assets and a PNG render.

Fetches CSS-aligned, LLM-optimized design data. Exports SVG assets and a PNG render.

No parameter schema in public metadata yet.

get_image_fillsRetrieves image fill URLs from a Figma file

Retrieves image fill URLs from a Figma file

No parameter schema in public metadata yet.

render_node_imagesRenders Figma nodes as PNG images

Renders Figma nodes as PNG images

No parameter schema in public metadata yet.

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Configuration

FIGMA_API_KEY*secret

Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

Readme

Figma To Code MCP

Transform Figma design data into a compact, LLM-friendly format for code generation and UI building.

weekly downloads MIT License

Why This Project?

Figma To Code MCP specializes in extracting only the information LLMs need to build UIs while removing Figma-specific metadata that isn't relevant for code generation. The result:

View the full README on GitHub

Details

Repository
github.com/felixanhalt/figma-to-code-mcp
Categories
AI & LLM Tools, Design & Creative
Package
@tmegit/figma-to-code-mcp
Transport
STDIO
Auth
Required
Registry
MCP registry, active

More from felixanhalt

Related AI & LLM Tools MCP servers

View all
1aeoess avatarMingle — Agent-Native Connection Protocolaeoess/mingle-mcpMeet the people you're looking for. Your agent composes, you approve. Nothing scores or ranks you.7stars
2hifriendbot avatarCogmemaihifriendbot/cogmemai-mcpMemory for any Ai: remembers across sessions, enforces your rules before actions, reviews the work.7stars
3overtimepog avatarCloakmcpovertimepog/cloakmcpStealth browser MCP server — anti-detection Chromium with snapshot-first agent interface7stars
4freema avatarPixelForgefreema/pixelforge-mcpForge pixel art sprites, animations, tilesets and game assets with Google Gemini.6stars
5bitbond avatarToken Toolbitbond/token-tool-mcpDeploy compliant ERC-20 tokens from any AI agent. 17 tools, 10 networks, CertiK-audited.6stars
6scrollmark avatarSocialGPTscrollmark/socialgpt-mcpSocial media analytics, video analysis, and competitor intel for any MCP-compatible AI agent.6stars