Title: Skillshare.Figma.Advanced.Masterclass.Design.Systems.Prototyping.Responsive.Ui.2026.BOOKWARE-IWL
Date: 2026-10-13
Platform: Skillshare
Runtime: 5h 54m
Size: 1.20 GiB
Subs: English, Spanish, Portuguese, German, French
Url: https://www.skillshare.com/en/classes/figma-advanced-masterclass-design-systems-prototyping-and-responsive-ui/818701269?via=browse
Resources: 1 file
Lessons:
01 - Welcome to the Figma Advanced Masterclass! (1m 43s)
02 - What Makes a Designer “Advanced” in Figma + Course Roadmap (7m 35s)
03 - UX Theory (26m 18s)
04 - Component Architecture (27m 45s)
05 - Variables & Modes (30m 15s)
06 - Team Libraries & File Organization (12m 29s)
07 - Auto Layout Deep Dive (29m 1s)
08 - Constraints & Breakpoints (37m 56s)
09 - Real-World Responsive Section Build (37m 1s)
10 - Microinteractions (22m 43s)
11 - Scroll & Gesture Interactions + Smart Animate Mastery (25m 29s)
12 - FigJam (6m 14s)
13 - Figma Buzz (Marketing Teams) (7m 38s)
14 - Figma Slides (6m 32s)
15 - Figma Sites (Overview) (6m 54s)
16 - Figma Make (Ideation Use Case) (12m 8s)
17 - When These Tools Help vs Distract (5m 51s)
18 - Final Project: Responsive SaaS + Microinteractions (48m 6s)
19 - Class Project: Design a Responsive SaaS Interface (1m 55s)
20 - Congratulations! What’s Next? (1m)
If you already know the basics of Figma, the next step is learning how to design like a
professional.
In this class, you’ll move beyond simple layouts and start working with advanced workflows
used in real-world design projects. The focus is not just on creating good-looking
designs, but on building scalable systems, efficient processes, and interactive
experiences.
We’ll begin by understanding what makes a designer “advanced” in Figma, along with key UX
principles that guide effective design decisions. This sets the foundation for everything
you’ll build throughout the class.
Next, you’ll dive into scalable design systems, learning how to structure components, use
variables and modes, and organize files for team collaboration. These are essential skills
for working on larger projects and maintaining consistency.
From there, we’ll explore advanced layout techniques, including auto layout, constraints,
and responsive design. You’ll learn how to build interfaces that adapt across different
screen sizes in a clean and efficient way.
We’ll also cover advanced prototyping, focusing on microinteractions, gestures, and smooth
animations that bring your designs to life and make them feel like real products.
In addition, you’ll explore modern Figma tools like FigJam, Figma Slides, and more,
understanding when they’re useful and how they fit into a professional workflow.
The class wraps up with a hands-on project, where you’ll design a responsive SaaS
interface and apply microinteractions, combining everything you’ve learned into a
complete, polished design.
By the end of this class, you’ll be able to work faster, design more efficiently, and
create professional-level UI/UX projects in Figma.
What You’ll Learn
What defines an advanced designer in Figma
Key UX principles for better design decisions
Building scalable component systems
Using variables and modes effectively
Organizing files and working with team libraries
Mastering auto layout for flexible designs
Using constraints and breakpoints for responsiveness
Designing responsive UI sections
Creating microinteractions and animations
Using Smart Animate and gesture-based prototyping
Understanding and using FigJam, Figma Slides, and other tools
Knowing when to use different tools in your workflow
Building a complete responsive SaaS interface
Requirements
Figma (free or paid version)
Basic knowledge of Figma (frames, components, basic prototyping)
A computer with internet access
No prior advanced experience required
Who This Class Is For
Intermediate Figma users looking to level up
UI/UX designers who want to work more professionally
Product designers building real-world projects
Freelancers working on scalable design systems
Anyone interested in advanced design workflows
Project Instructions
Design a responsive SaaS interface using advanced Figma techniques.
You will:
Create a scalable component system
Build responsive layouts using auto layout and constraints
Apply variables and organize your design system
Add microinteractions and animations
Create a polished, presentation-ready design
Upload your final screens or prototype to the Project Gallery, along with a short
explanation of your system, layout decisions, and interactions.