figma-ai-designer

Figma AI Designer: CONNECT AI ASSISTANTS TO FIGMAConnect your AI assistant to Figma and create production-ready components using natural language.--- QUICK SETUP (2 MINUTES) ---RECOMMENDED: Use Claude Desktop + Figma DesktopThe easiest way to get started is with Claude Desktop app, which has built-in MCP support.ADD MCP CONFIGURATION Add this to your AI client settings (e.g., .mcp.json for Claude Code):{ "mcpServers": { "figma-ai-designer": { "command": "npx", "args": ["figma-ai-designer"] } } }START DESIGNINGOpen the AI Designer plugin in Figma.

Ensure the status shows "Connected".

Prompt your AI: "Create a modern login card with a title and primary button."--- COMPATIBILITY & FEATURES ---SUPPORTED CLIENTS:

Claude Code / Claude DesktopCursorAny MCP-compatible AI clientKEY CAPABILITIES:

Structural Translation: Converts HTML/CSS to native Figma components.

Layout Engine: Automatically maps Flexbox to Figma Auto Layout.

High Fidelity: Supports full styling including gradients, shadows, and typography.--- RESOURCES ---NPM: npx figma-ai-designerGITHUB: https://github.com/KosukeOnishi/figma-ai-designer