Figma Code Context

MCP server that transforms Figma API data into AI-friendly formats, enabling LLMs to generate pixel-perfect frontend code from design files.

Features

• 6 focused MCP tools — streamlined for UI restoration with minimal model decision overhead
• Visual fidelity first — goal is browser rendering matching the design, not property-level replication
• Condensed format — token-efficient visual hierarchy with layout and style information
• URL-first MCP tools — pass Figma URLs directly, with fileKey/nodeId still supported for compatibility
• Style references — CSS/Tailwind output for implementation and visual refinement
• Claude Code and Codex workflows — install Claude slash commands or Codex skills from the same package
• Explicit SVG export — export vector assets only when the workflow requests them

Quick Start

Claude Code

npx figma-code-context init --client claude --dir /path/to/your/project

This copies slash commands to .claude/commands/figma/ and configures the MCP server in the project .mcp.json.

The default init target is still Claude Code for backward compatibility:

npx figma-code-context init --dir /path/to/your/project

Codex

npx figma-code-context init --client codex

This copies Codex skills to $CODEX_HOME/skills/ or ~/.codex/skills/ and configures the MCP server in $CODEX_HOME/config.toml or ~/.codex/config.toml.

Install both clients at once:

npx figma-code-context init --client all --dir /path/to/your/project

Figma Token

Get a personal access token from Figma Developer Settings, then configure FIGMA_TOKEN.

For Claude Code, set it in .mcp.json:

{
  "mcpServers": {
    "figma-code-context": {
      "command": "npx",
      "args": ["figma-code-context"],
      "env": {
        "FIGMA_TOKEN": "your-token-here"
      }
    }
  }
}

For Codex, set it in ~/.codex/config.toml:

[mcp_servers.figma-code-context]
command = "npx"
args = ["figma-code-context"]

[mcp_servers.figma-code-context.env]
FIGMA_TOKEN = "your-token-here"

Workflows

Claude Code slash commands:

| Command | Description | | -------------------------- | ----------------------------------------------------------------- | | /figma:gen-ui | Universal entry point for UI generation, auto-selects granularity | | /figma:gen-component | Generate a component from a Figma design | | /figma:gen-page | Generate a full page with smart component splitting | | /figma:gen-app | Generate a complete app from a Figma file | | /figma:gen-pixel-perfect | Visual diff and pixel-perfect refinement | | /figma:tweak-style | Compare and fix local style differences |

Codex skills:

| Skill | Description | | -------------------------- | ----------------------------------------------------------------- | | $figma-gen-ui | Universal entry point for UI generation, auto-selects granularity | | $figma-gen-component | Generate a component from a Figma design | | $figma-gen-page | Generate a full page with smart component splitting | | $figma-gen-app | Generate a complete app from a Figma file | | $figma-gen-pixel-perfect | Visual diff and pixel-perfect refinement | | $figma-tweak-style | Compare and fix local style differences |

All workflows auto-detect your project's tech stack and prioritize reusing existing components over creating new ones.

MCP Tools

| Tool | Stage | Description | | ------------------------ | ------------------- | --------------------------------------------- | | get_file_structure | Explore | File overview with pages and top-level frames | | get_node | Explore → Implement | Visual hierarchy in condensed format | | get_node_css | Implement → Refine | CSS or Tailwind style reference | | search_nodes | Explore | Scoped search by name or type | | get_component_variants | Implement | Variant properties and state CSS diffs | | export_svg | Implement | Batch export vector icons as SVG |

Tools are stateless data pipelines. Prompts and skills orchestrate the workflow and decide what to call at each stage. Common tools accept a Figma url directly; fileKey/nodeId remains available for older clients and advanced flows.

Project Structure

packages/
├── client/       — Figma API client with retry and rate limiting
├── core/         — Data transformation (simplify, condense, CSS generation)
├── mcp-server/   — MCP server entry point, tools, prompts, and skills
└── debug-server/ — Development/debugging utilities

Development

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Watch mode
pnpm dev

# Lint & format
pnpm lint
pnpm format

# Create a changeset
pnpm changeset

# Bump versions from changesets
pnpm version

# Publish to npm
pnpm release

Only the figma-code-context package is published. Internal packages (@figma/client, @figma/core) are bundled into the output via tsup.

Requirements

• Node.js >= 18
• pnpm >= 10
• Figma Personal Access Token

License

MIT