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
We'll start with a simple but effective
toggle animation, feel free to open Figma,
0:00
create a new design project,
and follow along.
0:01
To start, I'm gonna use the keyboard
shortcut Cmd+F on Mac or
0:04
Ctrl+F on Windows to
select the frame tool.
0:08
This will bring up the frame menu in
the properties panel on the right.
0:10
Once we have that menu open, we can see a
list of starting frame templates to choose
0:14
from, for this demo, I'll choose
the Desktop 1440 by 1024 option.
0:18
Now even though we have our frame ready,
0:22
we'll actually be working on
the outside of the frame to start off.
0:24
That's because we're making a component,
which is a reusable design element.
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