Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Creating Micro-Interactions in Figma!
You have completed Creating Micro-Interactions in Figma!
Preview
In this video, you’ll learn how to create a basic toggle animation for your prototypes.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back, now that we've covered
the basics of micro interactions,
0:00
let's dive into creating
our first one in Figma.
0:03
We'll start with a simple but effective
toggle animation, feel free to open Figma,
0:05
create a new design project,
and follow along.
0:10
To start, I'm gonna use the keyboard
shortcut Cmd+F on Mac or
0:13
Ctrl+F on Windows to
select the frame tool.
0:17
This will bring up the frame menu in
the properties panel on the right.
0:19
Once we have that menu open, we can see a
list of starting frame templates to choose
0:23
from, for this demo, I'll choose
the Desktop 1440 by 1024 option.
0:27
Now even though we have our frame ready,
0:31
we'll actually be working on
the outside of the frame to start off.
0:33
That's because we're making a component,
which is a reusable design element.
0:36
Once we have a component, we can create
as many copies as we like to use in our
0:39
designs, these copies
are known as instances.
0:43
All of our instances can be edited or
0:46
modified at once by editing
our main component.
0:48
On the flip side, however,
if we make changes to any given instance
0:50
of a component, the changes will only
be reflected in that specific instance.
0:54
It will not affect all of the other
instances of that component in our design,
0:58
but I'm getting ahead of myself,
I'll show you all this in practice later.
1:02
For now, though, let's begin
designing our toggle component.
1:05
A toggle or switch component as it's also
called, is a UI element you might see on
1:09
a website or a mobile app, especially
under the settings page, for example.
1:13
The toggle has two states,
one that signals the setting is off,
1:17
this is normally a lighter or
grayed out version.
1:21
And an on state, this is normally
reflected with a bolder color,
1:23
oftentimes green to
show the setting is on.
1:27
We'll start by designing
our toggles off state.
1:29
I'll start by zooming in a bit,
1:33
then I'll hit the R key to
select the rectangle tool.
1:35
Next I still draw my rectangle,
ensuring it is at least 44 by 44 pixels,
1:39
since this will be a clickable element.
1:42
Then I'll round the corners of my
rectangle to give it a pill or
1:48
capsule shape.
1:50
Next, I'll hit the O key to select
the circle tool and draw a small circle.
1:54
Then I'll select the circle, and head over
to the properties panel on the right side,
1:58
and change the height and width of the
circle, from 17 by 17, to 44 by 44 pixels.
2:03
And I'll place the circle on top of
the rectangle, aligning it to the left.
2:08
Next, I'll go to the fill section
under the properties panel and
2:11
change the fill from gray to
a solid white color, perfect.
2:15
Now I'll go to the effects section
in the properties panel, and
2:18
I'll add a simple default shadow to our
circle to create some depth, there we go.
2:21
Now, let's make the rectangle shorter so
the circle doesn't have as far to
2:25
travel during the animation, and
there we have it, our toggle's off state.
2:29
Now, let's select our toggle,
2:33
then hit Cmd+G on Mac to group
these two layers together.
2:35
This will be Ctrl+G on Windows,
2:38
then hit Command D on Mac to duplicate
the toggle or control D on Windows.
2:40
Next, let's drag the duplicate
below the original, and
2:45
this second toggle will be our on state.
2:48
Before we style our new toggle,
let's select both groups and
2:50
head up to this icon,
this is the Create Component icon.
2:53
When you have multiple elements selected,
you get this drop down option.
2:56
In the drop down, let's select
the bottom option, create component set.
3:00
Now, we have officially created our
first component, let's go back and
3:04
style our second toggle.
3:08
First, select the circle and
move it to the far right,
3:09
next we'll select the rectangle
in this group and
3:12
change the fill from this lighter
gray to a nice shade of green.
3:14
Awesome, that's looking good,
I think we're ready to use our component.
3:20
Next to the layers tab on the panel to our
left, you will see a tab labeled assets.
3:24
If we click this, we should see our
component in our list of local components.
3:29
Let's drag the component onto our frame,
3:32
this creates our first
instance of this component.
3:35
Next, I can click the name of my frame and
hit Shift + Space bar together to enter
3:37
preview mode, there we see our component,
but it doesn't work yet.
3:42
Well, that's because we haven't
prototyped the interactivity yet,
3:45
I'll exit out of preview mode and
head back to my component.
3:49
I'll select the off state
version of our toggle,
3:52
then go to the prototype tab in
the properties panel on our right.
3:54
Now that I'm in prototype mode,
I'll hover over the bottom of my toggle,
3:57
and a plus icon will show up.
4:01
We'll click this plus icon and drag the
arrow to our on state toggle right below.
4:02
Now we're in the menu to set the animation
properties for the off state toggle.
4:07
At the top you'll see on click,
this is where you select the trigger for
4:11
the animation, we can select on
click on hover and many more.
4:15
Since my trigger is
already set to on click,
4:19
I will leave that underneath is
the action we want Figma to take.
4:21
So, we want the toggle component
to change from group one or
4:25
the off state to group two,
which is our on state.
4:28
This is also already filled in for
us, so far, so good.
4:31
Next, we can choose our method
of animating the element,
4:35
we can choose from instant dissolve or
Smart Animate.
4:38
For our use case, we're going to use Smart
Animate, which I use 90% of the time.
4:41
But here's the key to getting the best
out of Smart Animate in Figma.
4:45
You've got to make sure your before and
after states, or
4:49
the two groups of layers
match up perfectly.
4:52
I'm talking the layers must be in
the same order, use the same names,
4:55
the whole shebang.
4:58
If you mess that up Figma gets confused,
it's like, hey, where'd this layer go?
4:59
Or what's this new thing?
5:04
And then your animation ends up looking
wonky, or worse it might not work at all,
5:06
so keep everything consistent,
and you'll be golden.
5:10
And underneath the Animate method,
we have the easing function, and
5:13
that's set to ease out.
5:17
Then we have the duration,
which is set to 300 milliseconds, and
5:18
that's a good base starting point,
so I think we're good to go.
5:22
Now I'm gonna hover over this bottom
toggle and select the plus icon and
5:25
drag the arrow to the top toggle.
5:29
Just a heads up, you'll find those plus
sign icons on the top, bottom, left and
5:31
right of your element when hovering
over it in prototype mode.
5:35
Now let's check our properties on click,
change to group one, Smart Animate,
5:38
for 300 milliseconds.
5:43
Looks good so
I'll click outside the pop up to exit out.
5:45
Now I'll select my frame again and hit
shift and spacebar to enter preview mode.
5:47
This time when we click on the toggle, it
should trigger the animation, and it does,
5:52
let me zoom in to really show
off the effect There we have it,
5:56
a quick and
easy way to create a toggle and Figma.
6:03
Join me in the next video where we'll
create the micro interaction for
6:05
a hamburger menu, I'll see you there.
6:08
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up