Internal tool · Irrational Labs

Import HTML into Figma, straight from the HQ workspace

One 30-second install, then any prototype or webpage becomes native, editable Figma layers — and Mobbin flows land as ready-made reference boards. Free, private, and driven by your AI assistant — this replaces the html.to.design plugin.

▶︎ Prefer to watch? Chaning's video walkthrough on Loom

The logic

Three parts, one laptop

The brain HQ workspace

Your assistant renders the HTML in an invisible Chrome window and measures every element — text, colors, spacing, icons.

The courier Local bridge

A tiny relay on your own machine passes build instructions along. Starts itself; you never touch it.

The hands Figma plugin

"IL Figma Bridge" sits in your open Figma file and draws real frames, real text, real vectors — live, while you watch.

Everything happens on your laptop. Client prototypes never pass through anyone's servers — the exact opposite of html.to.design, which processes your HTML in its own cloud.

✓HTML prototypes from any project folder — pixel-perfect, fully editable layers
✓Live websites by URL — handles bot-protected sites, lazy loading, and modern image formats
✓Mobbin flows and screenshots — competitor screens arrive as labeled reference boards; any single screen can be reconstructed as editable layers on request

No tokens.

No API keys, no sign-ups, nothing to configure. Being logged into Figma is the credential — the plugin works inside your own session, on files you can already edit.

The honest comparison

How this stacks up against html.to.design

	IL Figma Bridge	html.to.design
Where your HTML goes	Stays on your laptop, end to end	Processed on their cloud servers — including client prototypes
Iteration	Conversational. Edit the HTML, say "import it again." Ask for a mobile width, a named page, cookie banner removed.	One shot per paste. Every change means re-copying into the plugin UI by hand.
Beyond importing	The open bridge is a general channel: your assistant can also edit what was imported, build frames, export renders, and pull Mobbin flows in as reference boards	Imports only
Edge-case maturity	Newer. Battle-tested on real client work and a full production site, but html.to.design has years of polish on exotic websites	350,000+ users, years of refinement on unusual CSS, iframes, and odd sites
When something breaks	We own the code — gaps get fixed same day, tuned to IL's use cases (twelve fixes shipped on launch day alone)	Feature requests to a third party
Cost	Free	$18 per user per month for the paid tier

Fair takeaway: for IL's core case — our own clean prototypes and mainstream sites, driven by an assistant — the bridge is better on every axis. For scraping a wildly exotic third-party site, html.to.design's free tier remains a reasonable fallback.

Before you start

You already have everything

✓The irrational_labs_hq workspace, up to date — ask your assistant to pull from GitHub; the tool ships with the repo
✓Google Chrome installed — used invisibly for pixel-accurate rendering
✓The Figma desktop app, logged in — the browser version can't load team-built plugins

One-time setup · about 30 seconds

Teach Figma where the plugin lives

Get your plugin address Ask your assistant to run the setup command, or run it yourself. It prints the exact file path you'll need in step 3 — the path is specific to your machine. bun tools/html_to_figma.ts setup
Open the Figma desktop app Any file works — you're installing, not importing yet.
Point Figma at the plugin Menu bar: Plugins → Development → Import plugin from manifest…
⌘ ⇧ GThe unlock: when the file picker opens, press this shortcut and a "Go to folder" box appears — paste the path from step 1, hit return, and select manifest.json. No clicking through folders.
Confirm it took Plugins → Development now lists IL Figma Bridge. That's it — you never repeat this. Updates arrive automatically whenever you pull the repo.

Every import · two clicks + one sentence

The daily rhythm

Open the Figma file you want the design to land in
Run the plugin Plugins → Development → IL Figma Bridge — a small panel opens and shows connected. Leave it open.
Ask your assistant "Import projects/acme/prototypes/checkout.html into Figma" — or a live URL, or "pull the Airbnb Explore flow from Mobbin and lay it out as a reference page." A new page appears in your file and the design draws itself.

Good to know: each import lands on its own new page. Mobile-width captures use --width 393. Cookie banners on live sites can be excluded. Fonts you don't have fall back gracefully and every substitution is reported. Radial gradients, videos, and CSS-filtered elements arrive as crisp images rather than editable layers.

If something's off

Three fixes cover almost everything

Red dot in the panelThe relay isn't running. Just retry the import — it starts the relay automatically. The dot turns green within a few seconds.

"No Figma plugin connected"The plugin panel isn't open. Run IL Figma Bridge from the Development menu in the file you want to import into.

Anything elseAsk your assistant to run html_to_figma status — it reports exactly which of the three parts needs attention. Full guide: how_to/how_to_import_html_into_figma.md

This page's source lives in the HQ repo at how_to/il_figma_bridge_setup_walkthrough.html. To change it, point Claude there — it can edit the file and republish this same link. Written guide: how_to/how_to_import_html_into_figma.md