Use Google Stitch to Turn Sketches and Prompts into UI Designs

You have a sketch of a project page on a napkin, or a layout you’ve been describing in critiques for weeks. Google Stitch is a free tool that turns inputs like those into a working, responsive UI you can carry into Figma or hand to a developer — in a couple of minutes instead of a couple of hours.

This guide shows faculty and staff in AAD how to use Stitch as a starting point in their own design process. It doesn’t replace design judgment; it gets you past the blank canvas faster.

Note

Stitch is an experiment from Google Labs. Features, limits, and button labels can change. This guide was last verified 2026-04-20.

---

Before you decide to use it

Which mode, which workflow

Stitch has two modes. Pick one before you start, because they trade off differently.

	Standard Mode	Experimental Mode
Input	Text prompt	Text prompt and uploaded image
Best for	Describing what you want in words	Starting from a sketch, wireframe, or reference
Output	Responsive UI, pastes into Figma with editable layers	Responsive UI, code export only — no Figma paste
Underneath	Gemini 2.5 Flash	Gemini 2.5 Pro (more capable model, fewer uses)

Short version: if you expect to finish in Figma, stay in Standard Mode. If your idea only makes sense with an image (a sketch, a wireframe, an existing UI screenshot), use Experimental — but plan to finish in code or rebuild in Figma by hand.

Not everyone works in Figma

Most of this guide’s Figma-adjacent advice is aimed at designers whose handoff lives there. If your practice is architectural rendering, industrial design, studio work, or anything else outside the Figma ecosystem, the code export path is the useful one — Stitch gives you clean HTML and CSS you can treat as reference or hand to a developer.

What you need

• A Google account. A personal Google account works. Your @vt.edu Google account should also work, but VT-managed accounts can be restricted from third-party Labs experiments depending on policy — if you hit an OAuth block, try a personal account or open a ticket and we’ll look into it.
• A modern browser (Chrome, Safari, Firefox, Edge).
• Nothing to install.

What it costs

Stitch is currently free — no credit card, no paid plan. There are monthly generation limits (more uses for Standard Mode, fewer for Experimental), but Google doesn’t publish fixed numbers in a stable location and they’ve drifted before. You’ll see your remaining count in-product once you sign in.

What Stitch is not

One honest paragraph, since the audience is designers.

Stitch generates plausible layouts. Plausible isn’t the same as considered. Strategic visual hierarchy, brand voice, accessibility nuance, design-system fit, content realism — all still yours. Stitch is also a single-user tool: no comments, no team libraries, no version history, no shared canvas. Real design review belongs in Figma, in critique, in the room.

---

Quick start (5 minutes)

Goal: sign in, generate one design, and get it into Figma.

Step 1: Open Stitch

In your browser, go to stitch.withgoogle.com.

[SCREENSHOT: Stitch landing page before sign-in]

Step 2: Sign in

Click the sign-in button and choose your Google account.

[SCREENSHOT: Google account picker after clicking sign in]

Step 3: Confirm Standard Mode and pick a layout

Make sure you’re in Standard Mode (the default) and choose Mobile or Web. Standard Mode is the one that can paste to Figma with editable layers.

[SCREENSHOT: Main Stitch canvas with mode toggle and Mobile / Web layout selector]

Step 4: Enter a prompt

In the prompt box, type a short description. For a first try, keep it simple:

A clean web landing page for a university design course gallery. Hero with course title and instructor, a three-column grid of project cards with images and captions, a simple footer.

Click Generate designs.

[SCREENSHOT: Prompt box with example text and the Generate designs button]

Step 5: Review the result

Stitch produces one or more design variants. Scroll through them, zoom in, and pick one to work with.

[SCREENSHOT: Generated design variants on the canvas]

Step 6: Paste to Figma

With a design selected, click the Paste to Figma button. Then:

1. Open Figma (figma.com or the desktop app).
2. Create a new file, or open an existing one.
3. Press Cmd + V (Mac) or Ctrl + V (Windows).

The design pastes with editable layers — named components, Auto Layout, text layers, buttons — not a flat image.

[SCREENSHOT: Figma file after pasting, showing layers panel with named components]

Tip

If the built-in paste doesn’t behave as expected, Figma has an official community plugin called Stitch to Figma as a fallback. Install it from the Figma community and try that path.

