Google Stitch to Figma — Editable Layers Beyond the Native Export

Google Stitch to Figma —
Beyond the Native Export

Stitch designed your UI from a prompt. Its canvas renders real HTML & CSS, and the browser resolves it all to computed styles before html2design reads a thing. Copy the rendered HTML, paste into the plugin, and get truly native, editable Figma layers in under two minutes — beyond what Stitch's native Figma export gives you.

What is "Google Stitch to Figma"?

"Google Stitch to Figma" is the workflow of taking AI-generated UI from Stitch (formerly Galileo AI, acquired by Google) and importing it into Figma. Stitch already offers a native Figma export for moving drafts into Figma quickly. html2design takes a different path: it reads the rendered DOM and rebuilds every element as a native Figma object, so each layer is fully editable individually.

For quick handoff, use Stitch's own export. For deep refinement — restyling individual layers, swapping copy, aligning to a design system, building on top of the AI draft — importing through html2design gives you the granularity to do it.

Why Google Stitch output imports cleanly

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.

Each element becomes its own Figma layer

Every text run, fill, border, shadow, vector icon becomes a separately-editable native Figma object — not a grouped/flattened import.

SVG icons import as vector paths

Inline SVGs import as native Figma vector paths — crisp and editable, never rasterized.

Complements Stitch's native export

Use Stitch's own export for fast handoff; use html2design when you need fully editable layers for refinement and design-system alignment.

The google stitch to figma workflow

Four steps, under two minutes.

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. Each element's computed style becomes a native Figma object.

Step 04

Refine in Figma

You now have a pixel-accurate, fully editable frame of the Stitch design — every layer addressable individually.

What you get in Figma

Native Figma objects mirroring the rendered 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, 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.

Granular, layer-by-layer editability

Not a grouped or flattened import — every element addressable as its own Figma layer.

Frequently asked questions

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

Stitch's own export moves the design into Figma quickly, useful for handoff. html2design imports the rendered DOM and creates a separately-editable native Figma layer per element — every text run, fill, and icon addressable on its own. Use the native export for speed; use html2design for granular editability.

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?

Yes — native editable text, vector paths, image fills, measured frames, each addressable individually.