Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

What is Smart Animation & delays in Figma?

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:00:51
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 35:21
SECTION: 29
What next 14:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

Hi everyone, in this video we're going to look at animation in Figma. Up until now we've been doing kind of more page transitions, with the whole thing sliding out, but now, you ready for it, wait for it, eh, hey, cool, huh. That is the arrow sliding in, just the arrow, rather than the whole thing. To do that we need to learn something called Smart Animate, and we need to add a delay on our pages, so let's jump in, and I'll show you how to make it. 

So to animate in Figma, just like one element, we've just been animating like a transition between the entire thing, we just want this arrow to move in, like you saw at the beginning there. So what I want to do is, basically you have two of the same frame, so we're going to have Confirmation, this first one, we're going to duplicate it, let's hold down the 'Option' key on a Mac, 'Alt' key on a PC, we've got two of them, and on this first one I want it to be off screen, kind of over here. 

One of the tips is, when you are doing animation, is - I'm undoing that - is just have a bit of space. So I'm going to move it over here, just so I've got space for my arrow. So we're going to have this first confirmation, where the arrow is going to be off, and the second one where it's going to be on, and to make the magic happen, is we need to connect these two. 

So I'm going to click on this frame, and I want to say 'Prototype', and I want to say, go there, and when you go there, I want you to use Smart Animate, that's the one we ignored earlier. Basically this works when there are objects of the same name, on two separate frames, and it will animate them. You can see them on this first one, and you can see them on the second one, and it can see, like, hey, they're in different positions. I'm smart, I'm going to animate them, and I'm using the Ease In and Out back, because it looked nice. So yeah, let's give that a go, 'Confirmation', let's hit 'Preview', and it's not going to work, I know it's not going to work. 

This is going to be the big thing that catches you out, especially with these kind of slide in animations, so go, click once, it faded in. What's happening is, is that this arrow is actually not part of this frame yet, or not part of this frame anymore. There was a time it was, look, I'm part of this frame, so have a look over here in my Layers panel. I've got this line 13 on the Confirmation page, but watch what happens, look, watch it in the Layers panel. If I drag it out, it's still part of it, still part of it, still part of it. At some stage it goes, boop, can you see? I'm not sure where that noise came from, but there you go, it is line 13, and it is, now like, not in this frame, or this frame, so it doesn't know what to do. 

So basically it says there's no arrow, now there's an arrow, that's why it just fades in. So it's really important to make sure that it is part of this frame, you can have it over here, you just got to make sure it is inside the frame, and you do it by dragging it in. Now we've got a little, a little tip is, we've got two Confirmations, and that is pain, it's hard to know which one is which in the Layers panel. So I'm going to do Confirmation A and Confirmation B, just to be helpful over here, and my OCD says, A needs to be below B, A, B, there you go. 

Now, Confirmation A doesn't have my little line in there, so all I'm going to do is drag it in, there you go. It doesn't matter where it is as long as it's in this frame, and there's one that corresponds in this frame. So there's line 13, there, there's one there, it's going to work. So let's go and give it a test, so I'm going to use my back arrow once, I'm just using the arrow, you can click these down here if you want. I'm on page 4, click once, hey, a little animation. 

So yeah, that's the basics of Smart Animate, as long as there's, there is something on both frames, that has the same names, and it does something different, it'll work. It could be even-- let's share a couple of things, one of the things with stuff off screen on Confirmation A, we know it's there, like we can see it there, but we can't see it over here, so what we might do is turn the-- remember, one of the perks of a frame, is under 'Design, with the 'Frame' selected, you could say 'Clip Contents', so it kind of clips it off. 

So you can actually see it and work on it. It's still part of the right-- layer order, nothing's changed, except, you can see it now while you're working, but there are times you want to kind of turn it off, so it's all tidy. So now I can see it, I can-- we did animation of movement, it will actually smart animate anything. So let's say we want to start it here, so it's still in the right, we're still in the right frame, it's still a different movement, but here, we're going to turn the opacity down to 10%, just so I can still see it. 

Let's go test that now, so back arrow, click once, it fades in and does that. So there is a lot you can do, we're just going to keep it simple for the moment. Let's talk about some of the quirks, so one of the quirks is that if you rename it, so we've got line 13, and line 13, if you're like, oh, I'm going to be very careful, and good, and rename at least one of my layers, because it's got a different name now, it's not going to work. Let's go back, back arrow, click once, just kind of like fudged it. 

So if you got to name one, that's fine, just make sure you name the other one, Arrow, back one, click. What else do I want to do? I don't like the Fade In, I'm going to go back up to 100%. The other thing I want to do is, I'm doing it on click, basically what I want to happen is, I want to go to Checkout page, and when I click this, I want the arrow to start kind of like moving in, automatically, because at the moment I've got to click it and bring it in. 

You'll also notice, if I go back one, when I click on this, because of the transition between the Checkout page and the Confirmation page, because it does this back and forth, you actually see the arrow, look, that's weird, huh? So we're going to do a couple of things, when the Checkout is open in Prototype, I don't want it to do the crazy, what are we doing, we're going to get it to do 'On Tap', navigate to our Confirmation, perfect, but I don't want to do the Move In, I'm going to go to 'Instant', and I'm going to turn that clipping back on. 

So back to 'Design', remember, we clipped it off before, or turned it off, so we could work on it. It's great while you're working, but if you start seeing weird things, you might have to turn the Clip Contents back on, so let's give that a go. I actually want this off screen, make sure that it's inside Confirmation A, ready? So I'm going to go back, let's click this, instant, and I want it to automatically go across, not have to click somewhere and go across. 

So we're going to introduce another kind of transition between frames. So basically what I want to happen is, when it gets to here and we go to Prototype, at the moment what happens is, we say, on Tap, navigate to this other Confirmation B, I don't want it to be on Tap, I just want to use this one that says, After a Delay, so I want it to get here, and then, after a delay of, however long, I'm going to turn it down to one millisecond. You can't have zero for some reason, you have to have one millisecond, which is one thousandth of a second. 

So it's going to be instantaneous, it's going to get here, and then automatically move to this, and it's going to still use our smart animation, so that's the only change. Let's give it a go, let's go back to our Purchase page, give it a click, see, it got to there, and it automatically moved on. If that's a bit confusing let's change it to 2 seconds, so 2000 milliseconds, and let's go, back. 

So we click this, it gets here, waits for 2 seconds, and then moves to the other one, and the smart animation moves it in. You're with me? If you're not with me, don't worry, we've got a few more of these to do, it is a little bit weird, especially if you're from another kind of animation tool, where you've got a timeline, and keyframes, and Figma does it, but if you're thinking, "This seems a little bit clunky", it is, don't tell anyone, it is Figma trying its best to be all things to all people. 

So the rules are, make sure that the names of the things you want to animate, like our arrow here, are the same on both frames, you have duplicates of the same frame, don't move the stuff you don't want to, move the stuff you do want to animate, you need to make sure that the smart animate, is transitioning between the two, that's what makes the magic happen. 

The other big thing is that everything needs to be within the frames, what I mean by that is, remember, our little arrow over here can't be hanging out in no man's land, it actually has to be on this frame, and this frame, even if it's out in the artboard, it needs to be kind of grouped together inside that frame. Those are the rules of animation in Figma. All right, that is it, I will see you in the next video.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024