Skip to content
html2layers

HTML importer for Figma

Turn HTML into editable Figma layers

Paste HTML or drop a file. html2layers builds frames, text, components and styles on your canvas, so you edit a real design instead of redrawing one.

Get started freeSee how it works

Free during early access: 30 imports every month.

Works with HTML from
  • An AI assistant
  • Your own codebase
  • An email template

What you get

Layers built the way a designer would build them

html2layers reads your HTML the way a browser does, then rebuilds its structure as layers you can work with.

  • Real layers, not a picture

    Frames, text, vectors and images you can select and change. In Auto Layout mode, rows and columns from the CSS become Auto Layout frames.

  • Components and instances

    A pattern that repeats becomes one component with instances. Each instance keeps its own text, colors and images.

  • Local styles

    Colors and text settings used more than once become styles in your file, already linked to the layers that use them.

  • Click states, linked

    The plugin clicks each button and tab for you. Every screen that results becomes its own frame, joined by a prototype link.

  • Import again, in place

    Changed the HTML? Import it again and the new frames take the place of the old ones, in the same spot on the canvas.

  • Your HTML stays with you

    The conversion runs inside the plugin on your computer. There is no browser extension, and your HTML is not sent to our servers.

Conversion modes

Choose how the layers are built

One setting in the plugin. Pick the closest copy, the easiest to edit, or Auto Layout.

  • Exact visual

    Mirrors the rendered page with fixed positions. The closest match to the original, with the least structure.

  • EditableDefault

    Real frames, text and vectors with clean styles. A good balance when you plan to adjust the design.

  • Auto Layout

    Rows and columns from the CSS become Auto Layout frames, with their padding, gaps and alignment.

How it works

From HTML to layers in four steps

See each step in detail
  1. 01

    Install the plugin

    Add html2layers to Figma and run it in any design file.

  2. 02

    Connect your account

    Sign in with Google on this website. You get 30 free imports every month.

  3. 03

    Paste your HTML

    Press ⌘V or Ctrl+V in the plugin, or drop an .html file on it.

  4. 04

    Import into Figma

    The layers appear on your canvas, selected and in view.

Early access

Free while we are in early access

Every account gets 30 imports every month, with every feature. Paid plans with higher limits will come later, and you will never be charged unless you choose one.

  • 30 imports every month

    Given again on the 1st of each month. Imports you did not use do not carry over.

  • Every feature

    Components, styles, click states and all three conversion modes. Nothing is held back.

  • No card, no UPI

    Sign in with Google. No payment details are asked for, and nothing is ever charged without your choice.

Fair counting

You only spend an import when an import succeeds

An import is counted at the moment the layers exist on your canvas, and not before.

  • The import fails0 imports used
  • You cancel while it is building0 imports used
  • The layers are on your canvas1 import used

Questions

Good to know before you start

Something else? The help page goes further.

What counts as an import?
One import is one successful import: the plugin finished and the layers are on your canvas. The size of the HTML does not change the count.
Do failed imports use my imports?
No. If an import fails, or you cancel it while it is building, nothing is counted.
Do I need to install anything besides the plugin?
No. The conversion runs inside the plugin. There is no browser extension and nothing to run on your computer.
Is my HTML uploaded to your servers?
No. Your HTML is converted inside the plugin, on your computer. We record that an import happened, for example when it ran and whether it succeeded, but not what you imported.
Can I import a website by its address?
Not yet. Importing from a website address is planned. For now you can copy the page's HTML from your browser and paste it. The help page shows how.
What is kept from my HTML?
Text and its fonts, colors and gradients, borders, corner radius, shadows, images, inline SVG and the layout. The full list and the limits are on How it works.
Is it free?
Yes, while html2layers is in early access. Every account gets 30 imports each month, with every feature.
When do my imports renew?
On the 1st of every month, at midnight Indian time. Imports you did not use do not carry over.
What happens when I use all 30?
New imports wait until your imports renew on the 1st. The designs you already imported are not affected. If you need more, tell us.
Will it always be free?
Paid plans with higher limits will come later. We will tell you before anything changes, and you will never be charged unless you choose a plan yourself.
Do I need a card or UPI to sign up?
No. You sign in with Google, and no payment details are asked for.

Ready to bring your HTML into Figma?

30 free imports every month. No payment needed.

Get started freeSee how it works