Html to Figma Design
Your website, ready to remix

From web page
to your canvas.

Bring public websites and HTML into Figma as editable layers. Skip the redraw and get straight to making it yours.

Get the Figma plugin ↗See how it works ↓
Start with 6 free successful imports · No card required
Browser-Sprite, the Html to Figma Design mascot
✦   Your little import sidekick
Public URLs & HTMLEditable Figma layersMultiple viewport widthsAuto Layout where it fits
A shorter path to design

From the browser to your next big idea.

Bring the parts you need into Figma, then make them your own.

Html to Figma Design import experience
01 / Choose a source

Start with a URL. Or bring your own HTML.

Paste a public page URL or HTML, select your widths, and import directly into your Figma file.

  • Import public web pages
  • Paste HTML source
  • Continue editing in Figma
Desktop, tablet, and mobile viewport options
02 / Pick your sizes

See the whole responsive picture.

Select desktop, tablet, mobile, or a custom width. Each selected size is rendered separately and becomes its own frame.

  • Multiple sizes in one import flow
  • Each successful frame counts as one import
An editable Figma layer structure
03 / Make it yours

Layers you can actually work with.

Explore editable text, shapes, images, and supported visual styles. Auto Layout is used where the measured layout can be represented accurately; other elements keep their measured positions.

  • Text, images, shapes and vectors
  • Supported colors, gradients and shadows
  • Measured positioning for complex layouts
Made for the messy middle

Less rebuilding.
More creating.

01 / EXPLORE

Study a layout

Bring an existing public page into your file as a starting point for exploration.

02 / ITERATE

Work with the pieces

Edit individual elements instead of tracing over a flat screenshot.

03 / ADAPT

Think in viewports

Compare separately rendered frames at the widths that matter to your project.

Simple pricing

Start free. Keep creating.

Pick the plan that fits your workflow.

Free

$0

Try the workflow and see what you can create.

  • 6 successful imports
  • URL and HTML sources
  • Multiple viewport sizes
Get started ↗

Pro annual

$15 / year

For the ideas and iterations that keep coming.

  • Unlimited imports
  • All available import features
  • Automatically renews annually
Choose annual ↗

Lifetime

$40 / once

One payment for ongoing access.

  • Unlimited imports
  • All available import features
  • One-time payment
Choose lifetime ↗

Prices in USD. Checkout and license delivery by Dodo Payments; taxes may apply. Paid licenses require online validation. Failed or cancelled imports do not count toward the free allowance.

Good to know

A few things
before you start.

Need a hand? Get in touch ↗

What counts as an import?

Each successfully generated viewport frame counts as one import. Failed or cancelled attempts do not use your free allowance.

Are the layers editable?

Yes. The plugin creates editable Figma layers, including text, shapes, and image layers. Some complex effects or visual content may use image fallbacks.

Does every layout become Auto Layout?

Auto Layout is used where it can accurately express the measured layout. Other elements retain their measured positions.

Can I import any website?

Use public URLs only. Some websites restrict automated access, and complex animations, fonts, or effects may not reproduce exactly. URLs and resources may be fetched via third-party services; avoid private or sensitive URLs.

How do paid licenses work?

Dodo Payments handles checkout and license delivery. Activate your license in the plugin; paid access requires online validation. The annual plan renews automatically.

Ready when you are

Bring the web into
your creative flow.

One little sidekick. A lot more room to create.

Open in Figma ↗