NEWDrop a whole project folder or .zip — CSS, images and fonts are linked automatically→
creativepouch
Get started

HTML in. Editable Figma out.

Paste code, drop a file or a whole project and get a pixel-accurate design with real text, Auto Layout, vector icons and images — in seconds.

Install the Figma pluginSee how it works
landing.html → Figma · 128 layers
HTML · CSS
<section class="hero">
  <h1>Ship faster</h1>
  <p>Design meets code.</p>
  <div class="cards">
    <article class="card">…
    <article class="card">…
  </div>
</section>

.cards {
  display: flex;
  gap: 24px;
}
Layers
▣section.heroAL
TShip faster
TDesign meets code.
⫼div.cardsAL
▣article.cardAL
✦icon
▣article.cardAL
Hero · 1920
Ship faster
Design meets code.
✦
✦
24
✓ Real text✓ Auto Layout✓ Vector icons✓ Gradients
Converting
Done · Auto Layout verified

Works with whatever your HTML came from

Hand-written HTMLTailwind CSSBootstrapReact / Vue buildsStatic site exportsEmail templatesLanding page buildersWordPress themesAdmin dashboardsPrototypesComponent librariesSingle-file bundlesHand-written HTMLTailwind CSSBootstrapReact / Vue buildsStatic site exportsEmail templatesLanding page buildersWordPress themesAdmin dashboardsPrototypesComponent librariesSingle-file bundles
New · Projects

Drop the whole project.
Get the whole design.

Upload a .zip or a folder straight from your code editor or site export. HTML, CSS, images and fonts are linked up automatically — pick any page and import it in one go.

  • ✓.zip archives and folders
  • ✓index.html found for you
  • ✓Any page from the project
  • ✓CSS, @import, images & fonts
  • ✓Missing files reported
  • ✓Nothing leaves your computer
Import a projectRead the FAQ
ZIPmy-site.zip1.0 MB
HTML to FigmaPRO
my-site — 56 files · 1.0 MB
8 pages found
Page
index.html ▾
Viewport
Full HD — 1920 × Auto
✓ css/style.css + 2 @imports
✓ img/ 24 images
✓ fonts/ icon font → vectors
Import to Figma

Rebuilding a live page by hand isn’t design work. It’s copying. Let the browser do the measuring — you do the designing.

How it works

Three steps. Under a minute.

</>HTML to FigmaFigma CommunityRun

Install the plugin

Open it from Figma Community in any design file. No account needed.

HTMLindex.html
Drop files here
14401920Mobile

Drop your HTML

Paste code, upload an .html file, a folder or a .zip. Pick a screen size.

▣ section.hero✓
T Ship faster
⫼ div.cards

Design on it

Get a named, structured frame with text, Auto Layout, vectors and images.

Features

Everything a page needs to become a design

The browser lays the page out, the plugin reads every box, style and glyph — so Figma shows exactly what Chrome showed.

Real text layers, never pictures of text

Every heading, paragraph and button label arrives as a Figma text layer with the right font, weight, size, line height and colour — mixed bold and italic runs included.

  • ✓Fonts matched to the ones installed in Figma
  • ✓Line breaks exactly like the browser, or free re-flow
  • ✓Truncation and line clamps preserved
Ship faster
Bricolage · 800 · 32/36
Turn any page into editable layers.
Inter · 400 / 700 · 16/24 · 3 runs
Structure

Named, nested frames — not one flat picture

Layers are named after their tags and classes, nested like the DOM and ordered by z-index, so the file is ready to edit, componentise and hand off.

  • ●section.hero › div.cards › article.card
  • ●Stacking order and overflow clipping preserved
  • ●Pseudo-elements (::before / ::after) included
▣ section.hero
T Ship faster
⫼ div.cards
▣ article.card
✦ icon
T Card title
Accuracy

Checked against the browser, twice

Every Auto Layout container is compared with the browser’s measurements when it is built and once more after the whole page exists. Anything that would move stays absolutely positioned.

  • ●Exact sizes, gaps and padding
  • ●Fonts substituted? Positions still verified
  • ●No silent layout drift
Browser
Figma
✓ 128 / 128 layers in place

Made for everyone between design and code

Designers

Bring a live page back into Figma and iterate on it instead of rebuilding it pixel by pixel.

Developers

Hand a prototype built in code to the design team as clean, editable frames.

Agencies

Audit and redesign client sites starting from an exact copy of what is live today.

Questions, answered

Is my HTML uploaded anywhere?+

No. Your HTML is rendered and converted locally inside the plugin. The licence server only receives your Figma user id, the plugin version and a counter of imports — never your code or designs.

Which pages convert best?+

Landing pages, emails, dashboards and component mock-ups. Flexbox and grid layouts become Auto Layout where the result is pixel-identical; everything else is placed absolutely so it still looks exactly like the browser.

What is the "Base URL" field?+

Only needed when your HTML loads images or stylesheets with relative paths, e.g. <img src="img/logo.png">. Enter the site address (https://example.com/) and the plugin loads those files from there. It does not download the page itself — leave it empty if your images already appear.

What about fonts and icons?+

Fonts are matched to the fonts installed in Figma by name and weight. Icon fonts such as Phosphor are converted to real vector SVG layers.

All questions →

Stop rebuilding. Start designing.

Install it from Figma Community and turn your first page into a design in under a minute.

Install the plugin