💗

Prototyping in Figma

Prototyping in Figma is not like all other prototyping tool.

It's directly build on the tool and super intuitive to use.

Create connections between two screens

  1. Open the Prototype tab in the right sidebar
  2. Select the starting frame for the connection
  3. Click the + to create the interaction
  4. Drag it to the destination

image
1 - Starting frame / 2 - Link between frames / 3 - Destination frame
1 - Starting frame / 2 - Link between frames / 3 - Destination frame

1 - Prototype tab / 2 - Interactions / 3 - Interaction details / 4 - Animation / 5 - Preview of the animation
1 - Prototype tab / 2 - Interactions / 3 - Interaction details / 4 - Animation / 5 - Preview of the animation

Adjust Prototype Settings

Before testing our prototype links, let's define our projet platform.

Click somewhere on your BG to de-select

  1. Select a Device and Model
  2. Preview your prototype
  3. Select Background color
  4. Set the prototype's Starting Frame

image

Test your Prototype

To present the frames in your file as a prototype, press the Play Button in the top right corner to open a new tab of your prototype.

image

You can also use the Figma Mirror app to test your mobile version directly

Now that you know how to preview your prototype in Figma and on your mobile phone, let's look at the best practices while prototyping

Best practices

  • Set larger touch areas for your prototyping links
No touch area around the icon
No touch area around the icon
Great touch area around the icon
Great touch area around the icon
  • There is one prototype per Figma page so if you want to iterate and test different prototype, simply create a new page
  • Once your prototype created, always think that when adding/removing frames, this will impact your prototype navigation.
  • And the most important one: set prototyping link directly on your Components. This will save you end-less hours making sure you've linked everything's right.
  • Keep your animations intuitive and smooth
    • Smart animate is a genius transition option (like Magic move in Keynote)
    • (If you're not familiar with great animations default your transitions settings to Ease in and out - 300ms)

Dive deeper

🎉 Congratulations!

You've reached the end of this Masterclass.

I hope you've learned a few things along the way. I would love to have your quick feedback

What's next?

  • If you've liked uxmasterclass.design talk about it with your friends, tweet about it
  • If you're interested in making money with this job, consider saving your spot for the premium pack
  • Follow me on Twitter and Linkedin to spot my next project!