Guide

Figma to HTML: the options, and how to skip the conversion

Plugins, AI generators or hand coding all convert a drawing into a web page. Here is what each one costs you, and what changes when the design is HTML from the start.

Baurice Ley · 6 min read

Why Figma to HTML is never one click

A Figma frame is a vector drawing. Text, spacing and layout are computed by Figma, not by a browser. To get a web page, something has to translate that drawing into HTML elements and CSS rules, and every translation makes choices you did not make.

Auto layout maps closely to flexbox, but not one to one. Constraints become positioning rules. Fonts render differently. That is why the result usually needs a pass of fixes before it ships.

Option 1: a Figma plugin

The Figma Community has several Figma to HTML plugins, and tools like Anima turn frames into HTML, React or Tailwind. Framer offers a plugin to paste Figma frames into Framer and publish them there.

  • Good for: a fast first draft of a static page.
  • Watch out for: generated class names, absolute positioning, and markup you will rewrite to fit your codebase.

Option 2: an AI design to code tool

Figma Make generates HTML, CSS and JavaScript from frames, and a growing list of AI tools read a design and write components for your stack.

  • Good for: getting components in your framework quickly.
  • Watch out for: the design and the code drift apart as soon as one of them changes.

Option 3: rebuild it by hand

Still the most common answer. A developer reads the design, measures it, and writes the HTML and CSS. The result is clean, but it is a second project, and every design change means doing part of it again.

Option 4: design in HTML from the start

The conversion problem disappears when the canvas is already a web page. In Kalka, every frame is an HTML element and every property you set in the design panel is a CSS declaration. There is nothing to export because there is nothing to translate.

Auto layoutdisplay: flex
Fillbackground
Drop shadowbox-shadow
Clip contentoverflow: hidden

What you get is a folder: pages/home.html, styles.css, your design tokens in design-system/tokens.json. A developer can open it in any editor, review it in Git, and wire it into the real site.

Which option fits you

  • One landing page, once: a plugin is fine.
  • A product with components in React or Vue: an AI design to code tool, plus review.
  • Websites you design and ship again and again: design in HTML and skip the conversion step entirely.

Kalka is in development and open source. If the fourth option sounds like your workflow, the waitlist is the way to get the first builds.