Are the imported Bolt designs editable in Figma?

Yes. The import produces native Figma layers — editable text, vector paths for SVG icons, image fills, and measured frames — not a screenshot or flat image.

Bolt to Figma — Turn Bolt.new AI Apps Into Figma Layers

Q: How do I convert a Bolt.new app to Figma?

Open your Bolt project's live preview in the browser. Open DevTools (F12), go to the Elements panel, right-click the root element of the rendered UI, and choose Copy > Copy outerHTML. Paste that HTML into the html2design Figma plugin and click Generate. Bolt builds standard web apps (React/Vite and similar), which the browser compiles to computed CSS — html2design reads those values and rebuilds them as native, editable Figma layers.

Q: Does this work with Bolt's React/Vite output?

Yes. Bolt runs your app in a StackBlitz WebContainer and renders a live preview. html2design reads the rendered DOM and its computed styles, not the source, so the framework Bolt scaffolds does not matter — only the rendered output does.

Q: Do I need to deploy the Bolt app first?

No. Copy the rendered HTML directly from Bolt's in-browser preview, or open the preview in its own tab and copy from there. html2design only needs the rendered HTML — no deployment or public URL required.

Bolt to Figma —
From bolt.new to Editable Design

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 into the plugin, and get native, editable Figma layers in under two minutes.

What is "Bolt to Figma"?

"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.

Why Bolt output imports cleanly

Bolt renders to a standard browser DOM — exactly what the import approach reads.

The Bolt preview is already rendered

Bolt runs your app in a StackBlitz WebContainer and shows a live, painted preview. Every style is already computed, so you can copy the outerHTML from DevTools and paste — no build or deploy step.

Framework-agnostic — React, Vite, or plain HTML

Whatever stack Bolt scaffolds, html2design reads the rendered output, not the source. The computed colors, type, and layout transfer the same way regardless of framework.

SVG icons import as vector paths

Inline SVG icons in Bolt's output import as native Figma vector paths — crisp and editable at any size, never rasterized.

Private by design

html2design parses your pasted HTML locally inside Figma. Unreleased Bolt projects never need to be deployed or made public to import them.

The Bolt to Figma workflow

Four steps, under two minutes.

Step 01

Open the Bolt preview

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

Copy the rendered HTML

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

Paste into html2design

In Figma, run the HTML to Figma plugin, paste the HTML, and click Generate. Each element's computed style becomes a native Figma object — text, fills, SVG vector paths, and measured frames.

Step 04

Refine in Figma

You now have a pixel-accurate, 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.

What you get in Figma

Native Figma objects mirroring the rendered Bolt output — not a screenshot.

Editable text layers

Copy becomes real Figma text layers with computed font, size, weight, line height, and color.

Exact colors & styling

Backgrounds, borders, shadows, and gradients resolve to precise computed values as Figma fills, strokes, and effects.

SVG icons as vector paths

Inline SVG icons import as editable Figma vector paths, sharp at any scale.

Pixel-accurate frames

Layout, spacing, and sizing recreated as measured Figma frames matching the browser render.

Frequently asked questions

How do I convert a Bolt.new app to Figma?

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 pixel-accurate, editable Figma layers.

Does this work with Bolt's React/Vite output?

Yes. html2design reads the rendered DOM and computed styles, not the source, so whatever Bolt scaffolds imports the same way.

Do I need to deploy the Bolt app first?

No. Copy from Bolt's in-browser preview directly — no deployment or public URL required.

Are the imported designs editable in Figma?

Yes — native editable text, vector paths, image fills, and measured frames. Not a screenshot.