Figma: Recreate the most useful interactions using Figmotion

Em Design
Em Design
Aug 7, 2019 · 19 min read

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 learn two things: Figma as the future of design tools and how to design and think about micro-interactions.

Let’s start:

We’re going to re-create these pages and their micro-interactions :)

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”.

Do you want some coffee?

6- We need to install a plugin which is called “Figmotion” and import “Google Sans (or “Product Sans” or “Montserrat”) fonts. I’m not allowed to talk about these fonts, so I think you should do something about them!

But to install the plugins, click on the hamburger menu at the top of the screen and select the “Plugins” option. Then, select the “Manage Plugins” option and find the “Figmotion” plugin and install it.

This plugin is awesome! Maybe Adobe XD should learn from Figma and add a timeline feature to the its “Auto Animate”.

7- Great! everything is ready. Now, let’s go back to our artboard (Sorry! Figma calls it “Frame”). I want to tell you something if you don’t use an Android-powered device:

As a designer, you can’t always have access to different tools and devices and sometimes you should design for something that you had never used it before (you can use “Youtube” videos and “Google”). Don’t let anything to stop you from shaping the future of the design!

Since I like you (in a good way!), you can download the Google Photos ui kit from the below link:

Elements: Get the required elements

UI Kit: Get the Google Photos UI kit

In the above files, you will find some elements of Google Photos and also, you can find the Google Photos UI kit. I highly suggest you to not download the UI Kit until you finish reading this article and we only need the first file for this article (required elements).

This article is not above how to design a component in Figma or design a system. I know better ways to design a component, but to keep everything simple we only use these components as our required elements to recreate Google Photos.

8- Copy and paste the required elements into your workspace (the file you created before). Now, you should see something like this:

Call the first artboard “Photos”.

We don’t need more than two artboards to show “Dropdown menu” and “Navigation Drawer” separately. So, let’s start with these simple animations. Before I start, I want to tell you something about Figmotion.

Figmotion works like After Effects and if you want to create an animation you don’t need to create different artboards because this plugin can’t connect different artboards and find out changes which have been applied to the elements of the artboards.

What’s a state?

Imagine you’re shopping for clothes at the “A” mall; After half an hour you go to the “B” mall to buy something else. When you left the “A” mall and went to the “B” mall, your location on the map changed but you didn’t change (I mean you’re still the same person).

We use this philosophy to design an animation. When you tap on the “A” rectangle and this rectangle moves, you don’t see two different rectangles. You just see the position of the rectangle on the screen changes. Sometimes we change the other attributes of an element like its opacity, color, and … but we’re not going to change the element, we just change its attributes.

We still see a square, only the appearance of this square has changed. Imagine this square wore different clothes.

First Animation: Navigation drawer appearance

forasmuch as we want to make this prototype more real, we are going to recreate the click effect too. I mean you click on the hamburger menu and navigation drawer appears.

We want to recreate this animation.

Read the below steps to recreate the Photos page and also, navigation drawer appearance animation:

1- Create a new artboard and call it “Photos” and take a look at the below “*.gif” to add the required elements to recreate the “Photos” page:

№1

2- Now, we need to add the required elements for the Navigation Drawer. We add the Navigation Drawer from the “Assets” section and then we create a black rectangle to hide the elements behind the Navigation Drawer (Change the opacity of the black rectangle from 100% to 50%):

№2

3- Open “Figmotion” Plugin and we’re going to create 3 states: 0 milliseconds (A), 300 milliseconds (B), 700 milliseconds (C). For the black rectangle, we’re going to set its opacity to 0 for A and B states but for C state, we set its opacity to 0.5 (means 50%):

№3 (We changed the black rectangle opacity from 0 to 0.5 for the third state. So, the black rectangle appears when the navigation drawer starts to move)

4- Now, we want to show the navigation drawer. The navigation drawer appears from the left side of the screen. So, we need to change its X position from (-410) for A and B states to (0) for C state:

№4

