Google Stitch to Figma — Import HTML or a Preview URL

Google Stitch to Figma —
HTML and Preview URL Workflow

Start with Stitch's native Figma export when it fits. If you instead have browser-rendered HTML or an accessible public preview, html2design can import that source as a lossless Pixel capture or as best-effort editable Figma layers.

What is "Google Stitch to Figma"?

"Google Stitch to Figma" can mean Stitch's native export or importing a rendered Stitch interface through another workflow. html2design accepts copied HTML for local or private sources and public preview URLs when the renderer can access them.

Pixel mode preserves the captured appearance as an image. Editable mode maps supported text, fills, borders, images, vectors, and measured geometry to native Figma nodes. Fonts, remote media, browser-only effects, and responsive behavior can differ and may need cleanup.

How Google Stitch import works

Built on a browser-rendered DOM — exactly what the import approach reads.

Stitch's preview is real, rendered HTML

By the time you see the design preview, the browser has resolved every style to a computed value — colors, spacing, type. html2design reads those values.

Supported elements become editable nodes

Editable mode maps supported text, fills, borders, images, and vectors to native Figma objects; unsupported effects may be simplified or omitted.

Pixel mode keeps a visual reference

Choose Pixel mode when the captured appearance matters more than editing individual elements.

Complements Stitch's native export

Use Stitch's own export first. html2design is an alternative for copied HTML, public preview URLs, or explicit Pixel-versus-Editable output choices.

The Google Stitch to Figma workflow

Four steps, followed by review and cleanup.

Step 01

Open the Stitch design preview

In Stitch, open your design's preview in the browser.

Step 02

Copy the rendered HTML

Open DevTools (F12), Elements panel, right-click the root element, choose Copy > Copy outerHTML. Let fonts and images finish loading.

Step 03

Paste into html2design

In Figma, run the HTML to Figma plugin, paste, click Generate. Supported elements and styles become native Figma objects.

Step 04

Inspect and refine

Compare the import with the browser source, replace unavailable fonts or media, and convert useful repeated structures to your own components or Auto Layout.

What you get in Figma

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

Editable text layers

Supported text becomes editable Figma layers; unavailable fonts and metric differences may require cleanup.

Supported visual styling

Editable mode maps supported backgrounds, borders, shadows, gradients, and opacity to Figma properties.

Supported SVG content

Compatible inline SVG content can become editable Figma vectors; complex or externally loaded assets may need cleanup.

Measured editable structure

Supported elements become positioned native layers rather than automatic Auto Layout, Components, Variants, or Variables.

Frequently asked questions

How is this different from Stitch's native Figma export?

Stitch's own export is the direct workflow and should be your first option. html2design is useful when you have copied browser-rendered HTML or a public preview URL and want to choose between a Pixel reference and best-effort editable layers.

Does this work with the legacy "Galileo AI" branding too?

Yes. The product was acquired by Google and rebranded to Stitch; the underlying workflow (browser-rendered AI design preview) is the same.

How do I convert a Stitch design to Figma with html2design?

Open the design preview in a browser, open DevTools, right-click the root element, Copy > Copy outerHTML, and paste into the html2design Figma plugin.

Are the imported designs editable in Figma?

Editable mode creates native Figma nodes for supported text, fills, images, vectors, and geometry. It does not guarantee that every browser element or effect will map one-to-one.