Figma: Recreate the most useful interactions using Figmotion

Em Design
19 min readAug 8, 2019

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.

Image credit: Google Design

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…

Em Design

Written by Em Design

A passionate designer who designs digital experiences for mobile phones and websites. — — — — — — — — — — — — www.wearemoonlight.com

Responses (2)

What are your thoughts?

Thank you so much, nice article :)

1

Can these prototypes /animations be shared with the client in the same way you would present and share them in “vanilla” Figma?