Canva UI Flows — Design Patterns & Interactions

AI design, writing, and creative tools

Magic Design AI

User leverages Magic Design AI to generate poster templates from natural language prompts. The flow demonstrates AI-powered content generation with real-time search, template preview, and automatic application to canvas. Workflow involves prompt composition, generation processing with status messaging, template preview inspection, and one-click design application. Pattern showcases generative AI integration within a visual design editor, including AI maturity messaging and terms disclosure for emerging technology features.

Snappy — immediate generation feedback, inline preview, auto-apply with minimal confirmation friction.

  1. Open Magic Design AI prompt input field
  2. Enter natural language prompt for design
  3. Trigger AI generation and preview templates
  4. Apply generated design to active canvas

Cancel AI Generation

This recording captures the user experience of canceling an active AI generation process in Canva's design editor. The flow demonstrates how users interrupt long-running generative tasks—such as creating a cyber security poster via AI—by triggering a cancel action that dismisses the loading state and returns to the canvas. The interaction showcases modal overlay behavior, real-time feedback during generation, and graceful state transitions when canceling asynchronous operations. Designers studying cancellation patterns, AI waitstates, interruption affordances, and async task management will fi

Responsive — instant cancellation feedback with smooth modal fade-out transitions

  1. Trigger AI generation for poster design
  2. AI generation begins with loading state
  3. User clicks cancel during generation
  4. Cancel request processes and confirms
  5. Modal closes and returns to canvas

Canva AI Onboarding

This AI onboarding flow introduces Canva users to intelligent design and writing capabilities through a guided, auto-advancing carousel experience. The flow features sequential tooltips, feature highlights, and interactive demonstrations that progressively reveal AI-powered tools. Users progress through tutorial steps with automatic transitions and visual feedback, learning about smart suggestions, text generation, and design assistance. The dark-themed interface emphasizes AI features with accent colors and smooth state transitions, creating an immersive discovery experience for new users exp

Guided — auto-advancing steps with smooth transitions and visual feedback.

  1. View AI onboarding introduction
  2. Progress through feature highlights
  3. Explore AI writing capabilities
  4. Discover design suggestions feature
  5. Complete onboarding flow

Signup + Onboarding

This Canva signup and onboarding flow guides new users through account creation, profile setup, and initial feature discovery with a series of modal-driven steps. Users enter email credentials, authenticate via social options, select profile preferences including avatar and interests, and receive curated feature introductions. The experience leverages auto-transitioning screens, progressive disclosure, and visual hierarchy to minimize cognitive load while establishing personalization context. Ideal for understanding guided first-run experiences, signup conversion optimization, and preference-b

Guided — step-by-step progression with auto-advance and smooth modal transitions.

  1. Enter email and create account
  2. Confirm signup or use social auth
  3. Select profile avatar and name
  4. Choose design interests and preferences
  5. Review feature highlights
  6. Complete onboarding setup

Fake Email Prevention

A guided feature discovery flow demonstrating Canva's fake email prevention AI capability. The recording showcases an interactive modal-based tutorial where users engage with iframe-loaded content blocks, progressing through sequential auto-transitions with visual feedback. This pattern illustrates onboarding for AI-powered content safety features, email validation workflows, and intelligent content moderation—ideal for designers building in-app education, feature announcements, or security-focused user guidance systems.

Smooth auto-advancing flow with seamless iframe transitions and minimal user friction.

  1. Open feature discovery modal
  2. Iframe loads with content
  3. Navigate through interactive steps
  4. Engage with canvas element
  5. Transition to next section
  6. Complete tutorial flow