5- Read this step carefully because we will use it in the next steps to recreate your behavior when you tap on something, without any explanation.

  • We need to create a circle (Size: 45px * 45px / Color: “C4C4C4” / Opacity: 50% / Effect: Drop Shadow).
  • Unlike other elements, we’re going to use four states for this circle: 0 ms (A), 250 ms (B), 300 ms (C ) and 350 ms (D) (700 ms (E) will be used to show the changes have been applied to the opacity of the circle).
  • We need to change its X and Y position (to show users the circle moves):
    A: X=322 / Y=138
    B: X=27 / Y= 250
    C: X=27 / Y= 250
    D: X=27 Y= 250
  • Now, we need to reduce its size when we tap on the hamburger menu:
    A: Width= 45 / Height= 45
    B: Width= 45 / Height= 45
    C: Width= 35 / Height= 35
    D: Width= 45 / Height= 45
  • As a last change, we’re going to hide the circle after tapping on the hamburger menu:
    A: Opacity= 0.5 (and B)
    C: Opacity= 0.5 ( and D)
    E: A: Opacity= 0
№5 (The changes you need to apply to the circle to simulate the tap behavior)

Nice Job! the result will be something like this:

We could improve the current form of the click animation or timing and even easing. In my upcoming article, you’ll learn it, I promise :)

Second Animation: Dropdown menu appearance

Now, we want to recreate the dropdown menu appearance.

We’re going to recreate this animation.

Just for your information! We use shadow for our elements to show users which one is above the other one and is closer to the screen.

Which one is closer to the screen? (Tip: Find out which element appears on the other element by looking at their shadows)

To re-create dropdown menu appearance animation, we need to create another artboard and important necessary elements again. Follow the below steps to recreate the Photos page and also, dropdown menu appearance animation:

1- Create a new artboard and call it “Photos” and take a look at the below “*.gif” to add the required elements to recreate the “Photos” page:

№1

2- Now, we need to add the required elements for the Dropdown Menu. We add the “More” component from the “Assets” section and then, detach it because we want to apply some changes to the icons and shape of the dropdown menu separately.

We need to change the position of the icons of the dropdown menu and also, we should change the width and height of the shape of the dropdown menu to recreate the second animation:

№2

3- Convert the “icons” group to a component because Figmotion doesn’t support groups:

№3

4- Open “Figmotion” Plugin and we’re going to create 3 states: 0 ms (A), 300 ms (B), 700 ms (C). For the first change, we want to change the X and Y position of the “Icons” component:

  • We need to change its X and Y position (to show users this component moves):
    A: X=210 / Y=69
    B: X=210 / Y= 69
    C: X=190 / Y= 82
  • Also, we need to change its opacity too because the icons are not visible in A and B states:
    A: Opacity= 0
    B: Opacity= 0
    C: Opacity= 1
№4

5- Now, we should work on the shape of the dropdown menu and we should change its X position and its width and height. Also, we need to change the opacity of the shape of the dropdown menu because it’s not visible in A and B states:

  • We need to change the width and height of the “Shape” layer:
    A: Width= 180 / Height= 318
    B: Width= 180 / Height= 318
    C: Width= 219 / Height= 387
  • Also, we need to change the X position of the “Shape” layer (We change the X position of the “Shape” layer because we want to keep the right side of it unchanged)
    A: X= 217
    B: X= 217
    C: X= 178
  • As the last change, we’re going to change the opacity of the “Shape” layer too:
    A: Opacity= 0
    B: Opacity= 0
    C: Opacity= 1
№5

6- As an exercise, recreate the behavior of users when they tap on the More button (I explained everything about it before!)

Now, you should see something like this:

I reduced the speed of the “.gif” file to show better how this animation works (We changed the width and height of the rectangle of the dropdown menu and its X position. Also, we changed the X and Y position of the icons of the dropdown menu)

Third Animation: Image

As the third animation, we’re going to recreate the appearance animation of an image when you click on it. Take a look at the below gif to understand better what I’m saying:

