Claude MarketplacesSubmit
felixanhalt avatar

Figma Context Mcp

felixanhalt/figma-context-mcp

Connects Claude to the Figma API and transforms design files into LLM-friendly JSON with CSS-aligned property names. Four tools: get_figma_design pulls node hierarchies with 99.5% size reduction by stripping Figma metadata, get_image_fills extracts asset URLs, render_node_images exports PNGs, and read_vector_svg grabs SVG data. Properties come back as backgroundColor and flexDirection instead of Figma's internal format, inline with each node rather than separate dictionaries. Resolves variables to actual values if you're on Enterprise. Reach for this when you want Claude to generate UI code directly from Figma links without wrestling with raw API responses. Requires a personal access token with file_content:read scope.

GitHub stars
3
tools
3
auth
Secret needed
transport
STDIO
env var
1
last updated
Mar 10, 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-context-mcp
Categories
AI & LLM Tools, Design & Creative
Package
@tmegit/figma-developer-mcp
Transport
STDIO
Auth
Required
Registry
MCP registry, active

More from felixanhalt

Related AI & LLM Tools MCP servers

View all
1bezata avatarkObsidianbezata/kobsidianFilesystem-first MCP for Obsidian — an LLM-maintained wiki inspired by Karpathy's LLM Wiki.3stars
2memphora avatarMemphoramemphora/memphora-mcpAdd persistent memory to AI assistants. Store and recall info across conversations.3stars
3new1direction avatarKorg Recall Mcpnew1direction/korgCross-vendor semantic memory: recall across Claude Code / Codex / Grok sessions by meaning.3stars
4semihkayan avatarCodeweavesemihkayan/codeweave-mcpSave tokens while coding — your AI agent gets structured code context, not file dumps.3stars
5warwickwood-cell avatarGenGEO Agent Registrywarwickwood-cell/gengeo-agent-registryMerchant verification for AI shopping agents.3stars
6leakferrethq avatarLeakferretleakferrethq/leakferretContext-aware secret scanner: lets an AI agent scan, verify, and rewrite secrets before committing.3stars