Beginner

Getting Started with Google Stitch

Learn how to access Google Stitch, create your first design project, navigate the workspace, and start generating designs with AI.

Accessing Google Stitch

Google Stitch is a web-based tool available directly in your browser. Follow these steps to get started:

  1. Visit stitch.google.com

    Open your browser and navigate to stitch.google.com. Stitch works best in Chrome but supports all modern browsers.

  2. Sign In with Google

    Click "Sign In" and use your Google account. Both personal Gmail and Google Workspace accounts are supported.

  3. Choose Your Plan

    Stitch offers a free tier with core features. Premium plans unlock additional AI generation credits, advanced export options, and team collaboration features.

  4. Complete the Quick Setup

    Select your role (designer, developer, product manager, or other) and preferred design system. This helps Stitch tailor suggestions to your workflow.

✅
Tip: If you already use Google Workspace, Stitch integrates seamlessly with Google Drive for file storage and Google Meet for design review sessions.

Creating Your First Project

Projects in Stitch organize your designs, components, and prototypes. Here's how to create one:

  1. Click "New Project"

    From the Stitch dashboard, click the "New Project" button. You can also start from a template.

  2. Name Your Project

    Give your project a descriptive name (e.g., "Fitness App Redesign"). Choose a project color for easy identification.

  3. Select a Design System

    Choose from Material Design 3 (default), a custom design system, or start from scratch. You can change this later.

  4. Set Device Targets

    Select the devices you're designing for: mobile (Android/iOS), tablet, desktop, or all of the above.

Project Configuration 
# Recommended first project settings

Project Name:    "My First Stitch Project"
Design System:   Material Design 3
Primary Color:   #6750A4 (Material Purple)
Device Target:   Mobile (360 x 800)
Theme:           Light + Dark auto-generate
Grid:            8px base grid

Understanding the Workspace

The Stitch workspace is organized into several key areas:

Area Purpose
AI Prompt Bar Type natural language descriptions to generate designs. Always visible at the top of the canvas.
Canvas The main design area where your screens and components are displayed and edited.
Layers Panel Hierarchical view of all elements in your design, similar to Figma's layers panel.
Properties Panel Edit properties of selected elements: size, color, typography, spacing, constraints, etc.
Component Library Browse and insert pre-built components from your design system.
Pages Sidebar Navigate between different screens/pages in your project.
Toolbar Quick access to selection, shape, text, frame, and AI generation tools.

AI Design Generation Basics

The AI prompt bar is your primary way to generate designs. Here are some effective prompt patterns:

Screen-Level Prompts

AI Prompt Examples 
# Generate a complete screen
"Design a login page with email, password, forgot password link, and social login buttons"

# Generate with specific style
"Create a modern e-commerce product page with large hero image, price, reviews, and add to cart button in a minimalist style"

# Generate with brand colors
"Design a dashboard for a project management tool using blue (#1E88E5) as the primary color with white cards on a light gray background"

Component-Level Prompts

Component Prompts 
# Generate individual components
"Create a pricing card with plan name, price, feature list, and CTA button"

# Generate a navigation bar
"Design a bottom navigation bar with Home, Search, Favorites, Profile tabs with icons"

# Generate a data table
"Create a sortable data table with columns for Name, Status, Date, and Actions with edit/delete buttons"
✅
Prompting tip: Be specific about layout, colors, and content. The more detail you provide, the closer the result will be to your vision. You can always refine with follow-up prompts like "Make the header larger" or "Change the accent color to teal."

Working with Templates

Stitch provides a gallery of templates to jumpstart your projects:

📱

Mobile App Templates

E-commerce, social media, fitness, banking, food delivery, and more — pre-designed mobile app kits.

💻

Web App Templates

Dashboards, landing pages, SaaS platforms, admin panels, and marketing sites ready to customize.

📃

Design System Kits

Complete design system starter kits with components, tokens, and documentation pages included.

📚
Next up: In the Design Features lesson, you'll dive deep into Stitch's full design capabilities including the component library, responsive layouts, and theme customization.