Any web page, rebuilt as real Figma layers.

Paste a URL. Get editable frames with the page's own fonts, images, SVG and spacing — at desktop, tablet and phone widths in one run. Layers you can restyle, not a screenshot you trace over.

Figma plugin — Community listing coming soonSee pricing

How it works

Three steps, about a minute for a typical page.

1

Open the plugin

Run htmlimport in any Figma file and paste your license key once.

2

Paste a URL

Pick the widths you want (e.g. 1440 and 390). A real browser renders the page on our servers — with a live progress bar while it works. Pages behind a login? Use the bookmarklet from your own tab instead.

3

Edit, don't trace

Every text run is a text layer with the right font, weight and spacing; images, SVG and even video frames come through. Restyle, rearrange, ship.

What comes through

Built to be compared against the page pixel by pixel — and to lose as little as possible.

Real text, real fonts

Text layers with the page's font family, weight, size, letter-spacing and transforms. Missing a font? The Fonts panel downloads the page's own font files so you can install them.

Every breakpoint

Up to four widths per import, each in its own frame. Phone widths render with mobile emulation, so you get the mobile layout, not a squeezed desktop.

Images, SVG, video

Raster images at their displayed crop, inline SVG as vectors, video posters and frames, CSS gradients, shadows, blur and backdrop blur as effects.

Pseudo-elements and icons

::before / ::after decorations, icon fonts and CSS-drawn shapes are captured as layers rather than dropped.

Fidelity check

Ask for a reference screenshot and the plugin overlays it and computes a pixel diff, highlighting the areas that differ.

Private pages

The bookmarklet runs in your logged-in browser tab and hands the capture to the plugin — nothing about the page leaves your machine except what you paste.

Pricing

An import is one page, at as many widths as your plan allows. Cancel any time from your account page.

Free

$0

no card needed

  • 5 imports a month
  • 2 widths per import
  • 1 import at a time
  • Bookmarklet + URL import

Pro

$12/month

one person

  • Unlimited imports
  • 4 widths per import
  • 2 imports in parallel
  • Fonts panel + pixel diff
  • Email support
Get Proor $96/year

Team

$39/month

up to 10 people

  • Unlimited imports
  • 4 widths per import
  • 4 imports in parallel
  • 10 license keys, one bill
  • Priority support
Get Teamor $390/year

Questions

How close to the real page is it?

Very, on most marketing and e-commerce pages — that's what the pixel diff is for. Heavily animated or canvas-drawn pages capture their current state as images. Sites that block automated browsers may need the bookmarklet.

What counts as an import?

One page, however many widths you pick for it. Importing a page at 1440 and 390 is one import. Failed imports don't count. "Unlimited" has a fair-use ceiling (200 imports a day on Pro, 1,000 on Team) that no designer reaches by hand — it exists to stop scrapers.

Do I need the site's fonts installed?

Figma needs a font installed to render it. The plugin substitutes the closest match and lists what was missing; the Fonts panel lets you download the page's own font files (check their licence before use).

Where's my license key?

It was shown once after checkout. Sign in at /account with your email to create a new one or revoke old ones — no password, we email you a link.

Can I cancel or change plans?

Any time from your account page, via Stripe's billing portal. Downgrades apply at the end of the billing period; your key keeps working on the free tier.

Something else?

Email hello@htmlimport.com.