1
Add it to Claude Code
claude mcp add figma-mcp-bridge -- npx -y @gethopp/figma-mcp-bridgeTry It Out
After setup, try these prompts with your AI agent:
→Analyze the current Figma document and suggest improvements for the UI layout.
→Generate React code components based on the selected frames in my Figma file.
→Explain the design system structure found in the active Figma document.
→Convert the current Figma design into a Tailwind CSS implementation.
Prerequisites & system requirements
- An MCP-compatible client (Claude Code, Cursor, Windsurf, Claude Desktop, or Codex)
- Node.js 18+ with npm/npx installed
Conare · memory for coding agents
Keep this setup from going cold
Save the docs, env vars, and workflow around Figma MCP Bridge in Conare so Claude Code, Codex, and Cursor remember it next time.
Remember this setup$npx conare@latest