Micro interactions

What’re the Micro interactions?

 Those are the small, everyday events in digital products that can be a great way to enhance the overall experience for your users.⁣⁣⁣

img_home_microinteractions
Micro interactions
tutorial

How to make

Micro interactions

In this tutorial, we are going to show you exactly how to prototype a micro-interaction in Figma.⁣⁣⁣
⁣⁣⁣
You'll learn how to make this animation for when a user hovers over an Inbox icon and then clicks or taps on it.⁣⁣⁣

Micro interactions
Menu Pop ups
tutorial

How to make

Menu Pop ups

In this tutorial, we are going to show you how to prototype a micro-interaction like Menu Pop-Ups in Figma.⁣⁣⁣⁣⁣
⁣⁣⁣⁣⁣
You’ll learn how to make this animation for when a user clicks on the menu plus icon to execute additional actions. Used often because of space limitations.⁣⁣⁣⁣⁣

Menu Pop ups
tutorial

How to make

Menu Pop ups

In this tutorial, we are going to show you another way how to prototype a micro-interaction like Menu Pop-Ups in Figma.⁣

You'll learn how to make this animation for when a user clicks on the menu plus icon to execute additional actions. Used often because of space limitations. You can use the same behavior on post actions.⁣

Menu Pop ups
Menu Item slide
tutorial

How to make

Menu Item slide

In this tutorial, we are going to show you another way how to prototype a micro-interaction like Menu Item slide in Figma.⁣⁣
⁣⁣
You'll learn how to make this animation for when a user clicks on the menu plus icon to execute additional actions. Used often because of space limitations. You can use the same behavior on post actions.⁣⁣

Item Count
tutorial

How to make

Item Count

In this tutorial, we are going to show you another way how to prototype a micro-interaction like an Item Count in Figma.⁣

You'll learn how to make this animation for when a user clicks on the menu heart/like icon to execute additional actions. Used often to simulate like count or follower count.⁣

Item Count
Follow  Item
tutorial

How to make

Follow  Item

In this tutorial, we are going to show you another way how to prototype a micro-interaction like Follow Menu item in Figma.⁣⁣
⁣⁣
You'll learn how to make this animation for when a user clicks on the menu icon and supporting design elements shows up. On every other icon click the element should follow you. ⁣⁣

Button Micro interaction
tutorial

How to make

Button Micro interaction

In this tutorial, we are going to show you another way how to prototype a micro-interaction like Button animation in Figma.⁣⁣⁣
⁣⁣⁣⁣⁣
You'll learn how to make this animation for when a user hovers/clicks on the button to achieve/simulate the connection to the source. It can be used to show actions like “Connecting to your phone or external camera/source”. ⁣⁣⁣

Button Micro interaction
Dropdown Menu
tutorial

How to make

Dropdown Menu

In this tutorial, we are going to show you another way how to prototype a micro-interaction like the Dropdown menu in Figma.⁣⁣
⁣⁣⁣⁣⁣⁣⁣
You'll learn how to make this animation for dropdown selection/filter use. In this case, I just used the standard dropdown color selection. Used often in
e-commerce app design.⁣⁣

Chart bar Animation
tutorial

How to make

Chart bar Animation

In this tutorial, we are going to show you another way how to prototype a Bar Chart animation in Figma.⁣
⁣⁣⁣⁣⁣⁣⁣⁣
You'll learn how to make this animation for Charts. There are three different chart types. Bars, Curves, or Arc/Pie charts. This is how we can animate Bar Charts.⁣

Chart bar Animation
Upload Files animation
tutorial

How to make

Upload Files animation

In this tutorial, we are going to show you a way how to prototype a File upload component in Figma.⁣
⁣⁣⁣⁣⁣⁣⁣⁣⁣
You'll learn how to make this animation for the file upload component. There are different upload box designs out there. I have chosen this one because its a part of my Brainstorming UI kit.⁣

Finance card animation
tutorial

How to make

Finance card animation

In this tutorial, we are going to show you a way how to prototype a finance card component in Figma.⁣
⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣
You'll learn how to make this animation for the finance card component. There are different finance cards out there. I have chosen this one because its a part of my Brainstorming UI kit.⁣

Finance card animation
Slide menu animation
tutorial

How to make

Slide menu animation

In this tutorial, we are going to show you how to prototype a part of the slide menu. I chose three items.⁣
⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣
You'll learn how to make this animation for the slide menu. There are different designs for slide menus. Full opened, partial, full with the description or just small tab with icons, etc.⁣

Ready to take your project to the next level?