figma-ai-designer

About this plugin

Figma AI Designer: CONNECT AI ASSISTANTS TO FIGMA

Connect your AI assistant to Figma and create production-ready components using natural language.

--- QUICK SETUP (2 MINUTES) ---

RECOMMENDED: Use Claude Desktop + Figma Desktop

The 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 DESIGNING

Open 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 Desktop

Cursor

Any MCP-compatible AI client

KEY 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-designer

GITHUB: https://github.com/KosukeOnishi/figma-ai-designer