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
Watch and learn how to bring your hamburger menu icon to life with a dynamic animation technique.
This video doesn't have any notes.
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.
0:00
In this next demo, I'm gonna show you
how to create a micro interaction for
0:01
your hamburger menu.
0:04
For this interaction,
0:05
we'll have the three lines in our
hamburger menu animated into a X pattern.
0:06
But before we get started,
I'm gonna name our last component toggle.
0:10
There we go.
Now let's begin on our hamburger menu.
0:14
I'll hit L to select the line tool and
0:17
start creating a line
off to the side here.
0:19
You can hold shift while creating your
line to ensure it's a straight line.
0:21
Now that I'm happy with my line,
0:26
let me go back to the design
tab in the properties panel.
0:27
Next I'll go down to stroke and
increase the width of our line.
0:30
There we go.
0:36
I think four pixels works for
this example.
0:36
Now I'll select the line and hit Command+D
to duplicate it, or Ctrl+D on Windows.
0:39
Then I'll drag it down a bit.
0:43
Once I have my spacing correct,
0:45
I'll hit Command+D again to create
another duplicate of our line.
0:46
The neat thing about figmas duplicate
feature is that it remembers the spacing I
0:50
created between the first two lines and
0:53
automatically applies
it to the third line.
0:55
And if we were to keep
duplicating the lines,
0:57
they would all include the same spacing.
0:59
But now I'm going to select
all three of my lines and
1:01
head back to the properties
panel on the right.
1:04
Under stroke, I'm going to select
the drop down for the right endpoint, and
1:06
I'm gonna choose rounded
from the drop down menu.
1:09
And next, I'll select the drop down for
the left endpoint and
1:12
choose rounded again.
1:14
Now with all three of my lines selected,
1:16
I'll hit Command+G to group
these lines together.
1:18
Now I'll select my group of lines and
go to fill in the properties panel.
1:21
I'm going to change this
from white to a darker gray.
1:25
Next, I'll select the group so
I can duplicate it.
1:29
But instead of using the shortcut
this time, I'll select the group and
1:31
then hold Option on Mac or
Alt on Windows while dragging.
1:34
As you drag, a duplicate of the group
will be created when you release
1:37
the mouse button, the new copy will
be placed wherever your cursor is.
1:40
Alright, now we can
create our component set.
1:44
We'll select both groups and head up to
the component icon in the main menu, click
1:47
on the component, drop down and select
the last option, create component set.
1:51
Next I'll rename my component and
label it hamburger menu.
1:55
Now to work on the second
state of our component.
2:01
I'll start by selecting
the second group of lines,
2:03
then double clicking to select
line 2 in the second group.
2:05
Then I'll place my cursor slightly outside
of the line until my cursor changes into
2:09
two arrows connected with a curved line.
2:12
This means we can tilt our element
clockwise or counterclockwise.
2:15
I'll tilt line two clockwise until I
get a diagonal line, that looks good.
2:18
Next I'll select line 3,
or the bottom line, and
2:22
do the exact same thing
as I did with line 2.
2:25
Only this time I'll also reposition
line 3 to sit directly on top of line 2.
2:28
Here I wanna make sure
they line up exactly and
2:32
one isn't sticking out past the other.
2:34
Now I'll select line 1, or the top line,
and begin tilting it counterclockwise
2:37
until I get a diagonal line
opposite of our other one.
2:41
Then I'll move it down to line up with
the other lines to create our x icon.
2:44
Perfect.
2:48
Now I'll select our Hamburger Menu icon,
2:50
then head over to the prototype
tab in the properties panel.
2:52
Then I'll click the plus icon
on our hamburger menu and
2:56
drag the arrow to our X icon.
2:58
Okay, let's check our settings.
3:00
Trigger is set to on click.
3:02
Group 1 is set to change into group 2.
3:05
It's set to smart animate.
3:07
Our motion is set to ease
out at 300 milliseconds.
3:09
These are good default
settings to work with.
3:12
So let's click out of this pop up.
3:14
Next, let's select the X icon and
we'll click on the plus icon and
3:16
drag the arrow to the hamburger menu.
3:20
Now let's make sure our settings match.
3:22
Triggers set to on click.
3:24
Group 2 is set to change into group 1.
3:26
It's set to smart animate.
3:29
The motion is set to ease
out 300 milliseconds.
3:30
Okay, great.
3:34
Now let's head back to our frame.
3:35
Then we'll head over to the layers panel
and select the assets tab at the top.
3:36
Now we can drag in our
Hamburger Menu component for use,
3:40
then I'll place that exactly where I want.
3:43
There we go.
3:48
That'll work.
3:49
It doesn't have to be perfect for
this demo.
3:50
Okay, let's select our frame
by clicking on its name,
3:52
then hit Shift+Spacebar
to enter prototype mode.
3:55
Now let's test our hamburger menu and
it works.
3:59
The icon toggles between a hamburger
menu and an X shape when clicked.
4:03
This visual change indicates
whether the menu is open or closed,
4:07
providing clear feedback to the user about
the current state of the navigation.
4:09
That's it for this demo.
4:14
Be sure to meet us in the next video where
we'll go over creating micro-interactions
4:15
for buttons.
4:19
See you in the next one.
4:20
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