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.

View pricing plans
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 plugin shows your session-specific URL after connecting. Select your tool below for the exact config to copy.

Run this command in your terminal to add the MCP server to Claude Code:

claude mcp add ai-to-design --transport http https://mcp.ai-to-design.com/{your-session-id}/mcp

Replace {your-session-id} with the session ID shown in the Figma plugin after connecting.

6

Render Designs

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 as native Figma elements.

7

Edit Your Designs

Refine your designs without re-rendering. Ask your AI to make changes like 'Change the heading text to Welcome' or 'Update the button background to blue'. You can also add, remove, duplicate, and move elements. Editing is available on the Pro plan.

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
  • • Use editing commands to iterate quickly on your designs