MCP ConfigsMar 30, 2026·2 min read

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.

TO
TokRepo精选 · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY"]
    }
  }
}

Add to your MCP client config (Cursor, Claude Code, etc). Get your Figma API key from Figma Settings > Personal Access Tokens.

Intro

Figma Context MCP is an MCP server that bridges Figma designs with AI coding agents. It provides structured layout information, styles, spacing, typography, and component hierarchy from any Figma file — enabling agents like Cursor and Claude Code to generate code that matches your designs precisely. 14,000+ GitHub stars.

Best for: Frontend developers using AI agents to implement Figma designs Works with: Cursor, Claude Code, Gemini CLI, Windsurf, any MCP client

How It Works

  1. Share a Figma link with your AI agent
  2. The MCP server fetches the design's layout tree, styles, and component info
  3. 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.

🙏

Source & Thanks

Created by GLips. Licensed under MIT. GLips/Figma-Context-MCP — 14,000+ GitHub stars

Related Assets

Mastra — TypeScript AI Agent Framework

AI agent framework for TypeScript from the Gatsby team. Build agents with tools, workflows, RAG, memory, evals, and 50+ integrations. Modern TS-native design. 22K+ stars.

TokRepo精选

Prompts.chat — 155K-Star ChatGPT Prompt Library

The largest open-source ChatGPT prompt library with 155K+ GitHub stars. Community-curated prompts for every role — developer, writer, translator, analyst, and more. Self-hostable.

TokRepo精选

LangGraph — Build Stateful AI Agents as Graphs

LangChain framework for building resilient, stateful AI agents as graphs. Supports cycles, branching, persistence, human-in-the-loop, and streaming. 28K+ stars.

TokRepo精选
◈Home🏆Trending👤Me