Quick Start

Get started with copyto.design in minutes. This guide will walk you through your first HTML to Figma conversion.

Using the Playground

The easiest way to get started is with our web playground.

Step 1: Access the Playground

Visit playground to access the conversion interface.

Step 2: Input Your HTML

You have two options:

Option A: Paste HTML Code

<div style="padding: 20px; background: #f0f0f0; border-radius: 8px;">
  <h1 style="color: #333; font-size: 24px;">Hello Figma</h1>
  <p style="color: #666;">This will be converted to Figma</p>
</div>

Option B: Enter a URL

https://example.com

Step 3: Convert

Click the Copy to Figma button to process your HTML. The conversion happens instantly in your browser.

Step 4: Copy to Figma

Once converted, you have two options:

Copy to Clipboard - Click “Copy to Figma” then paste (Cmd/Ctrl + V) directly into Figma
Download .fig File - Click “Download .fig” to save the file and import it into Figma Desktop

Next Steps

Now that you’ve completed your first conversion:

Learn about API integration for automated workflows
Set up the MCP Server for AI agent access
Explore advanced examples in the playground
Check out pricing for production use

Overview Overview