Previewing the project is something we suggest doing at every moment when prototyping in Figma. It allows you to see if everything is working nicely and that the prototype is functional.
This tutorial explains How to Preview Prototypes and the different ways of doing it so, let’s go!
Prototyping is what makes Figma a unique software. This aspect of Figma allows you to create an interactive piece from your application design where is possible to visualize how the user interacts with it. It is a great way to present your project and receive feedback before the actual development. Cool isn’t it?
Once you finished the application design, it’s time to pass from the design tab to the prototype tab. All the options will be displayed at the right sidebar menu, but they won’t be visible if you have frames or objects selected in the canvas. So click somewhere else and then the menu will appear.
Now we have the Device option. This option will provide the different models and devices you can preview your prototype on, in this case, we used an iPhone 11 Pro Max and we chose the Silver model.
The background will help us to create a contrast between the application design and the preview mode, but it’s all matter of preferences.
To finally preview it, go to the arrow-looking icon located at the top-right of the screen next to the option Share.
If you already made connections and have a flow, the preview mode will activate these interactions so you can see your project come to life as a functional prototype application.
There you go!
