How to Use ai.to.design

Follow these steps to connect Claude Desktop to your Figma canvas and start generating designs with AI.

1

Create an Account

Sign up for a free ai.to.design account. You'll get 5 free renders per month to try it out.

2

Get Your API Key

After signing in, go to your Dashboard and navigate to the API Keys section. Generate a new API key and copy it.

3

Install the Figma Plugin

Search for 'ai.to.design' in the Figma Community or install it directly from the plugin marketplace. The plugin works in both Figma desktop and web apps.

4

Configure the Plugin

Open the ai.to.design plugin in Figma. Paste your API key in the settings and click 'Connect'. The plugin will establish a secure connection to our servers.

5

Configure Claude Desktop

Add the MCP server URL to your Claude Desktop configuration. The URL is shown in the plugin after connecting. Claude will now be able to render designs directly to your Figma canvas.

6

Start Designing

Ask Claude to create designs! Try prompts like 'Create a login form with email and password fields' or 'Design a pricing card component'. The HTML/CSS will be rendered directly on your Figma canvas.

Tips for Best Results

  • • Be specific about dimensions, colors, and layout in your prompts
  • • Use standard HTML/CSS patterns - the renderer supports most common styles
  • • Iterate on designs by asking Claude to modify specific elements
  • • Keep the Figma plugin window open while working with Claude