Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma Advanced Tutorial: Become a Figma Pro

Class project 04 - Background Animation

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 5:42
SECTION: 2
Auto Layout - Level 1 55:49
SECTION: 3
Advanced Workflow Tricks 35:51
SECTION: 4
Grids 20:20
SECTION: 5
Simple App Brand 19:52
SECTION: 6
Nested & Responsive Auto layouts 48:11
SECTION: 7
Animation - Level 1 1:11:43
SECTION: 8
Prototyping - Level 1 1:26:31
1. Create & remove bulk multiple noodles wires at once in Figma
3:05
2. Quiz question 13
3. How to bulk update nav links in your Figma prototype
3:15
4. How to set the right phone and find old prototype phones in Figma
4:01
5. How to make sticky scroll position search bar in Figma
3:43
6. Quiz question 14
7. How to stack multiple sticky text vertical scrolling in Figma
13:56
8. Quiz question 15
9. Class project 06 - Multiple Sticky Headings
2:25
10. How to make Interactive Components in Figma
3:42
11. How to make a checkmark turn on and off in Figma
2:38
12. Interactive components with sliding button in navigation for Figma
6:55
13. Quiz question 16
14. Class project 07 - Sliding Button Nav Challenge
4:14
15. Class project 07 - Completed
3:51
16. How to use Sections in Figma for organizing your content
4:49
17. How to use sections for prototyping in Figma
6:38
18. Quiz question 17
19. How to add iOS battery wifi notch status bar to Figma
7:11
20. How to add iOS or Android Snack Bar UI to Figma
10:38
21. Class project 08 - Operating System UI
1:47
22. Be careful what you create in Figma
3:43
SECTION: 9
Advanced Layers 29:26
SECTION: 10
Components & Variants - Level 1 1:07:49
SECTION: 11
Typography 57:38
SECTION: 12
Imagery 1:03:59
1. How to create an image style in Figma
3:47
2. Quiz question 27
3. What's the difference with Images inside frames vs fills vs Masked in Figma
4:15
4. How to crop images using shortcuts in Figma
2:13
5. Quiz question 28
6. How to mask images with text in Figma
6:21
7. Class Project 10 - Text Mask
2:49
8. How to mask using transparent pngs with alpha channels in Figma
6:35
9. Quiz question 29
10. Class Project 11 - Alpha Mask
1:23
11. How to create a luma mask in Figma
3:02
12. Quiz question 30
13. Class project 12 - Luma Mask
1:00
14. How to make a spillover mask outside of the frame in Figma
9:49
15. How to use the pen tool to make image masks in Figma
11:04
16. Quiz question 31
17. How to use color layer blending modes in Figma
9:13
18. Class project 13 - Social Ad
2:28
19. Quiz question 32
SECTION: 13
Video 33:47
SECTION: 14
Color 17:38
SECTION: 15
Styles & Libraries 34:20
SECTION: 16
Drawing, Stroke & Fill 36:19
SECTION: 17
Auto Layout - Level 2 34:07
1. How to overlap & stack things in a Figma Autolayout
3:16
2. Quiz question 39
3. What are the shortcuts for hug & fill in Figma
3:36
4. Quiz question 40
5. How to set absolute spacing so things ignore Autolayout in Figma
2:47
6. Quiz question 41
7. How to absolute position something that is responsive in Figma
2:23
8. How stick things to the bottom right of an auto layout in Figma
4:02
9. How to resize a box automatically in a Auto Layout to match text in Figma
4:52
10. What are the autolayout padding and resizing shortcuts
1:51
11. How to create a minimum width height button in Figma
4:23
12. How to wrap auto layout objects in Figma
1:42
13. What does stroke included excluded mean in Figma auto layout
2:00
14. Quiz question 42
15. How to set custom spacing in auto layouts in Figma
3:15
SECTION: 18
Components & Variants - Level 2 18:22
SECTION: 19
Prototyping - Level 2 1:01:57
SECTION: 20
Variables 33:57
SECTION: 21
Design Tokens 29:28
SECTION: 22
Animation - Level 2 16:52
SECTION: 23
Accessibility 11:01
SECTION: 24
Working with Stakeholders 49:39
SECTION: 25
What Next 21:49

