html.to.design alternatives: copy a website into Figma, compared
html.to.design is the best-known way to turn a live website into Figma layers. Here is what it does, what it costs, and when a browser extension that pastes into Figma fits better.
If you import many URLs, want light and dark versions or several languages in one go, or want Figma styles and variables created for you, html.to.design is the more capable importer. If you want to copy the page you are already looking at with one shortcut, with no Figma plugin and no subscription, Design Toolkit does that, and it is also an inspector, a ruler and a color toolkit.
What html.to.design is
html.to.design, made by <div>RIOTS, is a Figma plugin plus a browser extension. In the plugin you enter a URL, or drop an .html, .zip or .h2d file, and it builds Figma frames, text layers with their fonts, images and vectors, with optional auto layout, text and color styles and local variables. Pages behind a login, on a local development server or behind bot protection are captured with the browser extension instead.
Sources: the html.to.design docs, its plans page and its features page.
| Tool | How you import | Figma plugin needed | What you get | Price |
|---|---|---|---|---|
| html.to.design | Paste a URL or drop a file in the plugin; browser extension for private pages | Yes | Frames, text, images, vectors; optional auto layout, styles and variables; desktop, tablet and mobile; light and dark | Free: 10 imports, then 10 a month. Pro: $12 per user per month billed yearly, $18 monthly |
| Design Toolkit | Open the page, select it or one element, paste with Ctrl + V | No | Frames, text, images and auto layout; desktop, tablet, mobile or a custom width | 7-day free trial, then one lifetime payment |
1. html.to.design
html.to.design
The most complete importer of the two, and the right choice when the job is bigger than one page. You can start an import from inside Figma without opening the site first, and it is built for batches.
- Imports by URL inside Figma, no need to open the page first
- Bulk import of a list of up to 10,000 URLs on paid plans
- Desktop, tablet and mobile viewports, plus light and dark themes, in one import
- Optional text styles, color styles and local variables, and hover effects as components
- Runs in Figma, FigJam and Figma Slides
Weak spot: it needs the Figma plugin, the free plan stops at 10 imports and then 10 a month, and the paid plan is a subscription.
2. Design Toolkit
Design Toolkit Ours
Open the page, press Alt + R, choose Copy to Figma, select the whole page or one element, then press Ctrl + V in Figma. You get real frames, text layers and auto layout with the page's sizes, colors and images, at desktop, tablet, mobile or a custom width. No plugin is involved, and because it copies from your own browser tab, a page you are signed in to works like any other.
- No Figma plugin: copy in the browser, paste in Figma
- Right-to-left pages keep their direction, alignment and fonts
- One lifetime payment after the trial, no subscription
- The same extension inspects CSS, measures gaps, picks colors, previews every screen and copies a section as code
Weak spot: it copies the page in front of you, one at a time: no bulk URL import and no light and dark versions in one go. Figma shows fonts installed on your computer or in its library, so a site's licensed font may be replaced. And it is paid after the trial.
3. Other ways to do it
Other plugins, or rebuilding by hand
Several other HTML-to-Figma plugins exist in the Figma Community. We have not tested them for this page, so run a free import on a page you know well before trusting one. Rebuilding by hand from a screenshot always works and always takes the longest, and a screenshot carries no text, spacing or colors you can edit.
Weak spot: quality varies a lot between plugins, and a hand rebuild costs hours per page.
Pick by what you need
- Importing many URLs, or a whole list — html.to.design, on a paid plan.
- Light and dark versions, or several languages, in one import — html.to.design.
- Figma styles and variables created from the page — html.to.design.
- Copying the page you are looking at, in one step — Design Toolkit.
- No Figma plugin and no subscription — Design Toolkit.
- Arabic or Hebrew pages — Design Toolkit keeps the direction, alignment and fonts; test either one on a real page first.
- Inspecting, measuring and picking colors on the same page — Design Toolkit, since it is all one extension.
Copy the page you are looking at
Select a page or one element, press Ctrl + V in Figma, and get real layers. Free for 7 days.
Add to ChromeNo accountRuns locally14-day refund
Common questions
Is there an alternative to html.to.design that does not need a Figma plugin?
Yes. Design Toolkit is a browser extension: select a page or one element, press Copy to Figma, then paste in Figma with Ctrl + V. You get frames, text layers and auto layout, with no plugin to install in Figma.
Is html.to.design free?
Partly. Its docs list a free plan with 10 imports, then 10 more every month with a free RIOTS ONE account. Pro costs $12 per user per month billed yearly, or $18 billed monthly, and gives unlimited imports within a fair-use limit. Check html.to.design for current prices.
Can I copy a page behind a login into Figma?
html.to.design uses its browser extension for those pages. Design Toolkit copies the page from your own browser tab, so a page you are signed in to works the same way as any other page.
Does it work with Arabic and Hebrew pages?
Design Toolkit keeps the text direction, alignment and fonts of right-to-left pages when it copies them to Figma. The html.to.design docs do not mention right-to-left pages, so test one on its free plan first.
Can Design Toolkit import a list of URLs at once?
No. It copies the page you have open, one at a time. If you need to import many URLs in one go, the bulk import on html.to.design paid plans is built for that.