Prototyping Panel

Create interactive prototypes with flows and interactions

The Prototyping Panel allows you to transform static designs into interactive prototypes. Define user flows, add interactions to elements, and create realistic simulations of your final product.

Opening the Prototyping Panel

Prototype Flows

Flows define starting points for your prototype and help organize different user journeys.

Creating a Flow

  1. Create at least one frame in your design
  2. In the Prototyping Panel, click Create Flow
  3. Enter a flow name (e.g., "Login Flow", "Onboarding", "Checkout")
  4. Select a starting frame (the first screen users see)
  5. Choose a color to identify this flow
  6. Click Create

Managing Flows

Flow Features

Interactions

Interactions define what happens when users interact with elements in your prototype.

Adding an Interaction

  1. Select an element on the canvas (button, icon, image, etc.)
  2. The Interactions section appears in the Prototyping Panel
  3. Click Add Interaction
  4. Choose a Trigger (what activates the interaction)
  5. Choose an Action (what happens)
  6. Configure action details (destination, transition, etc.)

Interaction Triggers

Triggers determine when an interaction activates:

Mouse/Touch Triggers

Time-Based Triggers & Delays

Control timing for more sophisticated interactions:

Pro Tip

Use mouseDown for instant feedback (like button press effects), then onClick for the actual action. This creates a more responsive feel. Add delays to hover triggers to prevent accidental activations.

Input Triggers

Video Triggers

Interaction Actions

Actions determine what happens when a trigger activates:

Navigation Actions

Overlay Actions

Component Actions

Scroll Actions

Variable Actions

Video Actions

Other Actions

Transitions

Transitions control how screens animate when navigating:

Basic Transitions

Slide Transitions

Advanced Transitions

Transition Settings

Animated Transitions in Preview (NEW)

Prototype preview now includes real animated transitions for realistic testing:

Prototype Connection Nodes (NEW)

Create prototype connections directly on the canvas with visual drag-and-drop linking:

Interactive Connection Handles

When in prototype mode, elements display interactive connection handles:

How to Use Connection Nodes

  1. Switch to Prototype mode (or press Cmd/Ctrl+P)
  2. Hover over an element to reveal connection handles
  3. Click and hold a connection handle
  4. Drag to the target element you want to link to
  5. Release to create the prototype interaction
  6. Interaction appears in the Prototyping Panel for further configuration

Benefits

Selectable Interaction Connections (NEW)

Click and edit prototype connections directly on the canvas:

Selecting Connections

Figma-Style Interaction Popover

When you select a connection, a popover appears with interaction details:

Managing Connections on Canvas

  1. Switch to Prototype mode
  2. Click on any connection line (blue arrow/noodle)
  3. Popover appears showing interaction details
  4. Choose to edit or delete the interaction
  5. Or press Delete key to remove it
Pro Tip

Use connection nodes for quick linking, then click the connections to fine-tune triggers and transitions. This two-step workflow is faster than configuring everything in the panel first.

Prototype Mode Navigation (NEW)

Pan and zoom are now fully enabled in prototype mode for easier testing:

Pan & Zoom in Prototype Mode

How to Navigate

Presenting Prototypes

  1. Create at least one flow with a starting frame
  2. Add interactions to elements
  3. Click Present button in toolbar (or press Cmd/Ctrl+P)
  4. Prototype opens in presentation mode
  5. Click elements with interactions to navigate
  6. Press Esc to exit presentation mode

Prototype Preview Controls (NEW)

Enhanced preview mode with scale/zoom controls, device orientation toggling, and automatic frame matching:

Scale/Zoom Modes

Control how your prototype scales to fit the preview window:

Device Orientation Toggle

Switch between portrait and landscape orientations when using device frames:

Auto-Match Frame to Device

Azyrom automatically suggests matching device presets when you create or resize frames:

Pro Tip

Create a frame with dimensions like 393×852, and Azyrom will suggest "iPhone 15 Pro". Click "Apply" to ensure exact dimensions. Then in prototype preview, select the device frame and toggle orientation to test both portrait and landscape. Use the Z key to zoom in on specific UI details.

Common Prototyping Patterns

Simple Navigation

  1. Select a button
  2. Add interaction: Trigger = On Click, Action = Navigate To
  3. Select destination frame
  4. Choose transition (e.g., Slide Left)

Back Button

  1. Select back button/icon
  2. Add interaction: Trigger = On Click, Action = Back
  3. Choose transition (e.g., Slide Right for reverse effect)

Modal Dialog

  1. Create a frame for the modal content
  2. Select trigger element (e.g., "Settings" button)
  3. Add interaction: Trigger = On Click, Action = Open Overlay
  4. Select modal frame as overlay
  5. On modal's close button: Trigger = On Click, Action = Close Overlay

Hover State

  1. Create a component with two variants: Default and Hovered
  2. On Default variant: Trigger = Mouse Enter, Action = Swap to Hovered variant
  3. On Hovered variant: Trigger = Mouse Leave, Action = Swap to Default variant

Auto-Advance Carousel

  1. Create frames for each carousel slide
  2. On each slide: Trigger = After Delay (3000ms), Action = Navigate To next slide
  3. Add manual navigation buttons as backup

Tips and Best Practices

Keyboard Shortcuts

General

During Prototype Preview

Related Topics