What is Figma Context MCP — Design-to-Code for AI Agents?

MCP server that gives AI coding agents access to Figma design context. Provides layout, styles, and component info so agents like Cursor and Claude Code can generate pixel-perfect code. 14K+ stars.

Is Figma Context MCP — Design-to-Code for AI Agents free to use?

Yes. Figma Context MCP — Design-to-Code for AI Agents is freely available on TokRepo. Check the Source & Thanks section on the asset page for the specific open-source license.

How do I install Figma Context MCP — Design-to-Code for AI Agents?

Visit the asset page on TokRepo and click "Copy for agent" to get the installation instructions. Most assets can be installed with a single command.

Figma Context MCP — Design-to-Code for AI Agents

How It Works

Share a Figma link with your AI agent
The MCP server fetches the design's layout tree, styles, and component info
The agent uses this context to generate pixel-accurate HTML/CSS/React code

What It Provides

Layout tree — Component hierarchy with positions, sizes, constraints
Styles — Colors, typography, effects, border radius, spacing
Component instances — Variant properties, overrides
Auto-layout — Flex/grid direction, gap, padding, alignment
Images — Exports image fills as optimized assets

FAQ

Q: What is Figma Context MCP? A: An MCP server that gives AI coding agents access to Figma design data — layout, styles, spacing, and component info — so they can generate pixel-perfect code from designs. 14K+ GitHub stars.

Q: Do I need a Figma paid plan? A: No, it works with free Figma accounts. You just need a Personal Access Token from Figma Settings.

Figma Context MCP — Design-to-Code for AI Agents

How It Works

What It Provides

FAQ

Source et remerciements

Discussion