# How to Prototype in Figma

Viewport: 1910x922 @1.25x

Playback: autoplay=false durationMs=3000 navBar=false arrows=true callouts=true browserBar=false browserTheme=light

1. [Intro] How to Prototype in Figma
   - body: This guide provides a step-by-step process to prototype your designs in Figma. Follow these instructions to create interactive and dynamic user interfaces.
   - voiceover: Follow these steps to create an interactive prototype in Figma. This guide will walk you through designing your screens, switching to prototype mode, creating connections, setting interaction details, and testing your prototype.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ip02ep00020djx2bvd284u.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
1. step_01 [image] - Create your screens/frames - design all the screens you want to include in your prototype.
   - source type: IMAGE
   - description: Open Figma and Select the Design File
   - target: (976, 545), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (976, 545), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Design all the screens you want to include in your prototype. Ensure each screen represents a distinct state or page in your application. This is done in the Design mode where you can leverage Figma's design tools to create your UI elements.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ip07te00040djxfif3gqd9.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9iokyfh000003huwkw95exn.png
2. step_02 [image] - Switch to Prototype mode - click the "Prototype" tab in the right panel (next to Design).
   - source type: IMAGE
   - target: (1380.387802177608, 80.95289924987243), rect: top=100 left=100 width=100 height=100
   - hotspots: 1
     - hotspot_01 (1380.387802177608, 80.95289924987243), rect: top=100 left=100 width=100 height=100
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Click the 'Prototype' tab in the right panel (next to Design). This changes the editor’s interface to allow you to create interactions between your frames.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ip07u300050djxbqi24k7h.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ioxonw00023j76mn1164pz.png
3. step_03 [image] - Create connections - click and drag from an element (like a button) to the destination frame.
   - source type: IMAGE
   - description: Navigate to the Prototype Tab
   - target: (724.8836368418076, 255.51244422118242), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (724.8836368418076, 255.51244422118242), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Click and drag from an element (like a button) to the destination frame. This establishes a link between UI components, indicating how users will navigate from one screen to another.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ip07uv00060djx9lmobmm5.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9iomsqi000c03hujaikl57y.png
4. step_04 [image] - Set interaction details - choose:
Trigger: On Click, On Drag, etc.
Action: Navigate To, Open Overlay, etc.
Animation: Choose transition type and duration
   - source type: IMAGE
   - description: Select the Layers to Link
   - target: (872.8558867204067, 357.163456161828), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (872.8558867204067, 357.163456161828), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Choose the interaction details for your connections. You can set:

Trigger: On Click, On Drag, etc.
Action: Navigate To, Open Overlay, etc.
Animation: Choose the transition type and duration. This defines how the transition between screens will behave.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ip07vj00070djxfnsr4aiu.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9iomr40000b03hulkah5zfw.png
5. step_05 [image] - click the "Play" button (▶️) in the top-right corner.
   - source type: IMAGE
   - description: Create Connections Between Frames
   - target: (1428.8836770833327, 26.999994724351364), rect: top=16.9537410736084 left=1423.6875 width=12.009668350219727 height=14.049064636230469
   - hotspots: 1
     - hotspot_01 (1428.8836770833327, 26.999994724351364), rect: top=16.9537410736084 left=1423.6875 width=12.009668350219727 height=14.049064636230469
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Click the 'Play' button (▶️) in the top-right corner. This launches a preview window where you can interact with your prototype as if it were a live application.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ip07w900080djx0vtpfh7f.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ioltq4000503hur25m4vwt.png
6. step_06 [image] - Navigate through your flows to ensure everything works as expected.
   - source type: IMAGE
   - description: Adjust Interaction Settings
   - target: (779, 386), rect: top=0 left=0 width=1528 height=738.4000244140625
   - hotspots: 1
     - hotspot_01 (779, 386), rect: top=0 left=0 width=1528 height=738.4000244140625
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Navigate through your flows to ensure everything works as expected. Check all interactions and transitions to make sure they perform correctly and make adjustments if necessary.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ip07x000090djx6dga1d7q.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9iolyrr000603hukmcmxqy8.png
8. [Outro] Congratulations 🎉
   - body: After setting up your interactions, click the play button in the top-right corner to preview your prototype. Ensure everything works as intended and share it with your team or stakeholders for feedback.
   - voiceover: After testing your prototype, consider sharing it with stakeholders or your team for feedback. You can also refine your interactions based on the feedback received and further develop your design for production.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9ioku2f0001jm0do0td91o8/cm9ip059p00030djx0zvr35y4.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM

Source: https://share.layerpath.com/share/cm9ioku2f0001jm0do0td91o8/tour