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
- Open the Prototype tab in the right sidebar
- Select the starting frame for the connection
- Click the + to create the interaction
- Drag it to the destination
Adjust Prototype Settings
Before testing our prototype links, let's define our projet platform.
Click somewhere on your BG to de-select
- Select a Device and Model
- Preview your prototype
- Select Background color
- Set the prototype's Starting Frame
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.
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
- Set larger touch areas for your prototyping links
- 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)
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
- 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!