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
we'll have the three lines in our
hamburger menu animated into a X pattern.
0:00
But before we get started,
I'm gonna name our last component toggle.
0:01
There we go.
Now let's begin on our hamburger menu.
0:05
I'll hit L to select the line tool and
0:08
start creating a line
off to the side here.
0:10
You can hold shift while creating your
line to ensure it's a straight line.
0:12
Now that I'm happy with my line,
0:17
let me go back to the design
tab in the properties panel.
0:18
Next I'll go down to stroke and
increase the width of our line.
0:21
There we go.
0:27
I think four pixels works for
this example.
0:27
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