Questions

1
2
1
1
1
2
1
2
1
1
2
1
1
1
1
1
1
2
6
1
2
0
3
3
1
1
1
2
2
4
2
3
2
3
2
1
1
1
1
1
1
0
1
0
2
3
1
0
3
2

Student class projects

0 0
Avatar

Marton Meszaros

@martonMeszaros
0 0
Avatar

Kimberly Moore

@kimberlyMoore

I definitely have that 'jump' in my animation Dan was talking about. lol
0 0
Avatar

george predoiu

@georgepredoiu
0 0
Avatar

Gabriela Leśna

@gabrielaLeśna
0 0
Avatar

Oluchi Audrey Oji

@oluchiAudreyOji

Hello sir this is my submission for the design class. I had a lot of fun with this and I was able to play around with the Gradient mesh and ensure that it came out as required. Kindly let me know your feedback.
1 1
Avatar

Jiin Yang

@jiinYang

https://vimeo.com/1067488655?share=copy#t=0
0 0
Avatar

Sebastian Burcă

@SebastianBurca
0 0
Avatar

Chelbe Harris

@chelbeHarris
0 1
Avatar

Sarah Lowe

@sarahLowe
0 1
Avatar

Anda Rusnak

@andaRusnak
1 0
Avatar

Susannah Dy

@susannahDy

This one was challenging. Still not able to figure out the centering bug, see second video.
2 0
Avatar

Kushi Ogeti

@kushiOgeti

Hi Dan, here's the link to my class project! https://vimeo.com/1064003575/405c7ca8dc
1 0
Avatar

Mateja Mitrovic

@matejaMitrovic

I was playing with this animation thing for few hours... I wanted to create something minimalist and this is what I came up with, but I am not 100% satisfied with it (not even close to being satisfied). Please give me some critics, I would like to make this as good as possible :D https://vimeo.com/1062741239/2f7281a25b Also, my project is called Bugi R&B Music.
1 2
Avatar

Jason Marin

@jasonMarin
1 1
Avatar

Anna Abdulova

@annaAbdulova
0 0
Avatar

Rallou Ralli

@Rallou
0 0
Avatar

Jessica Antunez

@jessicaAntunez

Given that this is a classical music app, I believe a more subtle background would be more appropriate
0 0
Avatar

Anais Safari

@AnaisSafari
0 1
Avatar

Muhammad Pietersen

@muhammadPietersen
0 0
Avatar

Dewanshi Chandeliya

@dewanshiChandeliya
1 1
Avatar

Maryna Ryzhova

@marynaRy
1 2
Avatar

Lisa Sysun

@LisaSysun

Class project 4 - background animation screen grab…in case the Vimeo link doesn’t work.
0 0
Avatar

Enric Mestres Bonet

@enricMestres
1 2
Avatar

pasquale mazzei

@pasqualemazzei
0 1
Avatar

Reshma Raj

@reshmaRaj
0 0
Avatar

Vina Rostomyan

@vinaRostomyan

https://vimeo.com/1056631810/297006b615
1 1
Avatar

Alexandra K

@alexandrinnne

That was fun!
1 1
Avatar

Kotryna Siugzdinyte

@KotrynaSiug

Was harder than I imagined to make those blobs flow nicely/smoothly...harmoniously? Can't find the word for it, but basically so that it 'looks good'. I don't think Abril Fatface & Outfit fonts gel very well together, might change this later once my typography overall is more set for this case.
0 1
Avatar

Azam Olimov

@olimov

Class project 04 - Background Animation
0 2
Avatar

Cesar Caceres

@cesarCaceres

I decided to do a yellow because we're so close to the day of friendship, February 14th, and it is in a rising pattern to have an uplifting pattern.

Course info

177 lessons / 16 hours 46 quiz questions 21 projects Certificate of achievement

Overview

Hi there, aspiring Figma enthusiasts! 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?

Try Figma for free by clicking here.

