Design to HTML

    Export the file

    Once your frame is built with auto layout and clear names, the export itself is quick.

    Steps

    1. Select the frame you want as the page. Select the outermost node. The plugin exports that node and everything inside it.
    2. Open the plugin and pick your options: CSS or Tailwind, and semantic tags on or off.
    3. Click Export selected frame. The preview fills with the generated HTML.
    4. Copy the code into your project, or download the file.

    What you get

    It depends on whether the page uses images.

    No images: one self-contained HTML file, downloaded as .html.

    With images: a .zip, laid out the way a project expects.

    your-page.zip
  index.html      links styles.css
  styles.css
  images/
    img-0.png
    img-1.png

    In Tailwind mode there is no separate stylesheet, so the zip holds index.html and images/.

    Either way the export contains:

    • The markup, built from your frame, with semantic tags if you left them on.
    • The styles, as a stylesheet (CSS mode) or utility classes plus a small config (Tailwind mode).
    • A Google Fonts link for the font families your text uses. Families that are not on Google fall back to a system font, so nothing breaks.
    • Your images, as real PNG files under images/. Each distinct image is written once however many layers paint with it, and resized to a sensible maximum, so a page does not carry six copies of the same background at its original upload resolution.
    • Your icons and vectors, inlined as SVG, so they stay crisp at any size. Any layer whose whole subtree is vector art goes out as a single SVG, whatever its size, so a multi-part icon renders as one piece and a full-width generative illustration does not become thousands of separate elements.

    Unzip it and open index.html, or drop the whole folder into a static host.

    Large pages skip the code preview in the panel. Copy and Download still work; only the on-screen listing is suppressed, because colouring tens of thousands of lines locks the panel up.

    Designing the page at more than one width? Select all the frames and read Responsive export to get a single file that reflows.

    Semantic tags on or off

    • On (recommended): you get real tags. The nav is a <nav>, sections are <section>, titles are headings, buttons are <button>. This is what the naming and heading guides are about.
    • Off: every container is a <div> and every text is a <p>. Use this when you only want the visual layout and plan to add your own structure.

    Getting the cleanest result

    If the output is not what you expected, it is almost always the design, not the export. Work back through the guide:

    • Missing or wrong tags → Name your layers.
    • Absolute boxes instead of flexbox → Use auto layout.
    • Titles as paragraphs → Headings and text.
    • A textured band looks flat or the wrong colour → check the layer's Fill list. Every paint is exported, with its opacity, blend mode and image adjustments, but a few Figma features have no CSS equivalent (see below).

    What does not survive

    Most of Figma maps cleanly. These do not, and the export approximates or skips them rather than pretending:

    • Corner smoothing (the squircle slider). CSS corners are always circular.
    • Image adjustments beyond saturation, contrast and exposure. Temperature, tint, highlights and shadows are left off.
    • Progressive and noise blurs, and glass effects.
    • Diamond gradients, which fall back to radial.

    A frame built the way this guide describes exports as HTML you can commit as is.

    Reporting a layout problem

    Beside the status line there is a Dump fixture action. It saves the selected frames' node tree as JSON, with no pixels in it, which is enough to reproduce a layout problem outside Figma. Send that file rather than the exported page: it is the input, not the output, so the cause is visible in it.

    Every export also stamps the build it came from on the second line of index.html, which tells you whether Figma is running the code you expect:

    <!-- Generated by Design to HTML, build 2026-07-22T07:59:23Z -->

    Support the plugin

    If Design to HTML saves you time, you can buy me a coffee. It keeps the plugin maintained.

    Built by Abdulkader Safi.