content Editor's Pick

Figma MCP Server

Official MCP server by Figma. Convert designs into code, extract design tokens, access components and variables — directly from Claude Code or any MCP-compatible editor.

Pricing
freemium
GitHub stars
2,013
Last commit
2026-09-21
Page updated

MCP is free. Figma has a free tier (3 files). Pro plans start at $15/editor/month.

View on GitHub
figma (remote MCP)
Website

Features

  • Convert Figma frames into production-ready code
  • Extract design variables, tokens, and component data
  • Access design system components via Code Connect
  • Work with FigJam diagrams and Make prototypes
  • Capture live UI from browser into editable Figma frames
  • Works with Claude Code, Cursor, Windsurf, and VS Code

How to set up the Figma MCP Server

1. Add to Claude Code with one command:
claude mcp add --transport http figma https://mcp.figma.com/mcp
2. Run /mcp in Claude Code and select figma 3. Choose Authenticate to start the OAuth flow 4. Grant access when prompted in your browser 5. You'll see "Authentication successful. Connected to figma" 6. Share Figma design links in your prompts to generate code

Added: 2025-02-18 · Last reviewed: 2025-02-18