# 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.

## Install

Merge the JSON below into your `.mcp.json`:

## Quick Use

```json
{
  "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](https://github.com/GLips). Licensed under MIT.
> [GLips/Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP) — 14,000+ GitHub stars

---
Source: https://tokrepo.com/en/workflows/b51a5814-eacc-4864-a047-9fd66c255006
Author: MCP Hub