We’re going to recreate this

If you’re a good student, you may notice that in the first state (before we click on the image), this image masked by a square and then the square becomes a rectangle to show the whole picture.

1- Create a new artboard and call it “Images” and take a look at the below “*.gif” to add the required elements to recreate the “Photos” page:

№1

2- Now, we need to add “Image Actions” and “Image Options” elements when we want to show the image completely:

№2 (Adding the required elements)

3- Since we’re going to change every layer of “Image Actions” and “Image Options” elements, detach these components and rename the layers. Remove the rectangle layer from these elements because we don’t need them and also, remove the “More” icon from the “Image Actions” element.

№3

4- Now, let’s change the position of the “Back”, “Up” and “Fav” icons:

№4

5- Also, we need to detach the “Search Bar” element because we need the “More” icon. As you may notice, we need to change the colour of the “More” icon from “Grey” to “White” when the users tap on the image.

№5

6- We should detach the “Navigation Bar” and “Status bar” too because we want to change the colour of their icons later. Don’t forget to rename their layers to find them easier in Figmotion:

№6

7- Finally, we should detach the “Images” element too because the first image will be used later to complete this animation. When you detach this element, you’ll see two groups “August” and “July”. Convert “July” group again to a component otherwise, its elements will be shown on Figmotion:

№7

8- Add a black rectangle too which will be shown when you click on the image. Set its opacity to “0%:

№8

9- Now, we’re ready to open the “Figmotio” plugin and recreate the third animation. We’re going to use three states for these elements:

  • Image: 0 ms (A), 300 ms (B) and 700 ms (C )
  • Status bar, Navigation bar, “More” icon, Black rectangle, Image actions, and Image options: 0 ms (A), 300 ms (B) and 500 ms (C )

Why? because those elements will be changed before the image opens completely.

№9 (this image is not useful)

10- Now, Let’s open the “Figmotion” plugin and change the behaviour of the “Image”.

Just to remind you, its states are: 0 ms (A), 300 ms (B) and 700 ms (C )

  • Size:
    A :Width= 99 / Height= 99
    B: Width= 99 / Height= 99
    C: Width= 411 / Height= 327
  • Position:
    A: Y= 163
    B: Y= 163
    C: Y= 248
№10

11- Now, we should change the behaviour of the “black rectangle” that we created before:

Just to remind you, its states are: 0 ms (A), 300 ms (B) and 500 ms (C )

  • A: Opacity= 0
    B: Opacity= 0
    C: Opacity= 1
№11

12- In this step, we’re going to change the behavior of the “Image Actions” elements: Back, Favourite and Upload.

Just to remind you, its states are: 0 ms (A), 300 ms (B) and 500 ms (C )

  • A: Op= 0
    B: Op= 0
    C: Op= 1
№12

13- Now, we want to change the behavior of the elements of the Navigation Bar and Also “More”.

Just to remind you, their states are: 0 ms (A), 300 ms (B) and 500 ms (C )

  • Navigation Bar / Back
    A: Stroke Color = 0
    B: Stroke Color = 0
    C: Stroke Color = 1
  • Navigation Bar / Home
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • More icon
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
№13

14- As the last step, we’re going to change the color of icons of the status bar:

Just to remind you, their states are: 0 ms (A), 300 ms (B) and 500 ms (C )

  • Status Bar / Time
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Status Bar / Charge Percent
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Status Bar / LTE
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Status Bar / Network
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Status Bar / Battery / Charge (This is an icon)
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Don’t change the Status Bar / Battery / Shape!
№14

15- We forgot something! What? We need to change the opacity of the Image Options icons.

Just to remind you, their states are: 0 ms (A), 300 ms (B) and 500 ms (C )

  • Image Options / 1
    A: Opacity = 0
    B: Opacity = 0
    C: Opacity= 1
  • Image Options / 2
    A: Opacity = 0
    B: Opacity = 0
    C: Opacity= 1
  • Image Options / 3
    A: Opacity = 0
    B: Opacity = 0
    C: Opacity= 1
  • Image Options / 4
    A: Opacity = 0
    B: Opacity = 0
    C: Opacity= 1
