How to Design and Animate a Collapsible Sidebar in Figma
Adi Purdila, Web Designer & Developer
Watch this class and thousands more
Watch this class and thousands more
Lessons in This Class
-
-
1.
Welcome to the Class
1:46
-
2.
The Class Project
1:15
-
3.
Choosing Icons
15:12
-
4.
Designing the Menu Items
16:25
-
5.
Designing the Two Sidebars
21:19
-
6.
Animating the Sidebar
7:31
-
7.
Conclusion and Final Thoughts
1:20
-
-
- --
- Beginner level
- Intermediate level
- Advanced level
- All levels
Community Generated
The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.
9
Students
1
Project
About This Class
In this class I will show you how to design and animate a collapsible sidebar in Figma.
Â
Why Take This Class
This is a very practical class and it’s gonna teach you how to use Figma to design something that you’ll definitely encounter in your design career. And I’ll show you the best tools and techniques you can use to create this quickly and efficiently.
Â
Class Overview
In this class you'll get hands-on with some of Figma’s most powerful features. I'll show you how to use auto layout to keep everything perfectly aligned, how to save time with variables and layer styles, and how to streamline your workflow with components and variants. Plus, we'll dive into some advanced prototyping techniques so you can smoothly animate the sidebar between its collapsed and expanded states.
Â
What You'll Learn
- How to pick icons for a design project
- How to work with variables and layer styles to save time
- How to pick the right colors and design something according to brand guidelines
- How to work with Figma auto layout
- How to create components with multiple variants
- How to smoothly animate a prototype
 Â
Class Project
This class isn't just about theory. You will be able to pick from 3 wireframes and 3 fictional brand assets. Based on them, you will design your own collapsible sidebar.
You can download the class project file by getting a copy of the file below:
Download the student resources
 Â
Is This Class for You?
Absolutely! This class will be valuable for total beginners but also seasoned designers. You don't need extensive Figma experience, but a certain familiarity with the Figma UI will make the class easier to follow.
This class is all about practicing and designing in Figma, no matter your skill level.
Â
What You’ll Need
We'll exclusively use Figma for our work, so all you need is a browser and a free Figma account. Whether you're on a laptop or desktop computer, running Mac, Windows, or Linux, you're all set to dive in.
 Â
Resources I Used
For the design you see in class, I used the following resources:
   Â
Let’s Get Started
Are you ready to design a collapsible sidebar in Figma? Then join me and I'll see you in class!
 Â
You Might Also Like These Classes
Hands-on Class Project
Your class project is to design a collapsible sidebar in Figma. To help you with that, I provided you with a Figma file containing 3 brand assets along with 1 wireframe for each.
The first brand is TickList. This is a sleek and intuitive to-do list app designed for individuals and teams who want to stay organized and get things done efficiently.
The second brand is ShopMingle. ShopMingle is an e-commerce platform focused on social shopping.
The third brand is FitRoute. This is a fitness tracking app designed to help users navigate their health journey.
 Â
You can pick any of these 3 to create your sidebar design. You can even pick all 3 if you want, the choice is solely yours.
 Â
Step 1
Pick any of the 3 brands to create the sidebar design.
 Â
Step 2
Based on what you've learned in the class and your own experience, design the collapsed and expanded versions of the sidebar, then animate the change.
 Â
Step 3
Export the finished sidebar as an image and post it as the Class Project. You can also link to the Figma file directly.
 Â
Do You Really Need to Post a Class Project?
It's not mandatory, but I highly recommend it because sharing your progress has its perks. First, you get to see what your classmates are up to. You get to see what designs they created. Second, you're not just absorbing theory; you're getting hands-on with a project.
 Â
I Look Forward to Seeing Your Class Projects
I would love for you to share the results of the class project. And remember, if at any point you're confused about a certain topic, please reach out with any questions you might have. Post them in the discussion area and I'll do my best to help out.
 Â
Download the Student Resources File
To make things easier for you, I created a resource file which has the structure prepared for your sidebar design. Use the link below to get a copy of the file.
Class Ratings
Why Join Skillshare?
Take award-winning Skillshare Original Classes
Each class has short lessons, hands-on projects
Your membership supports Skillshare teachers
Learn From Anywhere
Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.
Related Classes
