Member-only story
In this article, you will learn how to design an advanced prototype in Figma which is very popular these days.
Hello again! After my first article about designing an advanced circular loading bar in InVision Studio, I’m going to show you something different. We’re going to learn the Figmotion plugin (the plugin for Figma which you can use it to design advanced prototypes) and recreate 4 most useful micro-interactions in mobile apps.
To learn this long article, you only need to spend 2–3 hours but if you don’t have enough time or You’re new to prototype design, I suggest you read this article for four days and learn one of the animations every day. But I’m sure after reading this article, you’ll be able to recreate many micro-interactions.
To learn Figma and Figmotion, I’m going to recreate some of the micro-interactions of Google Design Photos app. Before I write this article, I decided to recreate this app completely and that article was complete but I changed my mind and now you’re reading part of the previous article.
Recently, Figma published a new feature which is called: Plugins. Using plugins in Figma makes this design tool more powerful. We’re going to use the new feature of Figma and recreate Google Photos micro-interactions. With this article, you will learn two things: Figma as the future of design tools and how to design and think about micro-interactions.
Let’s start:
1- Find a seat and fasten your belt.
2- As always, open your laptop and turn it on.
3- Open Figma website (or if you use the desktop version of Figma, open its application) and create a new file. To create a new file in Figma, just press the “+” icon at the top of the screen.
4- Press the “F” button on your laptop’s keyboard to create a new frame (Figma calls the artboards “Frame”).
5- I select the “Google Pixel 2 XL” artboard or you create an artboard with these numbers: W= 411 px / H= 823 px. We call the first frame “Photos”.
