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 — 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

Setup Instructions

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