Back to Plugins
HTML to Figma — html2figma: import HTML, CSS & websites as editable layers (free, unlimited)

HTML to Figma — html2figma: import HTML, CSS & websites as editable layers (free, unlimited)

Drop an HTML file or paste code, get editable layers. Free, unlimited, your page stays local.

Plugin Preview

HTML to Figma — html2figma: import HTML, CSS & websites as editable layers (free, unlimited) preview

About this plugin

Free and unlimited — no account, no import quota.Turn any web page into fully editable Figma layers in seconds.Four ways in:• Drop an .html file• Drop an .mhtml file — Chrome and Edge save these with File → Save Page As → Webpage, Single File• Drop a .zip of a saved page folder — relative image and stylesheet paths resolve properly• Paste HTML/CSS straight from your editor, DevTools or an AI assistantWhat you get:• Frames with fills, linear & radial gradients, borders, corner radii, shadows and blur• Flex rows and columns rebuilt as native Auto Layout — editable gap, padding and alignment• Real text layers — font family, weight, size, line-height, letter-spacing, alignment. RTL and Arabic supported• Gradient headlines (background-clip: text) imported as gradient-filled text• Sections that fade in on scroll, which most importers silently drop• Images and inline SVG imported as editable vectors• Several viewports in one run — desktop, tablet and mobile side by side• A clean, semantically named layer tree — Buttons, Sections, content-based names, not div soupGreat for:• Migrating legacy pages into a design system• Redesigning production sites starting from real markup• Turning coded prototypes back into design files• QA-ing built pages against designPrivacy: your page is converted entirely inside the plugin — no HTML, CSS, text, images, layer names, file names or URLs ever leave your machine. The plugin does send anonymous usage counts (that it ran, and whether an import succeeded or failed) so it can be improved; switch that off any time with "Share anonymous usage data" in the plugin.Notes:• Pages that style themselves with JavaScript (e.g. the Tailwind CDN) import unstyled — the plugin warns you before importing• Fonts map to the closest installed Figma [email protected]

Plugin Details

Version6
CreatedAugust 10, 2026
Last UpdatedAugust 31, 2026
CategoryImport & export plugins
CreatorAhmed Dr
Stats12 installs, 4 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Network Access:

    Fetches images and web fonts referenced by absolute URLs in the dropped HTML so they can be embedded into the design; the wildcard is required because those URLs belong to the page being imported and cannot be known in advance. Also sends anonymous usage counts (run started, conversion succeeded/failed, import completed) to html2figma.com/collect.php — no page content, URLs or file names are included, and it can be switched off in the plugin UI.

  • Editor Types:
    figma
  • Allowed Domains:
    • *
    • https://html2figma.com