This course is tailor-made for those who have already mastered the fundamental principles of UI/UX Design using Figma. If you've triumphed over my Figma Essentials course or have a sneaking suspicion that there's a treasure trove of unexplored tools, tips, workflows, and updates awaiting your discovery, then look no further! This course is your golden ticket to taking your UI/UX prowess to the next level.

Together, we'll start by delving into the depths of multilevel nested autolayouts, and unravel the secrets used by UX professionals by learning:
- Workflow techniques, managing design assets, styles, components, grid and column layouts like true virtuosos.
- Learn how to use Variables and put them to work creating even more complete prototypes.
- Use variables to make Light & Dark Modes + Compact & Comfortable spacing versions of your components. 
- You’ll then take your new knowledge of variables to understand and create your own Design Tokens. 
  • - Unleashing the magic of advanced animation techniques, captivating users with animated background gradients and Houdini Text.
  • - Harness the power of Lottie animation files, breathing life into your designs.
  • - Crafting responsive elements that effortlessly adapt to any device, proving your design prowess knows no bounds.
  • - Unleashing the full potential of powerful images & video masking techniques, amplifying the visual impact of your creations.
  • - Mastering advanced typography features, transforming words into captivating works of art.
  • - Embracing the realm of AI, infusing your process with its genius to elevate your skills as a UX designer.
  • - Elevate your prototyping game, conducting user tests with finesse using advanced techniques.
  • - Unveiling sticky scroll buttons that stack, animated anchor points and booleans, and a host of other captivating effects.
  • - Creating enchanting dropdown menus, hover grow effects for images, and expanding search bars.
  • - Discovering the right accessibility tools & techniques, ensuring inclusivity and usability for all users.
  • - Becoming a variant boss, expertly taming unwieldy variants to just 1 or 2.
  • - Unveiling the secrets of seamless collaboration with designers, developers, and stakeholders.
  • - Mastering the art of exporting production-ready assets, bringing your designs to life beyond the realm of Figma.
  • - Unearthing professional workflow tricks & shortcuts, saving you precious time and skyrocketing your efficiency.
  • - Plus much more exciting advanced Figma goodness along the way!

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.

It's time to embrace the call to upgrade yourself and transcend from being a good UX Designer to a bona fide Figma UX Superhero! Unlock your potential, save the day, and let your design prowess soar!

Requirements:

- A copy of Figma (a free plan is available on the Figma website).
  • - 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:

  • - Diving deep into multi level nested autolayouts. 
  • - Robust components that are easy to update and hard to break. 
  • - Component properties. 
- Variables
- Design Tokens
- Advanced Prototyping using Variables
  • - Learn Workflow tips and tricks for managing your design assets, styles, components, grid and column layouts.
  • - Advanced animation techniques
  • - Animated Background gradients. 
  • - Houdini Text
  • - Animate along a path in Figma
  • - How to add Lottie animation files in Figma
  • - Build responsive elements ready for any device size.
  • - The best shortcuts & plugins to make you a more efficient UX designer.
  • - Absolute Positioning of Autolayouts. 
  • - Powerful images & video masking techniques. 
  • - Advanced typography features. 
  • - Learn to use AI in your process to make you a better UX designer. 
  • - Advanced prototyping techniques to level up your user tests. 
  • - Make prototypes better and faster using tricks & shortcuts. 
  • - Sticky scroll buttons that stack. 
  • - Video playback controls. 
  • - Animated anchor points and booleans.
  • - Create a Dropdown menu
  • - Create a hover grow effect for images.
  • - Create and expanding Search Bar 
  • - Learn the right accessibility tools & techniques  
  • - Become a variant boss. Cutting down those 100 variants to just 1 or 2. 
  • - Learn the best ways to work with other designers, developers and stakeholders. 
  • - Build a UX project from beginning to end ready for your portfolio.
  • - Export production ready assets.
  • - Learn professional workflow tricks & shortcuts.
  • - Forum support from me and the rest of the BYOL crew.
  • - All the techniques used by UX professionals
  • - 160 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.

Downloads & Exercise files

Transcript

