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:

Untitled Icons by Jordan Hughes

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

Liton Ahammed

UIUX Designer

--

--