You’re done with the quick start. If that was all you needed, jump to Trouble? at the bottom. Otherwise, keep going.

---

Walk-through: a student-project showcase template

We’ll mock up a landing page for student work from a design course — something you could hand to a student dev, use as an external brief, or keep as a reference for how you want a final page to feel.

Two paths, depending on what you’re starting from. Pick one:

• Path A if you already have a sketch, wireframe, or reference image
• Path B if you’re starting from a description in words

Path A: Starting from your own sketch (Experimental Mode)

Use this when you already have a hand sketch, a wireframe, a screenshot of a reference you like, or a whiteboard photo.

Step 1: Switch to Experimental Mode

On the main canvas, switch the mode toggle to Experimental Mode. This mode uses Gemini 2.5 Pro and accepts image inputs.

[SCREENSHOT: Mode toggle switched to Experimental Mode]

Caution

Important trade-off: Experimental Mode does not support Paste to Figma. You can still export HTML/CSS from the Code tab, screenshot the result, or re-describe in Standard Mode once you know what you want. If you need editable Figma layers at the end, consider using your sketch as a verbal description in Standard Mode instead of uploading it.

A note on what to upload

If you’re signed in with your @vt.edu Google account, uploads fall under VT’s contractual relationship with Google — generally a safer posture than a personal account. Even so, think about what the image actually contains. Hand sketches, rough wireframes, and references from public sites are fine. Graded student work, identifiable student output, or anything FERPA-protected is best kept out — you rarely need any of that for a layout experiment. When in doubt, upload a generic reference instead of the real thing.

Step 2: Upload your sketch or reference

Use the image upload control to add your sketch, wireframe, or reference screenshot.

[SCREENSHOT: Image upload dialog with a sketch selected]

Step 3: Add a short text prompt alongside the image

Stitch works best when the image shows structure and the text supplies intent. For a student-project showcase, you might write:

A design-course project showcase landing page matching the structure in this sketch. Neutral, editorial feel — generous whitespace, serif headings, a grid of project thumbnails with captions and student first names.

Click Generate designs.

Step 4: Iterate in chat

Stitch has a chat panel for refinement. Ask for changes conversationally:

Make the project grid four columns on desktop and two on tablet. Tighten the vertical rhythm between cards.

Try a version with a dark hero and light content.

Iterative refinement works most of the time, but it can regress earlier edits. If a change breaks something you liked, ask it to revert that specific change — and if it spirals, start a fresh prompt with your best version as the starting point.

[SCREENSHOT: Chat panel with refinement prompts and resulting iterations]

Step 5: Export

In Experimental Mode, your export options are:

• Code export — copy HTML and CSS from the Code tab. Good if you’re handing this to a developer or building the page yourself.
• Screenshot — treat the result as a visual reference and rebuild in Figma by hand. Slower, but sometimes the right call when the design needs to live fully inside your own system.

[SCREENSHOT: Code tab showing HTML/CSS output]

Path B: Starting from a text description (Standard Mode)

Use this when you’re exploring from language — you have feel, structure, and content in mind but no sketch.

Step 1: Stay in Standard Mode, choose Web layout

For a landing page viewed on a laptop, Web is the right layout. Mobile is a separate generation.

Step 2: Write a prompt

Be specific about structure, content, and feel. Example:

A student-project showcase landing page for a college design course. Editorial aesthetic, generous whitespace, a large hero with course title and semester, a three-by-three grid of project cards with 4:5 image crops and short captions, an instructor-contact section at the bottom. Serif headings, sans body. Neutral palette with one accent color.

Click Generate designs.

Step 3: Iterate

Same chat panel as Path A. Adjust grid, type, color, and hierarchy until the scaffold matches your intent.

Step 4: Paste to Figma

Because you’re in Standard Mode, Paste to Figma is available. Copy → open Figma → paste. You now have an editable file to refine with your actual design system and typography.

How to tell if a result is worth keeping

Before you hit Paste to Figma or copy code, spend sixty seconds on the output the way you would on a student’s work:

• Does the hierarchy direct the eye where you want it to go first? If the headline competes with the nav and the project thumbnails, the scaffold is weaker than a hand-drawn wireframe.
• Is the spacing doing work, or is it decorative? Stitch tends toward even spacing rather than rhythm. Tight where it should be loose, loose where it should be tight — that’s a rework.
• Does the content feel real, or is it shaped filler? Generated captions, stock headlines, and placeholder names will tell you whether the model understood the page. If the content reads like nothing, the structure underneath often is.
• Would this survive your actual design system? If your typography and palette would fight the scaffold at every step, rebuild rather than paste.

If two or three of those answers are yes, carry it forward. Otherwise, re-prompt or switch paths.

---

Reference

Modes

See the table under Before you decide to use it.

Layout selector

Choose Mobile or Web before generating. Regenerating in the other layout counts as a separate generation against your monthly limit.

Image upload (Experimental Mode)

Accepts sketches, whiteboard photos, wireframes, and reference screenshots. Gemini reads the image as structure and layout; your text prompt supplies intent, tone, and content. See the note in Path A about what not to upload.

Chat iteration

After generating, the chat panel lets you ask for changes in plain language. Patterns that work:

• “Make the hero full-bleed and push the headline up.”
• “Swap to a cooler palette — think coastal, not desert.”
• “Four columns on desktop, two on tablet, one on mobile.”
• “Tighten the type scale — headings feel too heavy.”

Changes are usually cumulative, but the model can regress earlier edits. If a refinement breaks something, ask specifically for the revert. If the result drifts too far, start fresh with your best version.

Theme controls

Stitch exposes color, typography, and spacing controls you can adjust without re-prompting. Use these for small, final-touch changes.

Direct editing

Recent updates allow click-and-edit of individual elements — rewriting text, swapping an image, or nudging spacing directly on the canvas without a new prompt. Good for typo fixes and small copy changes before export.

Export paths

Paste to Figma (Standard Mode only). Click the button → open Figma → Cmd/Ctrl + V. Paste includes named layers, grouped components, Auto Layout structure, editable text, and editable colors/typography. Not a flat image.

Code export (both modes). The Code tab exposes HTML and CSS. Some outputs also include Tailwind or React — check the tab options for your specific design. Good for handoff to a developer, for reference, or for a quick static page.

Stitch to Figma plugin. Figma has an official community plugin named Stitch to Figma — use it as a fallback if the built-in paste misbehaves.

Multi-screen prototypes

Third-party documentation describes a multi-screen Prototypes feature for linking generated screens with click-through hotspots. AAD IT has not yet verified this feature against the current UI — if you see a Prototypes option in Stitch and want to use it, let us know and we’ll update this guide.

Honest limits

This exists because skipping it would misrepresent the tool.

• Design judgment stays yours. Stitch doesn’t make hierarchy decisions, enforce a brand, hold a design system together, or know what your page is actually for.
• Accessibility is weak by default. Third-party reviewers consistently report low color contrast, small touch targets, missing ARIA labels, and poor keyboard-navigation support in generated output. Treat Stitch output as failing WCAG until audited; fix it in Figma or in code.
• Not a team tool. Single user. No comments, no version history, no shared canvas, no libraries. Team review happens in Figma or in person.
• Not a design-system enforcer. It doesn’t know your college’s type, palette, spacing tokens, or components. Apply those after paste.
• Experiment status. Google Labs products change or sunset without much notice. Don’t make Stitch a dependency in a production workflow.

Prompting patterns that work

• Use your own vocabulary — grid, type scale, whitespace, hierarchy, rhythm.
• Give references by name when you have them, and pair with an uploaded image when you need style fidelity. Named references alone get you the vibe of the name, not the actual design language.
• Describe intent before structure — “editorial, calm, reading-forward” before “three-column grid”.
• Break complex designs into phases. Landing page first. Detail page in a new prompt.
• State what you do not want — “no stock-photo feel, no gradients, no centered headlines.”

Prompting patterns that fail

• Vague adjectives alone — “modern”, “clean”, “professional” — generic output every time. Pair them with specifics.
• Brand references without an upload — asking for “our college’s style” without showing the model an example gets you a generic institutional look.
• Too many constraints in one prompt — a 12-requirement prompt usually produces a muddle. Layer constraints across iterations instead.

---

Trouble?

If you run into trouble, open a ticket or email aadithelp@vt.edu and we’ll help you get set up.

Official Stitch links

• Stitch — Design with AI (Google Labs)
• From idea to app: Introducing Stitch (Google Developers Blog)
• Stitch to Figma — official Figma community plugin