Figma Advanced Tutorial: A 2-hour Masterclass

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!

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!

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.
- 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!

0:00 - Introduction
2:55 - Getting Started
5:27 - Auto Layout Revision
15:46 - Auto Spacing
25:54 - When to use Components
31:54 - Good Spacing Techniques
38:53 - What Spacing to use
44:09 - Middletro
45:27 - Auto Layout vs Constraints
49:19 - Autolayout Shortcuts
52:25 - Class Project 01 - Responsive Nav
55:17 - File Handling Mastery
1:01:56 - Advanced Copy & Paste
1:08:31 - Crazy Fields
1:12:05 - Frame Tricks
1:16:45 - Zooming Tricks
1:18:26 - Light vs Dark Theme
1:20:55 - Class Project 02 - Event Card
1:22:31 - Class Project 02 - Completed
1:31:11 - Grid v Constraints v Autolayout
1:36:28 - Grids & Columns
1:41:57 - Rows & Columns
1:46:16 - Grid Styles
1:47:49 - Grids Inside of Frames
1:51:33 - Class project 03 - Branding
1:55:53 - Icon Plugins
2:02:40 - Widgets vs Plugins
2:06:14 - Color Variants
2:11:27 - Outro

Bring Your Own Laptop accepts the sole responsibility of the giveaway. Youtube is not a sponsor and upon entering the giveaway, you acknowledge that Youtube is free from any liability with regards to said giveaway.
The contest is free of charge to enter.
Limited to 1 prize per person.
Entries that don’t qualify will be disqualified.
All prizes will be attempted to be awarded within 7 days of the premiere ending. For prizes to be awarded, you must be able to confirm that you are the winner by messaging the instagram account ‘bringyourownlaptop’ with your username, then following the instructions provided which include editing your winning comment to prove account ownership.
All contest rules are the responsibility of Bring Your Own Laptop only.
Your personal data will not be saved on any Bring Your Own Laptop servers unless you are the winner of the BYOL subscription, in which case your information will be necessary to utilise the subscription.

#Figma #UXDesign #FigmaTutorial

[beingrongpoka-thecolourbug]

Everyone watching this... I’m proud of you for wanting to improve yourself, I wish you the best of luck in your future endeavors.

[ashwinbhutiya]

Sir your are a legend because no one is giving free advance course 🙏

[AByallo]

just doing the first course now. moving along pretty quick, so will be on this one next! loved your AE course. had me animating for work immediately. best adobe instructor out there.

[werqaferaw]

I am one of the millions you've helped. thanks dan!

[flomobk]

I finally understand that in order to get developers to code my designs pixel-perfect, a designer has to set it up correctly so they can easily see the spacing (margins/padding) to be used and so on. Thanks for a super thorough explanation!

[Lr]

Thank you Dan for all your videos!!! Such great material for a beginner like myself and understanding the functions of Figma. I have learned some great tips and shortcuts along the way so far. Looking forward to completing more with you!

[samoeikelvin]

I learnt adobe illustrator, photoshop and now I'm becoming a pro at Figma thanks to you. God bless you❤️.

[souvikpradhan]

Hello Dan! I cannot express my gratitude enough for your course. Your ability to simplify fundamental rules and use cases in UX/UI has been immensely helpful. I want to extend my heartfelt thanks to you. You have made it incredibly easy for us, and I hope to apply your teachings to contribute to creating better designs for the world.

[radoslavmilev]

Hello, Dan! My revalation as a beginner was Alt + L, for those who don’t know it collapses all opened layers - like if you’ve got a frame with 10 things in it, it will collapse it to parent frame and thats been super useful to me, hope it helps someone else as well!

[chukwumelagift]

Wow.. I've been reading comments about everyone buying Dan's courses from udemy. I don't have the money to buy any of the courses but your channel on Youtube is just amazing. Thank you Dan.

[__jake.m]

The biggest revelation for me has been the world of plugins! They have been a lifesaver. It got me so excited to explore them and see how many plugins I could potentially use to make my workflow more pleasurable and efficient.
Thanks for the free advance course, by the way! I'll definitely be checking out your paid course in the future!

[jackgrey]

That was structured differently than other Figma tutorials I've watched, which is great, and I learned some new tricks! I appreciate that it was focused more on documentation and structure than making one flashy design. Thank you!

[MicaPatitucci]

Hi, Dan! I´m a newbie and your course of Figma Essentials is helping me a lot. I hope to finish it soon in Udemy to start the advanced!

[Da_Covenant]

Dan Scott, I love you. I love your style of teaching; the best online Tutor I've ever seen. Already finished the beginner's essential's, and now on the advanced course. I'll join for the full course very soon. Thanks man.

[chris-danieluchendu]

You nailed it.
I mean you always deliver. I watch your videos most especially because of your composure and delivery.

[Storiesbyhomes]

the power of auto layout, crazy i had designed some project previously without properly utilizing auto layouts but this knowledge has been a game changer

[NyuvelUX]

Thank you so much. This video has helped me so much, and clarified some of the difficulties I had with auto-layout and responsiveness. I'm truly happy I went through this, practicing as I went along.

[johndate]

So first part of the video and I finally understand the component-instance relationship! Thank you SO much.

[aminexpert]

Hi Dan, This video is valuable for designers who are having difficulties working with Figma and shifting from Adobe XD. Thumbs-up

[tero]

I've bought a lot of your Udemy courses, Dan. And also recommend them to my friends. Just because you are the best design instructor I have ever had. Your courses are so funny and well organized. Thank you so much for your hard work!