Creating an Interactive Prototype on Figma

What is Figma?

Figma is a free, web-based design software that’s used by many industry professionals.

What can I do on Figma?

  • Create UI designs and components
  • Create design systems
  • Create and share interactive prototypes
  • Work simultaneously in teams

Before you start

  1. Sign in to Figma.com or create an account
  2. Download Sample File (Google Drive, 9.4 MB)

You are ready to start.

Importing files

  1. Drag and drop downloaded Figma file (spotify-ui.fig) into Drafts drag and drop file from desktop into Figma
  2. Open spotify-ui draft

You have successfully imported the sample Figma file.

Connecting frames

  1. Switch to prototype mode by clicking on the Prototype tab in the properties panel to the right prototype tab on Figma
  2. Select the Home frame under the Layers panel to the left layer panel on Figma
  3. Hover to the Prototype panel and set the Overflow behavior to no scrolling
  4. Select the node on the right side of the Home frame and drag it to the Search frame connecting node from one frame onto another
  5. Adjust interaction effects using the Interaction details window that appears after connecting a frame interaction details window on Figma
  6. Connect the Search frame back to the Home frame by repeating steps 4 and 5
  7. Test your prototype by clicking on the ‘play’ button on the top right of the control panel 'play' button icon on Figma

You have successfully connected two frames.

Connecting frame with objects

  1. Make sure you’re on prototype mode and Overflow behavior is set to no scrolling
  2. Select the ‘search icon’ search icon on the bottom of the Home frame
  3. Select the node on the right and drag to Search frame connecting node from 'search icon' on Home frame to Search frame
  4. Set the interaction effect to on tap to create a user touch effect interaction details window on Figma
  5. Select the ‘home icon’ home icon on the bottom of the Search frame and drag left node back to Home frame

    Try doing the same for the Your Library frame

  6. Test your prototype by clicking on the ‘play’ button on the top right of the control panel 'play' button icon on Figma

You have successfully connected two frames using objects.

Share your prototype

  1. After completing your frame connections and interactions click the ‘play’ button on the top right of the control panel 'play' button icon on Figma
  2. Select the Share prototype button in blue to send email invites or to a copy shareable link share window on Figma in presentation mode

You have shared your prototype.

Related Video: Creating a prototype on Figma