StackMCP
ui-design

Figma MCP

43

Community

Access Figma designs, extract design tokens, inspect layers, and bridge the gap between design and code from your AI editor.

282.9k/wk4.1K tokens(2%)1y ago
Network
figmadesignuidesign-tokenscomponents

Quick Setup

Paste in ~/.claude.json

json
{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Part of these stacks

Designer to Developer StackFrontend Developer StackImage & Media StackMobile Developer StackReact + Firebase StackUX Researcher Stack

Recommended Skills

Skills specialize your AI editor when working with Figma MCP. Learn more

Implement DesignOfficialworkflow

Official Figma skill to translate designs into production-ready code with pixel-perfect accuracy. Follows a 7-step structured workflow.

npx skillsadd figma/mcp-server-guide/implement-design2,500 installsskills.sh
Figma Design-to-Codeworkflow

Structured workflow for Figma-to-code with 1:1 visual fidelity. Uses Figma MCP for design context, screenshots, and assets.

npx skillsadd openai/skills/figma-implement-design322 installsskills.sh
Senior Frontend Developerrole

Frontend development expertise for React, Next.js, TypeScript. Pairs with Figma MCP to turn designs into production components.

alirezarezvani/claude-skills
View on GitHubnpm