"Implementing Designs for Android" was retired on June 13, 2016. You are now viewing the recommended replacement.
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