№15 (I applied these changes to one icon but you need to do this for other icons of the Image Options too)

16- Exercise: Recreate the tap behavior.

Perfect! I expect you created something like this or even better. As you may notice, the mouse behaviour is not good but it’s not a big deal! Let’s take a look at the below “*.gif” below:

:)

Fourth Animation: Changing between tabs

Now, the hardest animation arrives! it’s not so hard but it’s not so easy. Until the moment I want to write this, I don’t have any idea what I should do to re-create this animation. First, Let’s take a look at the below animation:

At first glance, it looks very simple but did you notice the icons change?

Let me explain what we’re going to do:

  • Change the radius of the edges of a rectangle to show users that the Albums tab has been selected.
  • Change the style of the “Photos” icon, So I will recreate this icon.
  • Change the style of the “Albums” icon, So I will recreate this icon.
  • Show the content of the “Albums” Tab

1- Let’s recreate this together by creating a new artboard and adding the required elements:

№1

2- Since we need to show the “Albums” tab, you need to add the Albums component too:

№3

3- Arrange the layers like the image below:

№3

4- Detach the “Bottom Bar” element and create a separate group for each icon:

№4

5- Now, we should recreate the icon of the “Photos” tab:

№5 (Don’t be afraid to create a new icon or recreate what it’s already created!)

