Still paying for Figma subscriptions to sketch early-stage drafts? You don't have to anymore. Google just dropped a completely free AI design tool powered by Gemini — and on the day of the announcement, Figma's stock dropped 8.8%. It's called Stitch. Type a line of text and your UI appears. Real-time multiplayer editing. React code export. All free.
What's this, exactly?
Google Stitch is an AI-powered UI design platform built at Google Labs. It takes text, images, and voice commands to generate UI — powered by Gemini 2.5 Flash/Pro. It first launched at Google I/O 2025, then got a massive update in March 2026 that rebuilt it as an "AI-native infinite canvas."
The biggest change? A real-time streaming design agent. UI components render as you type, and Agent Manager remembers your entire project history to keep things consistent. Figma-style multiplayer editing is now included — and yes, it's all free.
Here's the thing worth paying attention to: DESIGN.md — an open-source format released under Apache 2.0. Define your colors, typography, spacing, and component patterns in markdown, and the AI applies them consistently across every screen. It works with Git version control and integrates with AI coding tools like Claude Code and Cursor.
Stitch's 4 AI modes are worth knowing:
- Flash Mode (Gemini 2.5 Flash)
Generates a quick draft in 60–90 seconds. Great for rapid exploration and checking multiple directions fast. - Thinking Mode
Optimized for complex UI flows and multi-screen design. Slower, but handles intricate service architectures well. - Redesign Mode
Upload an existing screenshot and get a high-fidelity redesign. Perfect for legacy screen refreshes. - Ideate Mode
One description generates multiple creative concepts at once. Ideal for early client direction exploration.
What actually changes?
Sure, there are plenty of "AI design tools" out there. Figma Make, v0, MagicPath, Framer AI... But what sets Stitch apart — beyond being a Google product — is that it's thrown the entire exploration phase open for free. The old workflow meant opening a blank Figma canvas and starting from scratch. Now you can spin up dozens of directions in 2 minutes on Stitch, then take the best one into Figma to polish.
| Old Workflow (Figma only) | Stitch → Figma combo | |
|---|---|---|
| Draft creation | Designer manually places everything (hours) | Text input → multiple directions in 2 min |
| Idea exploration | Only 1–2 directions realistically possible | Compare multiple concepts simultaneously with Ideate mode |
| Non-designer involvement | Figma has a steep learning curve | PMs and planners can generate prototypes with voice commands |
| Brand application | Manually apply design system components | Set DESIGN.md once → auto-applied everywhere |
| Code handoff | Developer handoff + manual implementation | Direct connection to Claude Code, Cursor via MCP server |
| Cost | Figma Pro: $15/editor/month | Stitch exploration phase: free |
That said, Stitch can't fully replace Figma yet. Real users consistently point out some limitations.
Current limitations of Stitch
No micro-interaction support. Inconsistent responsive behavior. Struggles with complex component system management. Collaboration features aren't at Figma's level yet. It shines at ideation and draft validation — not production-ready final polish.
| Tool | Core Strength | Best For | Price |
|---|---|---|---|
| Google Stitch | AI agent exploration, free, DESIGN.md | Ideation → Draft | Free (350/month) |
| Figma | Team collaboration, design systems, 2,000+ plugins | Refinement → Production | $15/editor/month+ |
| MagicPath | Infinite canvas, Figma import | Design → Code | Free / $20/month Pro |
| v0 (Vercel) | shadcn/ui components, developer-friendly | Component development | Free / Paid |
Getting started: the essentials
- Access and sign up
Log in with your Google account at stitch.withgoogle.com. No credit card needed. 350 free generations per month. - Enter your first prompt
Describe the UI you want. The more specific, the better — "SaaS dashboard main screen, dark mode, left sidebar." Use Flash mode to explore multiple directions quickly. - Set up DESIGN.md (optional, highly recommended)
Paste your existing brand URL and Stitch auto-extracts your design system. Or define colors and fonts directly — they'll apply to everything you generate going forward. - Iterate with Agent Manager
Refine with Voice Canvas or direct edits. Use Ideate mode to explore multiple directions, then pick the one you want to develop further. - Export
Export as Figma layers (via the official community plugin) or pull HTML/Tailwind CSS code directly. Connect via MCP server to continue building in Claude Code or Cursor.
One thing to remember when starting out
A vague one-liner prompt produces generic results. Try the "4-step frame": basic screen description → aesthetic mood → per-screen refinement → DESIGN.md for theme consistency. Follow this order and you'll get much more coherent output from the start.
Go deeper
Google Stitch Official Site Start for free right now. Includes example projects and tutorials. stitch.withgoogle.com
DESIGN.md GitHub Repo Apache 2.0 open source. Includes linting, Tailwind conversion, and WCAG accessibility checker. github.com
Google Stitch vs Figma Deep Comparison Feature-by-feature breakdown and which tool fits which team. mindstudio.ai
Google Stitch + DESIGN.md Practical Guide (Korean) Detailed DESIGN.md structure and usage examples in Korean. brunch.co.kr
What Is Google Stitch? (AgentDock) Use case-by-case strengths and limitations analysis. agentdock.ai
Google Stitch Full Guide (The AI Corner) 4-step prompting framework and real usage experience. the-ai-corner.com
