How to Use ai.to.design

Follow these steps to connect any MCP-compatible AI tool to your Figma canvas and start generating designs.

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

Install the ai.to.design plugin from the Figma Community. The plugin works in both Figma desktop and web apps.

Get the plugin
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

Connect Your Agent

Add the MCP server URL to your AI tool's configuration. The URL is shown in the plugin after connecting. Any MCP-compatible tool works — Claude Desktop, Claude Code, Cursor, Windsurf, or any other client that supports MCP.

6

Start Designing

Ask your AI 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
  • • Iterate on designs by asking your AI to modify specific elements
  • • Keep the Figma plugin window open while working with your AI tool