tomake.design

Figma plugin

HTML → Figma.

Paste a URL. Get Figma layers. That's it.

Install free plugin Chrome extension

View on Figma Community

FreeTo start
NoSignup
AnyURL or code
RealFigma layers

Works with

If it renders as HTML,
we import it.

Live websites HTML / CSS code ChatGPT Claude v0.dev Bolt Lovable Replit Tailwind Cursor Localhost

Why use it

Start with what exists.
Build faster.

Redesign sites

Import existing sites. Iterate in Figma.

Competitive analysis

Import competitor sites. Study layouts.

Moodboards

Grab real site elements. Build references.

Prototyping

Test variations on live content.

Grab assets

Extract design elements you need.

AI workflows

Import AI‑generated code. Polish in Figma.

Features

Everything you need.
Nothing you don't.

URL import

Paste any URL. Get editable layers.

Code paste

HTML, CSS, Tailwind. Paste directly.

Multi‑viewport

Desktop, tablet, mobile. All at once.

Editable layers

Organized. Layered. Fully editable.

Styles preserved

Typography, colors, spacing — kept.

Private sites

Login‑protected pages via extension.

Local files

HTML files. ZIP archives. Dev servers.

AI code

ChatGPT, Claude, v0, Bolt. Just paste.

How it works

Four steps.

Step 01

Launch

Open the plugin in Figma.

Step 02

Enter URL

Paste the website you want.

Step 03

Pick viewports

Desktop, tablet, mobile.

Step 04

Import

Click and watch it appear.

Frequently asked

Questions.

How do I import a website into Figma?
Install the plugin from Figma Community, open it in Figma, paste any URL, select your viewport sizes, and click Import. The website appears as fully editable layers.
Can I import AI‑generated code from ChatGPT or Claude?
Yes — the plugin works perfectly with code from ChatGPT, Claude, v0.dev, Bolt, Lovable, Replit, and Cursor. Just paste the HTML/CSS code directly.
How do I import localhost or private sites?
Install our Chrome extension. It captures any page you can view — including localhost servers, staging environments, and login‑protected pages.
Is the plugin really free?
There is a free tier with no trial, no credit card and no signup — install from Figma Community and start importing. A Pro plan is available at USD 5.90 per month for people who need more than the free tier covers.
Does it preserve text and styles?
Yes — the plugin preserves typography, colors, spacing, and layout. Text remains editable, not flattened to images.
Can I capture multiple viewport sizes at once?
Yes — select desktop, tablet and mobile viewports and import every responsive breakpoint in a single pass.
What's the difference between this and html.to.design?
html.tomake.design has a free tier you can use without a signup or a credit card, and a USD 5.90 per month Pro plan beyond it. Limits and pricing move around in this category, so compare the current plans rather than trusting any comparison table.

Ready to import
your first website?

Paste a URL. Get editable Figma layers. That simple.

Install free plugin Chrome extension