Skip to content
HTML to Figma

How it works

From pasted HTML to editable layers

Four steps, no setup on your computer. The conversion happens inside the plugin.

The four steps

  1. Step 01

    Install the plugin

    In Figma, open the plugins menu, search for HTML to Figma and run it. It works in any design file.

    • Nothing else to install
    • No browser extension

    Coming soon to the Figma Community. Create your free account now, and you can connect the plugin the day it is out.

  2. Step 02

    Connect your account

    The first time you open the plugin, choose Continue on website. Sign in with Google, check that the code on the page matches the one in the plugin, and confirm. The plugin connects by itself a few seconds later.

    • 30 free imports every month
    • No payment details asked
  3. Step 03

    Paste your HTML

    Click inside the plugin and press ⌘V on a Mac or Ctrl+V on Windows. You can also drop an .html file on the plugin window. A whole page and a small fragment both work.

    • Include the CSS with the HTML
    • Choose a conversion mode if you want
  4. Step 04

    Import into Figma

    Click Import to Figma. The plugin measures the rendered HTML and builds the layers. When it finishes, the new frame is selected and in view, and a short report lists anything worth knowing.

    • One import is used on success
    • Cancel at any time and nothing is added

What is kept

What carries over from your HTML

The plugin renders your HTML the way a browser does and reads the result, so what you get matches what the page really looks like.

  • Text

    • Font family, size and weight
    • Line height and letter spacing
    • Color and alignment
    • Bold text and links inside a paragraph

  • Color and effects

    • Solid colors and linear gradients
    • Borders
    • Corner radius, each corner on its own
    • Drop shadows and inner shadows
    • Opacity

  • Images and vectors

    • Images, placed as image fills
    • Inline SVG, as vector layers
    • Decorations made with ::before and ::after

  • Layout

    • Auto Layout direction
    • Gaps and padding
    • Alignment
    • Clipping, where the CSS hides overflow

Limits

What to expect

HTML and Figma are different tools. These are the places where an import cannot be exact.

  • CSS Grid is placed with fixed positions

    A grid keeps its look, but its children are positioned by coordinates instead of Auto Layout.

  • Fonts must be available in Figma

    A font that is not installed is replaced by the closest one. The report after the import lists every replacement.

  • Images must be reachable

    Images are loaded from their addresses. If a site blocks that, the image becomes a labelled placeholder.

  • Very large pages are cut off

    There is a limit on the number of layers in one import, to keep Figma responsive. The report says when it was reached.

  • Pages built by JavaScript

    If a page builds its content with JavaScript, copy the HTML of the finished page from your browser and paste that.

Tips

For a clean import

More answers are on the help page.

  1. 01Keep the CSS with the HTML: a style block, inline styles, or a stylesheet link with a full https address.
  2. 02Import one section at a time when a page is very long. Smaller imports are easier to work with.
  3. 03Turn on Components when the HTML has lists or cards that repeat.
  4. 04Turn on Replace previous import while you are still changing the HTML.

Ready to bring your HTML into Figma?

30 free imports every month. No payment needed.

Get started freeInstall pluginComing Soon