How to use Figma MCP with Claude Code to build pixel perfect designs | Composio

Abstraction: Configuring Figma MCP server with Claude Code for pixel-perfect frontend generation

Key points:

• Composio provides a Figma MCP server that integrates with Claude Code via claude mcp add --scope user --transport http using either OAuth or API key auth
• Configuration is saved in ~/.claude.json globally; recommended to copy to project-local .mcp.json to scope MCP servers per project
• After connecting Figma via Composio dashboard, Claude Code can read any Figma design file and generate matching frontend code
• Demo: cloned a CRM Dashboard design from Figma to near-exact HTML/CSS/JS output; works with Tailwind and JS frameworks too
• Prompt pattern used: specify the Figma URL and instruct Claude not to add creativity, to clone exactly
• Composio handles authentication and acts as a trusted MCP server layer; also supports Cursor and Gemini CLI

Connections: Claude Code · Figma · Composio · Model Context Protocol · Agentic Coding

Source: https://composio.dev/blog/how-to-use-figma-mcp-with-claude-code-to-build-pixel-perfect-designs