How to Prototype a Mobile App in Figma

Design your app screens as separate frames. Use iPhone 14/15 or Android frames from the Frame tool (F). Name each frame clearly (e.g., 'Home Screen', 'Profile', 'Settings').

Switch to Prototype mode by clicking 'Prototype' in the right sidebar (next to Design). You'll see connection nodes (circles with plus signs) appear on selectable elements.

Click and drag from a button or element to the destination frame. A blue arrow will connect them. This creates the interaction flow.

Configure the interaction: In the Prototype panel, set 'On Tap' (for mobile) or 'On Click' (for desktop). Choose 'Navigate to' for simple page changes, or 'Open Overlay' for modals/popups.

Select an animation type: 'Instant' for immediate jumps, 'Dissolve' for fade transitions, 'Smart Animate' for smooth morphing between similar layers, or 'Move In/Out' for slide effects.

Set transition duration (usually 300ms for mobile feels natural). For Smart Animate, ensure layer names match between frames for the best animation results.

Test your prototype: Click the 'Present' button (top-right play icon). Click through your flows to test interactions. Use the arrow keys to navigate backward/forward.