KreativePro Masterclass
Hello, {first_name}
4.3
Figma Microanimations
Learn UI Design Systems with Figma
Completed
Oops! Something went wrong while submitting the form.
Completed
Browse Lessons
25
lessons
3
hours
MINUTES
2
files
Level

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCESS
Overview

Figma Microanimations

On this UI Design lesson we wrap things up by creating fun micro-animations in Figma.

Reviews

Manases
Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
Noel
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
Noel Hale
Founder of Slush Monkeys®
Mae
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Mae Green
Product Designer @ Dropbox

Hey guys. Welcome back. Let's finish off this lesson with cherry on top, and I'd like to introduce to you guys micro animations with Figma. This is what we're going to be creating with the micro animation. It's a hybrid of prototyping and adding some simple, basic animations. You see the background shifting, the button label changes, the VR headset kind of also slightly moves down and it's happening with all three of them.
So this is a really nice effect that we can accomplish with Figma micro animation. So let's take a look. All right so what I did is I grabbed some of the headsets that we have already worked on. I've added these three into a frame called tabs. And essentially, what we want to do is we want to use the prototype tool to connect them to another instance or view of this same frame.
So, because there's three of these, we're going to need to have three different instances for different frames. I'm going to also make sure that whatever elements that we want to show on the other frames are also in this same first original frame. So what I mean by that is if I show you right now, what I've done is I've hidden a layer in my panel on every card.
And I've just changed the opacity to zero. And I've actually set the default or the first key frame that we want to show is have this hidden. So I've replicated this same label across all those three cards. So let's take a look when we start adding these into multiple frames. So I'm going to create this, duplicate this.
Okay. And I want to just slightly shift some of the settings on the first frame A so for example, I want to make this VR headsets slide down a little bit. That's the second frame or the second state of that animation. And I want to go to actually move down and have the opacity at zero. But before I do that, let's turn on and toggle back on the opacity on the bike so we can align it exactly where that previous button is.
Then we can move GO down just a couple of notches with the shift tool and we can fade that to 0%. Okay. So that's two different changes that we've added. We've made the first label opacity to go to zero and the second label to go to a hundred percent. We've shifted a little bit the VR headset. And now we, I want to just shift a little bit that background.
So just by simply moving it across, just like that I have two different States. The default and then the hover state, but I'm also going to move the whole entire card just a little bit higher just around there. So maybe a couple of pixels off. Now I'm able to start connecting the dots. We clicked on the prototype and on the right little circle that we get, we connect that to the next frame.
We can either unclick it on drag it while hovering or while pressing. So I click on hovering and then this is just repeating what the arrow is doing. It's navigating to frame A, and the animation that I want could be either instant, a simple dissolve, or a smart animal. This is where the power Figma can help you make really cool micro animations.
The easing that we get here is limited. It's not as advanced as we get on webflow, but it gives you some options. So what's going to happen is the ease out if you hover over this, you get a little preview of how that animation is going to look like. So let's click on play to see how that looks like.
All right, so let's hoever over the first one. All right cool. That's the first animation and it's pretty straightforward. We see one state and then automatically Figma animates over to the next frame. That's awesome. So let's do that with the rest of the cards.
Okay, that looks good. Let's check it out. So we click on tabs. Click play.
Cool. That's awesome. I hope you guys  enjoyed this lesson. It's been a wild ride trying to explain all the crazy stuff and creating a very visual and interactive layout like this. All right. Thank you so much. And I'll see you on the next course.

Coming Soon

UI Design Systems
25
lessons
3
hours
MINUTES
2
files
Level
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
@kreativepro
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCCESS
PRICE INCREASE IN
00
Days
00
hrs
00
mins
00
secs
🚀
Welcome to the Tribe! 💜 Something cool is coming your way...