6- We should change the name of the layers of the “Photos” tab like the below:

  • Mountain → Photos / Mountain
  • Square → Photos / Shape
  • Also, make a copy of the “Photos / Shape” and change its name to: Photos / Shape / Back.
    We need to apply some change to this layer: Remove “Fill”, Add Stroke (Inside Border / Size: 2 / Color: “#767676”). It should be lower than “Photos / Shape”.

Why we made a copy from the “Photos / Shape” layer? We’re going to show it when the “Photos / Shape” disappears.

№6

7- Recreating the “Albums” will be a bit difficult but as I told before, don’t be afraid of it! We’ll try to design an icon of a book.

  • First step: create a square and try to place it on the square of the main icon.
  • Second step: Create a vector like the below “.gif” and change the radius of its main corner to 2.
№7–1 & 2
  • Third Step: Change the color of the square stroke to#767676 (Remove “Fill” option / Stroke size = 2) and change the vector stroke to #767676.
№7–3
  • Fourth Step: Create another vector like the below “.gif” and fill it with this colour: #767676.
№7–4
  • Fifth step: Rename the square and the vectors:
    Square → Albums / Shape
    First vector → Albums / Line
    Second vector → Albums / Complete
  • Sixth step: Make a copy of the “Albums / Shape” and remove the “Stroke” option and check the “Fill” option. Fill the shape with this color: #1D6DDF and set its default opacity to 0%.
    Also change its name to “Albums / Shape / Back” (When the “Albums / Shape” disappears, we’re going to show this):
№7– 5 & 6
  • Seventh step: Rearrange “Albums / Shape”, “Albums / Line”, “Albums / Shape/ Back” , and “ Albums / Complete” as the below picture:
№7–7

8- Create a new rectangle (Take a look at the main animation to understand why we want to add a rectangle to the bottom bar!) and change its name to “Rectangle / Tap”. Its position in the “Layers” window should be lower than the icons we created before and their labels:

  • Fill: #1D6DDF
    Opacity: #10
    Radius: 40
№8

9- Open “Figmotion” and let’s recreate the last micro-interaction. We need to use three states:

  • “Albums” element: 0 ms (A), 700 ms (B), 900 ms (C )
  • Other elements and layers: 0 ms (A), 300 ms (B), 700 ms (C )

Why? because the “Albums” element appears after our user tap on the “Albums” tab and “Images” element disappears.

First, we’re going to recreate the disappearance animation of the “Images” element:

Just to remind you, its states are: 0 ms (A), 300 ms (B) and 700 ms (C )

  • “Images” component:
    State A: Opacity = 0
    State B: Opacity = 0
    State C: Opacity = 1
№9

10- In this step, it’s time to redesign the effect of changing the style of the “Photos” tab icon:

Just to remind you, its states are 0 ms (A), 300 ms (B) and 700 ms (C )

  • Photos / Shape: We’re going to change its opacity from 100% to 0%.
    State A: Opacity = 1
    State B: Opacity = 1
    State C: Opacity = 0
  • Photos / Mountain: We need to change its color from “#FFFFFF” to “#272727”.
    State A: Fill Color= #FFFFFF
    State B: Fill Color = #FFFFFF
    State C: Fill Color = #272727
  • Photos (Text): We need to change its color from “#1D6DDF” to “#272727”.
    State A: Fill Color = #1D6DDF
    State B: Fill Color = #1D6DDF
    State C: Fill Color = #272727
  • Don’t change the opacity of the “Photos / Shape / Back” and its opacity should be always 1.
№10

11- Now we want to recreate the tap effect (I mean we’re going to show the last rectangle we created to simulate the tap effect):

Its states are 0 ms (A), 300 ms (B) and 700 ms (C ) and 900 ms (D).

  • Rectangle / Tap: We’re going to change its opacity radius from 0% to 10% (State B -> State C) and then, change it to 0% to hide this rectangle (State C -> State D).
    State A: Opacity = 0
    State B: Opacity = 0
    State C: Opacity = 0.10
    State D: Opacity = 0
  • Rectangle / Tap: Also, we should change its corners radius from 40 to 0.
    State A: Border radius = 40
    State B: Border radius = 40
    State C: Border radius = 0

We won’t change the border radius of the corners of this rectangle in the last state (900 ms).

№11

12- In this step, it’s time to redesign the effect of changing the style of the “Albums” tab icon:

Just to remind you, its states are: 0 ms (A), 300 ms (B) and 700 ms (C )

  • Albums (Label): We need to change its color from “#272727” to “#1D6DDF”
    State A: Fill Color= #272727
    State B: Fill Color= #272727
    State C: Fill Color= #1D6DDF
  • Albums / Shape:
    State A: Opacity= 1
    State B: Opacity= 1
    State C: Opacity= 0
  • Albums / Shape / Back:
    State A: Opacity= 1
    State B: Opacity= 1
    State C: Opacity= 0
  • Albums / Line:
    State A: Stroke Color = #272727
    State B: Stroke Color = #272727
    State C: Stroke Color = #1D6DDF
  • Albums / Complete:
    State A: Fill Color = #272727
    State B: Fill Color = #272727
    State C: Fill Color = #FFFFFF
№12

13- This is the last step before I give you an exercise! Take a look at the main “.gif” again which was used to recreate its micro-interaction. You may notice that the “Albums” component moves a little upwards and then appears. So, We need to change its Y position and also its opacity:

Just to remind you, its states are: 0 ms (A), 700 ms (B) and 900 ms (C )

  • Albums (Component which was added to the artboard in the second step): As I told you before, we need to change its Y position.
    State A: Y= 155
    State B: Y= 155
    State C: Y= 140
  • Also, we need to change its opacity:
    State A: Opacity= 0
    State B: Opacity= 0
    State C: Opacity= 1
№13

14- As an exercise, create a circle and simulate the tap behavior (I mean create a circle and move it and then change its size to simulate the tap behavior).

Now, we created this animation:

Good job! :)

Now, you learned how to design the most useful micro-interactions of Android OS and I expect you to design more micro-interactions of Google Photos app as an exercise to learn this article better.

Like this article, if you find it useful or you learn something from it. I spent a lot of time to make this article ready for you. Please share it with others :)

Em Design

Written by

Em Design

A passionate designer who designs digital experiences for mobile phones and websites. — — — — — — — — — — — — — PORTFOLIO: emportfolio.webflow.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade