Prototyping with Google Stitch

Learn how to create interactive prototypes with animations, transitions, user flows, device previews, and collaboration tools for gathering feedback.

Creating Interactive Prototypes

Stitch's prototyping mode transforms your static designs into interactive experiences. You can define interactions, transitions, and user flows without writing any code.

Setting Up Interactions

1. Enter Prototype Mode

   Switch to Prototype mode using the toggle in the top toolbar or press Shift + P. Interactive connection handles appear on each element.

2. Define a Trigger

   Select an element and choose a trigger: Tap, Long Press, Hover, Drag, or Scroll. You can also use timers for auto-advancing screens.

3. Set the Action

   Choose what happens when the trigger fires: navigate to another screen, open an overlay, swap a component variant, scroll to a section, or open a URL.

4. Configure the Transition

   Select a transition animation (slide, fade, push, dissolve) and configure its duration, easing curve, and direction.

Animations and Transitions

Stitch supports a rich set of animation capabilities:

# Material Design motion tokens in Stitch

Transition:    Smart Animate
Duration:      300ms (Material standard)
Easing:        Emphasized Decelerate
                # cubic-bezier(0.05, 0.7, 0.1, 1.0)
Direction:     Left to Right
Stagger:       50ms between child elements

# Common Material motion durations:
Short:   150ms  # Simple transitions (fade, color)
Medium:  300ms  # Standard transitions (slide, scale)
Long:    500ms  # Complex transitions (shared element)

User Flow Design

Stitch includes a dedicated user flow view that shows all screen connections at a glance:

• Flow Diagram: See all screens and their connections visualized as a flowchart. Identify dead ends and missing paths.
• Flow Annotations: Add notes describing the purpose of each screen and the conditions for each transition.
• Branching Paths: Create conditional flows where users take different paths based on input or choices.
• Entry Points: Define multiple starting points for different user scenarios (new user, returning user, deep link).

Device Preview

Preview your prototypes on realistic device frames to understand how your designs will look and feel on real hardware:

Sharing Prototypes

Share your interactive prototypes with stakeholders and team members for review:

1. Generate a Share Link

   Click "Share Prototype" to generate a unique URL. Recipients can interact with the prototype in their browser without a Stitch account.

2. Set Permissions

   Choose between view-only access or allow reviewers to leave comments and annotations directly on the prototype.

3. Embed in Presentations

   Embed live prototypes in Google Slides, Notion pages, or any platform that supports iframe embeds.

4. Record Walkthroughs

   Use Stitch's built-in screen recorder to create video walkthroughs of your prototype with voiceover narration.

Gathering Feedback

Stitch provides tools for collecting structured feedback on your prototypes:

• Pin Comments: Reviewers can pin comments to specific elements or screens, making feedback contextual and actionable.
• Reaction Stickers: Quick reactions (thumbs up, question mark, heart, flag) for rapid feedback collection.
• Comment Threads: Full threaded discussions on each comment, with resolve/unresolve status tracking.
• Feedback Summary: An auto-generated summary of all feedback organized by screen and priority.

Usability Testing Tools

Conduct usability tests directly within Stitch:

• Task Flows: Define tasks for test participants to complete and measure success rates.
• Heatmaps: See where users tap and scroll most frequently during testing sessions.
• Session Recording: Record user interactions with the prototype, including their screen, audio, and camera feed.
• Time on Task: Measure how long users take to complete each task, identifying areas where the design may be confusing.
• Analytics Dashboard: View aggregate testing data with completion rates, common paths, and drop-off points.