All right, class project time... for this video here we'll cover the class projects... if you're not doing them, skip to the end of this video, I've got like a--  I had a bunch of updates come through for Figma... while I was recording this video... so I kind of show you at the end... how I keep up to date, where to go, just jump to the end...

but if you are doing the class projects, watch along... it'll be there at the end, waiting for you... basically, I want you to make animated background graphic... using the kind of techniques from the last few videos. So let's have a look at the must-haves... so gradient background, use your own brand colors...

experiment with the blur and the different gradients... but it's up to you whether you use them, just have a play with them... you might end up with something more of... kind of vector-ey flat colors, that's totally up to you... I want to make sure though that you're using the--  when you do your animation, it's in that component set... rather than just frames that are connected...

by that I mean, remember, we kind of had... this separate gradient mesh on its own page... we had this gradient component, and it had variants inside of this... and we animated between these... rather than doing them kind of on this page here... we dumped our component inside of here...

that's what I'd like to see, nice tidy page. Add our welcome text and two buttons... the buttons need to be auto layout, so they can be all squidgy... and adjust for the text that's inside of them... and what are you meant to deliver? I want to see a video of it...

I know, hopefully we can all do videos... remember, Mac does it, PC has a bit of software to record your screen... if you've tried and you really just can't make that work... a couple of screenshots of the different animations, kind of showing it... and maybe showing the... you know, this kind of all connected, using this view...

be able to prove that you did it, would like to see it... I want to see everybody's animation. So upload it to the Assignment/Project page on this website... and then, different from the other ones. I'd like you to share what you've made on social media... the stuff I've been doing now is mainly just to get us everybody kind of...

up to speed and keeping us along with the course... practice some of the techniques... but this one here is quite a visual, so I'd love to see it on social media... here's my various social media platforms... so choose your poison, and I'd love for you to share it with me... tag me in it, and use the hashtag, #FigmaAdvanced...

because it's a way that I can search... and just see what people are doing for this particular course... when I'm looking for, yeah, when I'm just looking for stuff... that is for different courses, I'm starting to use these hashtags... so use that as well, and I'd love you to share how it's going... problems you ran into, things you overcome, things you still can't do...

because remember, people are going to be commenting on your work... so make sure you add a little explanation, things you're trying to achieve... maybe problems you have... because there's going to be people around to help you out... so remember, every post you put up, comment on two other people's work... and this one is going to be, let's have a look.

There's going to be things like, the animation... yeah, there might be some things, you want to comment on that... but in terms of, it might be the type, the kinds of buttons, the spacing... see if you can use your new found sandwich, your critique sandwich... Breaking news, hey, I wanted to add this to the end just because... I was working on the next video and I'm like, just making it started...

open up in Figma, it's like, "You have 42 new updates," I was like, "Huh"... it is good, like, we love the product getting updated... which makes Figma awesome... but it also, as a course creator makes it tricky because... they're always updating it... some of the more legacy products, in the design industry...

don't get big updates, so anyway, that's my problem, what's interesting for you... is that, after this course... you want to keep up to date with what's new in Figma... you just want to be awesome at Figma... there's kind of two places that I go to... when I'm looking for new updates for Figma...

this one here, figma.com/release-notes, and this one here, What's New. What's New is the kind of splashy page, of like, look... it's got good demos, but it doesn't cover everything... just the hard-hitting big stuff... then in the Release Notes it's a little bit more basic, in a nice little list... and often goes through things like "Oh, I did not know that"...

I don't know, find something, I'm like, "Oh, that's a nugget"... they don't think it's important but I do... and I put it into something like that Advanced course or Essentials course. So these are the two places that I go to for updates... and then often what you can do is, like I'll keep updating the course... but also, if there's something brand, brand new...

and find the term, copy and paste it, and try and find some more information... often, Figma will have the information themselves. So What's New and Release Notes, these URLs may change... but the terms are generally the same... there'll be a Release Note somewhere, and What's New somewhere, there you go... that's how I stay up to date, and how you can too.

All right, enjoy the class project, make a cool background... and I'll see you in the next video.
Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025