Here is a list of best practices I learned as I started to build my first prototype in Figma.
- Build a wireframe before you start your prototype.
Building a wireframe sounds like an unnecessary step that takes time away from designing your website or app, but it helps you save time in the end by helping you map out where to copy themes for different pages, where you can build master components to avoid over linking, and showing where you need to create specific components such as typing, scrolling, or check-boxes.
- Use Master Components as often as possible to save time linking components on large builds with multiple pages and links.
The best way to do this as efficiently as possible is by building a complete wireframe of your website prior to building out your prototype. This sounds self-explanatory but by doing this first, you are able to map out all the possible areas you could create master components throughout your website or app.
Once you have decided what areas of the website you can utilize master components, you can then start to build them. Next, once all the pages are built that use the master component, you should link it to those pages. Lastly, you copy and paste the master component to each page, saving time linking each page separately.
- Timed delays make your prototype more realistic when you present the prototype.
Delayed triggers allow you to build a loading bar that is perfect for when you want to show a document being uploaded onto a site or when you are imitating a chat in an instant messenger screen.
- Get to know the too Smart Animate.
It allows you to quickly create useful animations such as pull to refresh, loading sequences, and sliders.