How to Design and Animate a Collapsible Sidebar in Figma

Focused View

1:04:37

0 View

1 - Introduction

1 - Welcome to the Course.mp4

01:46

2 - The Course Assignment

2 - Download student resources.txt

2 - The Course Assignment.mp4

01:03

3 - Lets Design a Sidebar

3 - Choosing Icons.mp4

15:12

4 - Designing the Menu Items.mp4

16:25

5 - Designing the Two Sidebars.mp4

21:20

6 - Animating the Sidebar.mp4

07:31

4 - Conclusion

7 - Conclusion Final Thoughts.mp4

01:20

7 - Figma for Busy People Mastering Auto Layout.txt

Description

Master Figma Design and Animation: Create, Customize, and Animate a Collapsible Sidebar Using Realistic Brand Assets

What You'll Learn?

Pick the right icons for a design project.
Use a design system to pick the right colors and brand assets.
Use Figma auto-layout to easily align and space elements.
Use Figma components and variants to save time and work more efficiently.
Work with variables and layer styles.
Animate a Figma prototype to create a smooth transition between the collapsed and expanded version of the sidebar.

Who is this for?

UI/UX designers who want to level up their Figma skills with practical animation techniques.

Web designers looking to create dynamic and modern sidebars for websites and apps.

Design students or beginners who want to gain hands-on experience by working with brand assets.

Freelancers and professionals looking to expand their portfolio with a custom-designed and animated component.

Anyone interested in learning practical design skills in a structured, project-based format.

What You Need to Know?

You don't need extensive Figma experience, but a certain familiarity with the Figma UI will make the class easier to follow.

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.

More details

Description
In this course I will show you how to design and animate a collapsible sidebar in Figma.

Why Take This Course
This is a very practical course 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.

Course Overview
In this course 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

Course Assignment
This course 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.

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.
Who this course is for:
UI/UX designers who want to level up their Figma skills with practical animation techniques.
Web designers looking to create dynamic and modern sidebars for websites and apps.
Design students or beginners who want to gain hands-on experience by working with brand assets.
Freelancers and professionals looking to expand their portfolio with a custom-designed and animated component.
Anyone interested in learning practical design skills in a structured, project-based format.

User Reviews

Rating

average 0

Total votes0

Focused display

Web Design

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.