Figma Advanced Tutorial: Become a Figma Pro

Intro to the Figma Advanced Course

Course contents
SECTION: 1
Getting Started 9:55
SECTION: 2
First Draft AI 6:07
SECTION: 3
Effects 39:26
SECTION: 4
Advanced Workflow Tricks 29:42
SECTION: 5
Auto Layout 1:25:11
SECTION: 6
Variants 16:25
SECTION: 7
Variables - Level 1 36:37
SECTION: 8
Grids 13:38
SECTION: 9
Animation 46:43
SECTION: 10
Prototyping 55:12
SECTION: 11
Layer Zen 10:44
SECTION: 12
Components & Variants 16:24
SECTION: 13
Typography 7:34
SECTION: 14
Images 20:27
SECTION: 15
Videos 9:55
SECTION: 16
Color 10:10
SECTION: 17
Styles & Libraries 17:14
SECTION: 18
Drawing, Stroke & Fill 9:23
SECTION: 19
Auto Layout & Components 17:12
SECTION: 20
Variables - Level 2 25:46
SECTION: 21
Accessibility 13:58
SECTION: 22
Working with Others 23:29
SECTION: 23
What’s Next 19:58

Questions

3
You are not following this thread
1
You are not following this thread

Course info

110 lessons / 9 hours 36 quiz questions 23 projects Certificate of achievement

Overview

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.

Try Figma for free by clicking here.

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.

You’ll also learn to prototype faster, test smarter, and make things that feel real. We’ll cover accessibility, collaboration, and developer handoff using Dev Mode, refactoring, and shared team libraries so you can work seamlessly across projects and teams.

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.

Throughout the course, I'll assign assignments and projects that nurture your skills and empower you to create your very own unique UX design masterpiece for your portfolio. Don’t worry if this all seems overwhelmingly advanced right now, because the BYOL crew stands ready to support and guide you, ensuring your questions get answered.

Bottom line, you’re not just learning Figma. You’re building a complete, professional-grade design system that looks elite and works flawlessly. Let’s go.

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.

Who this course is for:
- UX/UI adventurers who already have a basic understanding of Figma.
- Self-taught Figma enthusiasts yearning for structured guidance.
- Graduates of my Figma Essentials Course, hungry for more knowledge and skills.
- Visionaries who have developed their own unique Figma approach but crave exploration of the vast universe of tools, updates, and time-saving techniques.

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
- How to Create & Update Layout Guide Styles for Columns & Rows
- How to Overlap & Stack Using Auto Layout
- Ignore Auto Layout to Absolute Spacing
- Minimum & Maximum Width/Heights
- How to Wrap Auto Layout Objects

Components, Variables & Variants
- Using Variants
- Multi-Dimensional Variants
- Variable – Light and Dark Modes
- Cart Totals Using Number Variables
- Conditions in Variables
- Boolean Variables
- Overlay Popups
- Spacing with Number Variables
- Boolean Component Properties
- Form Fields with Component Properties
- Instance Swap Inside a Component
- Organizing Components

Design Techniques & Visual Effects
- Liquid Glass Effect
- Texture, Noise & Effect
- Progressive Blur Effect
- Saving Effect Styles & Clearing Unused Styles
- Houdini Text
- Spring Animation & Overlays
- Masking Images Using AI Remove Background
- Spillover Masks
- Mask Images with Text
- Colour Layer Blending Modes
- Curving Text
- Vertical Trim
- Truncation

Animation & Interactions
- Custom Easing
- Animation Inside Variants
- Sticky Scroll Position Search Bars
- Horizontal Scrolling/Swipe
- Automatic Scroll Down to Anchor Point
- Interactive Components

Video & Media
- Working with Video
- Play/Pause Video Controls
- Video to Play on Hover

Typography & Color Systems
- Advanced Color Tricks
- Change/Replace Colors
- Color Themes for Light and Dark
- What is Good Spacing for Web & App Design

Accessibility
- Making Your Designs Accessible

Drawing & Vector Tools
- Advanced Drawing Tips and Tricks
- Variable Width Tool & Simplify Stroke

Workflow, Collaboration & Handoff
- Workflow Tips & Tricks
- Advanced Copy, Paste, and Selection Tricks
- Frame Tips and Tricks
- Sections
- Layer Zen in Figma
- Advanced Search
- Bulk Rename Layers
- How to Use Dev Mode
- Document a Component in a Design System
- Version History
- Slice Tool
- Team Libraries
- Refactoring Components
- Forum support from me and the rest of the BYOL crew.
- All the techniques used by UX professionals
- 107 videos of detailed Figma Advanced Content.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

How to earn your certificate

Work your way towards your certificate for this course by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz (Merit level courses only)
  • Complete the Distinction Certificate Project (Distinction level courses only) - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Request your certificate when you've completed the requirements for the certificate level you're working towards

Good luck!

Pass certificates

We're awarding 'Pass' level certificates for this course.

You can work your way towards your 'Pass' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Don't forget to request your certificate when all your projects are complete

Good luck!

Merit certificates

We're awarding 'Merit' level certificates for this course.

You can work your way towards your 'Merit' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Don't forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Distinction certificates

We're awarding 'Distinction' level certificates for this course.

You can work your way towards your 'Distinction' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Complete the Distinction Certificate Project - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Don't forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Downloads & Exercise files

Transcript

Hello, uh, I'm Dan Scott

and this my friend is the Foot Bird VA Course.

Now this course is aimed at people

who have either done my Figma Essentials course,

or you self-taught you're pretty good,

but you know that there are so many more like tools and tips

and tricks and workflows

and updates that you just haven't had time to explore yet.

If that sounds like you, this course is for you.

Who's this guy? I am Dan Scott.

I am a UX designer and Figma instructor.

Uh, I've won multiple teaching awards

and I've helped more than a million people now just like you

to become better designers.

So we're not just gonna move boxes around here,

we're gonna actually build something.

You'll get your own unique project and persona,

and by the end, you'll have a complete app ready

to drop straight into your portfolio.

First, we'll use AI inside of Figma to move fast.

I'm talking real efficiency, the kind

that saves you hours, not minutes.

We'll go deep on auto layouts

and constraints, stuff that separates amateurs from pros,

your master components

and variables so tight, they're impossible to break

and effortless To update, we'll add visual punch effects,

typography and micro interactions

that make your design stand out.

I'll show you workflow hacks for managing your assets, grids

and styles like an absolute boss.

And I'll show you some of the hardware that make you faster

and make you look like you know

what you're doing when people walk past your desk.

Ooh, look at that. You'll use variables to build light

and dark modes, compact and comfortable layouts.

We'll go into advanced animation, masking

and video work kind

of stuff most UX designers don't even realize Figma can do.

You'll learn to run better user tests, prototype faster,

and build things that feel real.

You'll understand accessibility, collaboration,

develop a handoff using dev mode refactoring

and team libraries like pro.

So are you ready to become a Figma Pro?

If you are, sign up

and get ready to go from Figma to a Figma superhero.

Don't worry. I project superhero all through the course.

I've noticed that, um,

while I'm recording, I made the shirt, right?

I'm like, keeps getting scrumpled up.

So I do this the whole, the way through the course, okay.

To try and scruple it

and project superhero so natural.

Get on with the course.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • Cookie policy
  • © Bring your Own Laptop Ltd 2026