Bring Your Own Laptop

Watch the Full Course on BYOL and save 10%: https://byol.com/figa26ala
Download the Free Exercise Files to follow along: https://byol.com/figa26alex
Try Figma for Free: https://BYOL.com/FIGF

Join the Bring Your Own Laptop Facebook Group: https://www.facebook.com/groups/bringyourownlaptop
Follow me on Instagram: https://www.instagram.com/bringyourownlaptop/
Follow me on TikTok: https://www.byol.com/tiktok/
Follow me on Twitter: https://twitter.com/danlovesadobe
Join the LinkedIn Group: https://www.linkedin.com/groups/10539178/

0:00 Introduction to this Figma Advanced Course
2:29 Getting started 
5:59 Your Brief for this Figma Project
7:27 Using First Draft AI in Figma
13:35 Liquid Glass Effect in Figma
17:27 Working with complex layouts in Figma
28:02 Texture, Noise & Order in Figma
34:27 Progressive Blur Effect in Figma
44:48 Class Project 1: Genre Listings
48:55 Saving Effect Styles & Clearing Unused Styles in Figma
54:10 Workflow Tips & Tricks
1:15:39 Advanced Copy & Paste, Selection tips in Figma
1:19:08 Frame Tips & Tricks in Figma
1:23:51 Auto Layouts in Figma
1:37:13 Suggest Auto Layout, Replace Content & Duplicate Layers in Figma
1:47:13 Class Project 2: Band Listings
1:52:04 Nested Responsive Auto Layouts in Figma
2:00:54 Auto Layout Grids in Figma
2:09:25 Class Project 3: Grids
2:11:09 Important information about Components in Figma
2:21:35 What spacing to use in Figma
2:28:05 More Spacing tips in Figma
2:33:21 Class Project 4: Responsive lower Navigation in Figma
2:35:47 Class Project 5: Event Card Contraints
2:37:24 Class Project 5: Completed
2:49:01 How to make a simple Variant in Figma
2:54:34 How to make a multi-dimensional Variant in Figma

Hi there, aspiring Figma enthusiast! Are you ready to embark on an exhilarating journey with me, Dan Scott, as we unlock the full potential of our Figma skills in the dazzling realm of UX/UI Design using Figma Advanced?

Course length: 9+ hours.

We’re not just moving boxes around here - you’re actually going to build something. In this course, you’ll get your own project brief and persona, and by the end, you’ll have a complete app ready to drop straight into your portfolio.

We’ll kick things off by using AI inside Figma to move fast — the kind of efficiency that saves you hours, not minutes. Then we’ll dive deep into Auto Layout and constraints, the tools that separate amateurs from pros. You’ll learn how to make responsive pages that flex, adapt, and update automatically, no matter the screen or content.

Next, you’ll master components and variables so solid they’re almost impossible to break. We’ll add visual punch with effects, typography, and micro-animations that give your designs instant polish and impact. You’ll also learn workflow hacks to manage your assets, grids, and styles like a seasoned professional, and I’ll even show you a few hardware setups that make you faster (and make you look good while you’re at it).

Once you’ve got the basics locked in, we’ll take things further. You’ll become a variant boss, building light and dark modes, compact and comfortable layouts, all with a single click. We’ll explore advanced animation, masking, and video techniques, the kind of creative power most designers don’t even realize Figma can deliver.

As you journey through this course, you'll acquire the skills wielded by UX professionals, gaining a profound understanding of the UX Design industry. From concept to a highly polished finish, you'll confidently manage your own UX projects ideal for your portfolio.

Requirements:
- A copy of Figma (a free plan is available on the Figma website here).
- Note: While you can complete the course using the free version of Figma, some lessons include features available only in the paid version. You can sign up for a free trial to follow along, or simply watch those sections for reference.
- Basic knowledge of Figma is required. I recommend watching my Figma Essentials course prior to embarking on this epic adventure.

What you'll learn:

AI & Interaction Design
- First Draft & Add Interactions Using AI
- Suggest Auto Layout, Replace Content, Duplicate & Rename Layers (AI)
- AI Add Interactions Automatically

Layout & Auto Layout Mastery
- Working with Complex Layouts
- Nested & Responsive Auto Layouts
- Auto Layout Grids
- Grid vs Constraints vs Auto Layout — Which One to Use and When?
- How to Add Rows and Column Grids to One Layout

- Minimum & Maximum Width/Heights
- How to Wrap Auto Layout Objects

Components, Variables & Variants
- Using Variants
- Multi-Dimensional Variants

Design Techniques & Visual Effects
- Liquid Glass Effect
- Texture, Noise & Effect
- Progressive Blur Effect
- Saving Effect Styles & Clearing Unused Styles

- Mask Images with Text
- Colour Layer Blending Modes
- Curving Text
- Vertical Trim
- Truncation

Animation & Interactions
- Custom Easing
- Animation Inside Variants

#Figma #UXDesign #FigmaTutorial

Free Figma Advanced Course: Become a Figma Pro!

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path