In bolt.new, open the live preview of your generated app. For a cleaner capture, use the option to open the preview in its own browser tab and navigate to the screen you want.
Step 01
Use Case · AI Design
Last reviewed: July 15, 2026
Bolt built your app in the browser. It runs real web code and renders a live preview — and the browser resolves all of it to computed CSS before html2design reads it. Copy the rendered HTML from Bolt's preview, paste it into the plugin, and create best-effort editable Figma layers for supported content.
"Bolt to Figma" is the workflow of taking UI that Bolt (bolt.new) generated — a full-stack web app built and previewed in the browser — and importing it into Figma as editable design layers. Bolt produces standard frontend code and renders it live; html2design reads the rendered DOM's computed styles, so the import is framework-agnostic.
It's the bridge from AI app-builder to design tool: Bolt ships a working UI fast, and html2design brings it into Figma so your team can refine, align to a design system, and hand it off — without rebuilding the AI output by hand.
Bolt provides several routes to a rendered page. The right one depends on whether the project can be accessed without a login.
bolt.host site: use URL importBolt's Publish flow can create a public bolt.host address. Paste that address into html2design and choose Pixel or Editable mode. If the published site is private, the capture service cannot complete its sign-in flow, so use supplied HTML instead.
Open Bolt's preview in Chromium, wait for fonts, images, and application data to settle, then copy the relevant outerHTML from DevTools. This keeps a private project out of the public URL workflow while still giving the plugin browser-rendered input.
Bolt documents both direct file editing in Code View and project download as a ZIP. Run the downloaded project locally when you need repeatable routes, controlled test data, or a stable source before copying rendered HTML.
Supported text, fills, borders, images, compatible inline SVG, and measured geometry can become native nodes. Fonts, authenticated data, canvas, video, WebGL, complex SVG, and browser-only effects may differ, rasterize, or require cleanup.
Sources checked July 15, 2026: Bolt publishing and visibility, Code View, and project download.
Four manual steps.
Step 01
In bolt.new, open the live preview of your generated app. For a cleaner capture, use the option to open the preview in its own browser tab and navigate to the screen you want.
Step 02
Open DevTools (F12), Elements panel, right-click the root element (or <body>), choose Copy > Copy outerHTML. Let fonts and images finish loading first.
Step 03
In Figma, run the HTML to Figma plugin, paste the HTML, and click Generate. Supported text, fills, images, compatible SVG content, and measured frames become native Figma objects.
Step 04
You now have a best-effort editable frame of the Bolt design. Adjust it, align it to your design system, and prepare it for review and handoff on top of the AI-generated draft.
Native Figma objects mirroring the rendered Bolt output — not a screenshot.
Copy becomes real Figma text layers with computed font, size, weight, line height, and color.
Backgrounds, borders, shadows, and gradients resolve to precise computed values as Figma fills, strokes, and effects.
Inline SVG icons import as editable Figma vector paths, sharp at any scale.
Layout, spacing, and sizing are recreated from browser measurements, with cleanup expected for unsupported effects.
Open Bolt's live preview, open DevTools, right-click the root element, Copy > Copy outerHTML, and paste into the html2design plugin. Bolt's rendered output transfers as best-effort editable Figma layers.
Yes. html2design reads the rendered DOM and computed styles, not the source, so whatever Bolt scaffolds imports the same way.
No. Copy from Bolt's in-browser preview directly — no deployment or public URL required.
Yes — native editable text, vector paths, image fills, and measured frames. Not a screenshot.
AI Tool
Claude Artifacts and Claude Code output into editable Figma layers.
AI Tool
Vercel v0's React + Tailwind output into editable Figma layers.
AI Tool
Lovable's React + Tailwind apps into editable Figma layers.
Tutorial
The end-to-end prompt-to-Figma workflow for AI-generated UI.
Pillar Guide
The definitive HTML to Figma guide — every framework and method.
Compare
How html2design compares to screenshot tools and extensions.
Install html2design from the Figma Community — free to try, no Chrome extension, no manual rebuild.
Install Free on Figma CommunityFree to try · $12/mo to unlock all features