Figma Advanced Tutorial: A 2-hour Masterclass

Рет қаралды 355,143

Күн бұрын

Get 10% off a BYOL membership & unlimited access to all of our Figma Courses & so much more: BYOL.com/FIG10YTL
Watch the full 160+ video Figma Advanced Course: BYOL.com/figytflcd
Download the Free Exercise Files to follow along: BYOL.com/figytlex
Try Figma for Free: BYOL.com/FIGF
Free downloadable Cheat Sheet: BYOL.com/fig10ytlcs
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!
Join the Bring Your Own Laptop Facebook Group: / bringyourownlaptop
Follow me on Instagram: / bringyourownlaptop
Follow me on TikTok: www.byol.com/tiktok/
Follow me on Twitter: / danlovesadobe
Join the LinkedIn Group: / 10539178
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. KZfaq is not a sponsor and upon entering the giveaway, you acknowledge that KZfaq is free from any liability with regards to said giveaway.
The contest is free of charge to enter.
Limited to 1 prize per person.
More information about the KZfaq community guidelines: kzfaq.info...
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

Пікірлер: 397

@BringYourOwnLaptop 10 ай бұрын

I hope you enjoyed the video! If you'd like to get unlimited access to all 30+ of my courses & so much more, you can join me at BYOL and get 10% off here: BYOL.com/FIG10YTLCOM

@akaedia_ 10 ай бұрын

Thanks for sharing a sneak peak into your Figma Advanced course. Can't wait to begin my class project!!

@Sharifmollah 10 ай бұрын

i love this t-shirt can you send me this design for me with your signature ?

@da-sk7ye 10 ай бұрын

Hey Dan, love your courses. Is this a short version of a course on your paid website? Was looking at your colour variants section but missing the part where it explains the naming. Thanks Dan

@sandragredo4673 10 ай бұрын

Thank you very much?

@godwinonwumere3589 10 ай бұрын

Hi Mr Dan, I'm a member of the BYOL community and unfortunately I've had issues with playing the videos on the website.

@Mr777eduard 3 күн бұрын

Keeping the developer in mind when design is such a good tip..it will help them a lot and make the collaboration a success

@ashwinbhutiya4195 10 ай бұрын

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

@beingrongpoka-thecolourbug9978 28 күн бұрын

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

@AByallo 10 ай бұрын

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!

@chukwumelagift 9 ай бұрын

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 KZfaq is just amazing. Thank you Dan.

@flomobk 9 ай бұрын

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!

@L0r110 9 ай бұрын

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!

@samoeikelvin3649 10 ай бұрын

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

@jackgrey6408 8 ай бұрын

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!

@user-11DiACasti88 7 күн бұрын

Right that is the method from Sir Dan!! just amazing

@chris-danieluchendu 8 ай бұрын

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

@user-11DiACasti88 6 күн бұрын

the most i watch Dann the most i like him, i really enjoy his course and i can't wait to buy his Courses and get every day better

@MicaPatitucci 10 ай бұрын

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!

@souvikpradhan1053 8 ай бұрын

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.

@user-11DiACasti88 6 күн бұрын

Exactly what i want to express to him as well 🤗👏👏👏

@johndate1776 6 ай бұрын

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

@NyuvelUX 8 ай бұрын

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.

@Da_Covenant 8 ай бұрын

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.

@Storiesbyhomes 8 ай бұрын

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

@tero247 10 ай бұрын

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!

@BringYourOwnLaptop 10 ай бұрын

Thanks for the long time support. 🤟

@atlandfashion997 9 ай бұрын

would you like to share your esssential course?

@mydesignerlife 9 ай бұрын

Me too! Love his sense of humour. I remember things better.

@mwycombe 7 күн бұрын

The key revelation for me was how to structure nested components by putting instances of components inside container components so you can control the contained instances from the master components. Very insightful.

@RocknRollCEO 7 ай бұрын

Can't thank you enough. Superb stuff as always, Dan. Cheers.

@aminexpert 10 ай бұрын

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

@sassisammi 2 ай бұрын

"big waffly mess" - new favourite expression! I'm stealing it! 🤣

@hectorperea9386 10 ай бұрын

This is one of the best, if not the best course I watched on Figma. Well organized and super structured. I will definitely go to BYOL and be a subscriber to watch the entire course. Thanks Dan!

@BringYourOwnLaptop 10 ай бұрын

Thanks man. Much appreciated. Everyone should go to BYOL 💪

@ehibble 10 ай бұрын

I usually don't write reviews, but Dan is the man. I watched through this video, then signed up for his course. I'm currently 110 videos deep out of 200. I couldn't be happier with how in depth and comprehensive the course is. He's taught me so much that I'm contemplating making a 'credits' page in my app to show my appreciation. Best $10 I've ever spent! Cheers Dan & BYOL team : )

@BringYourOwnLaptop 10 ай бұрын

Wow. You're flying through the videos. I appreciate the great feedback and the stellar testimonial. Much appreciated.

@atlandfashion997 9 ай бұрын

would you like to share your esssential course?

@zsofiruzsvanszky3361 10 ай бұрын

Amazing teaching style! I am so grateful that I managed to find you!

@psychogothkitty 3 ай бұрын

OMG, this is exactly what I have been looking for... You are amazing! Other people are charging heaps and they aren't even covering everything that you have taught in this video. Thank you so much!

@slipstream01 10 ай бұрын

Mate, absolutely loved the 2 hours + useful content, learnt a lot of new things about constraints and auto layout , plugins, widgets, rows. Thank you indeed.

@BringYourOwnLaptop 10 ай бұрын

Cool that you made it to the end. Glad it helped 💪

@mfarjr1848 14 күн бұрын

This is the best Figma tutorial for me so far. And this is the first video that I didn't save to watch later playlist since I watch it to the end. Haha

@carlakalache3381 3 ай бұрын

Thank you so so much! Not only you're an amazing teacher but you're also really kind to share your knowledge! This is the best online class I've ever seen.

@j_ryan_n 7 ай бұрын

Thank you for the incredible resource. I did not know about the scale shortcut (k) and have been scaling things all wrong. Lots of other great tips, but that one was a real obvious tip that I've totally missed and appreciate

@Realihasan 3 ай бұрын

I have just started watching your videos and am already hooked on to it,,,you make it look so easy...kudos to you my friend...

@memoverse2018 7 ай бұрын

Super helpful, fresh & funny way of explaining! Booked your course.

@timmekaedwards 2 күн бұрын

The Navigation bar was awesome

@1deplatt 10 ай бұрын

I liked this. You have a good approach to teaching. I just might sign up for the rest of this course :)

@isaacsanchez2003 10 ай бұрын

This is the best tutorial/masterclass i have ever seen for anything, it is so well put together, this should have 1M+ views atleast!

@BringYourOwnLaptop 10 ай бұрын

Thanks Isaac. I'm looking forward to the day it breaks 1m. We'll have a party here at BYOL. 🎉🍰

@lindsayhp 5 ай бұрын

I love how easy and amazing components are!

@michaelharris8040 8 ай бұрын

Vectorize is my favorite Figma plugin. The prototype feature is by far my favorite, as a designer to see your design finished and its functions working is a great feeling.... similar feeling to taking your socks off after a long day.

@Sabrina_728 10 ай бұрын

Hi Dan! I’m a 26-year-old full-time mum and I’ve recently discovered UI/UX Design. It’s fascinating! I’m a beginner and I’ve already watched your Essentials Course and was considering subscribing :)

@BringYourOwnLaptop 10 ай бұрын

I'm excited for you. Getting started and learning it all is the best part! I want to do it all again. It's a fun industry.

@ThisDesignLife 10 ай бұрын

That's excellent Sabrina

@user-lf9zq4bj5u 10 ай бұрын

@@BringYourOwnLaptop2:00

@anitius101 8 ай бұрын

This masterclass is awesome, I might subscribe to course the after finishing this. In the meantime: I learned that 1. Elements in a nested component can't be deleted, they will just hide. 2. I also learned that even if the 8-point grid is a good practice, we should check Material design guidelines, Bootstrap and Tailwind frameworks to know the recommended spacing for gaps/gutters, and that complying with the framework specs used by the devs will make them happy :). 3. I learned that to save the constraints for a component, the component needs to be inside a frame, this way, the constraints will apply in all instances it's going to be used, nice!

@cielryulater5381 8 ай бұрын

Command Shift R -- Replace element with the copied one Hold Shift + Up/Down -- Change field value faster

@pancamel8635 10 ай бұрын

I bought your courses last month. I'll never regret this decision. It is sooo much fun. I'm half way through my figma essentials course. Can't wait to finish it, and start the advanced one!

@BringYourOwnLaptop 10 ай бұрын

Thanks so much! I'm glad you're enjoying BYOL and the community !

@PatriciaCarvalho0 10 ай бұрын

Does he have an advanced one? Where can I find it?? Need it ASAP 😊

@pancamel8635 10 ай бұрын

@@PatriciaCarvalho0 he just have released it, on his course page

@atlandfashion997 9 ай бұрын

would you like to share your esssential course?

@mfarjr1848 14 күн бұрын

All the tips & tricks along the tutorial are spot on beneficial to my knowledge in using Figma.

@miraclelekwauwa6433 8 ай бұрын

Thank you for this insightful lecture, w have more understanding of how auto-layout works, would also love to be part of the weekly exercises

@constellation007 7 ай бұрын

ur actually the best teacher in the world u mention the tiny details that might not seem like a big deal but those tiny details are what really sets someone from being proficient to an expert and i appreaciate that because im one of those people that care about those tiny details :)

@Supergoop_ 6 ай бұрын

well said... Your courses are so funny and well organized. Thank you so much for your hard work!

@svettparre 3 ай бұрын

I did the whole course. I did learn a lot. Thanks! I will buy the full course now!

@JDMedia 10 ай бұрын

Thank you for your wonderful lectures.. its really easy to understand the way you are presenting especially mixed with funny 😄

@aaftabkhan1051 8 ай бұрын

Learned alot from it Dan! Thank you for putting it out there

@HollowsDarkness 10 ай бұрын

19:45 you can also double click the auto layout grid box as well and it will switch it to auto spacing too, Just another quick way. Also something that was my "I wish I knew this before" was the design doc for android (m3) and iphones, thats really helpful. Ive been looking for a more specific sizing for everything for a while now so that was really helpful!

@newtodesign 7 ай бұрын

Great tip - I don't have all the options Dan shows for auto spacing!!

@AniFaq 10 ай бұрын

Thank you, 'Bring Me Your Laptop,' for the fantastic masterclass! Your tutorial was incredibly helpful and had so much fun❤

@benbrown9701 8 ай бұрын

Quick getting up new tut with current features😃 Thanks!

@roymohubu1294 6 ай бұрын

I am a new designer/ entreprenuer, i recently found your videos, and i must say, they are very good 👌🏽 💯 💯 💯

@majeyork 10 ай бұрын

I sure do love autolayout but have a bit more to learn about it. My favourite feature that I am really comfortable with is the ability to create multiple variants of the components. Really speeds up workflow! Thanks for the new video team. #BYOL1

@arthur1022 10 ай бұрын

Adding this to my Watch List! I can tell this is gonna be really insightful! I’ll come back to my comment and let you know how it goes! Thanks for creating this in-depth video!! 🤝

@al75an 9 ай бұрын

OMG, this is the best tutorial for Figma! THE BEST!! Thank you so much sir for your time, and please keep doing this your videos are amazing

@cincosetecinco 10 ай бұрын

For users having problems with the Autolayout's automatic icon spacing, go ahead and deselect 'Absolute Position' for each individual icon that has that feature selected.

@nefariox 8 ай бұрын

YO! Thank you so muchh!! Almost wrecked my head thinking why I'm not getting it right! LOL!

@PokeForeman 8 ай бұрын

This was a fantastic video vault 💯 🤜🏾🤛🏾

@joeymuimuiuk 9 ай бұрын

This video was very helpful. Lots of useful tricks. I wish I discovered Dan earlier. Watching 30+ courses is a lot. If it was broken down to groups of topics I would be interested. Seeing how you teach it in a tutorial format really helps. Eg small group of videos on the topic of animation. Another one to create responsive website etc...

@VinodNanaiah 6 ай бұрын

Awesome and detailed, thank you!

@Mariamadk 10 ай бұрын

Thankkkk youu for making things much much easier, i am a beginner in the UX/UI field, i watched the essentials video and with practice i became better, so i am super excited for this one.. will always be my favorite mentor ❤❤

@BringYourOwnLaptop 10 ай бұрын

Thanks for the support Mariam!

@atlandfashion997 9 ай бұрын

would you like to share your esssential course?

@funmadecabin7585 5 ай бұрын

Knowing you is a blessing 😊 Thank you so much

@rupamgumber4747 5 ай бұрын

Learnt a lot till this point Dan!! Love the way you teach

@bojakcates2817 10 ай бұрын

auto spacing was really cool. I didnt know that was a thing until now!

@saadbaig7919 5 ай бұрын

Space between’ is now set by choosing ‘Auto’ via the gap dropdown, or double click the alignment box.

@ibrahimkolawole6036 10 ай бұрын

Amazing, as always!

@design_with_dana 9 ай бұрын

Fantastic course! Thank you so much!

@buildingsomething1 10 ай бұрын

Helpful tip, changes to constraints on a main component don't seem to copy to instances (it's why he had to keep making the change manually when he was talking about the first task)

@darksigben 4 ай бұрын

Thank you so much Dan for this. I plan to avail the full course on byol's website. Then hopefully get a job as a web designer this year 😊❤ Greetings from the Philippines

@thesophietran 10 ай бұрын

Exactly what I need. Thanks so much Dan! You rock Design Education 🔥🤗

@BringYourOwnLaptop 10 ай бұрын

Thanks Sophie! I'm glad you like the video!

@mightyladrecaps 10 ай бұрын

Resources to understand design standards on android, IOS, tailwind, and bootstrap were very helpful. quite frankly, I didn't know where to gather the knowledge from. Thanks.

@BringYourOwnLaptop 10 ай бұрын

You're welcome. There are loads more but that's what has helped me with most of my work.

@stephanieredgment 10 ай бұрын

I haven't discovered which tool I find the most challenging because I'm just getting started! Yay for Figma and Dan. #BYOL2

@kvnwlm 10 ай бұрын

I honestly love all of the plugins! Coming from the Adobe suite, I was hesitant at first to give up what I knew, and realizing figma can do everything I need and more. #BYOL1

@user-gw3yh6um3q 10 ай бұрын

great videos, thanks broo, this really help !

@k.kaiserahmed8013 10 ай бұрын

Wrapping and preview feature is the best ones from recent update of config 2023

@chrismail 9 ай бұрын

You made me understand weird stuff I had forgotten that I never understood :D Great job

@laurabodner6043 6 ай бұрын

Hello, thank you for the class! It was funny and engaging and super helpful.

@FaisalAhmadNoori 10 ай бұрын

Thank you in advance Daniel for this free tutorial!❤

@BringYourOwnLaptop 10 ай бұрын

You're welcome mate!

@Alto_K 8 ай бұрын

Thnak you! those small tricks I didn't know existed. 💯 One of the unique thig I leart was how we can not make components within components. I was suprise to see how figma threw out the componest within the organism. Maybe that's why I like the atomic theory of making desing systems.

@ahmedshrgob6017 7 ай бұрын

I enjoyed and learned a lot of new things ... thank you

@upendragothwal1495 9 ай бұрын

Learned a lot !! Thank you !!

@chunkodotuk 10 ай бұрын

Formulas in integer fields!! Blew my mind!!

@sivakumars7221 9 ай бұрын

The content is really good. Big Thumps up!!!!

@newtodesign 7 ай бұрын

AHA moment so far - spacing and conneting it to CSS and other frameworks. I had some prior exposure - but this clarified a lot for me! thanks

@domagojmilas519 10 ай бұрын

Finally, constraints well explained... Thanks in the name of the whole community.

@BringYourOwnLaptop 10 ай бұрын

Constraints took me a while to wrap my head around too. Glad I was able to decode it.

@sassisammi 2 ай бұрын

I had no idea you had to be zoomed in to a certain level to see elements like 'tidy up' etc!!! bahahah crazy. Also I took sooooo long to realise my mac mouse could in fact zoom in super quick! Sometimes I just feel so dumb and other times I feel like a figma champ! I guess we all go through it... Dan is definitely one of the best figma trainers I've found for sure!

@043_harshsrivastava4 5 ай бұрын

Instance bit was awesome

@amandastauffer5703 7 ай бұрын

At minute 44, you ask us to share what our 'aha' moment has been so far - mine is that you can't add or change an icon in a component (ie, nav bar) unless it is the main component. That part also cleared up for me what an 'instance' is. Hoping we talk about variants, too!

@ShegzPeter 2 ай бұрын

This is a very educating thanks for the class

@zulaykhasulaiman3296 10 ай бұрын

Hello thanks for this i didnt know much about components and Auto layout but now i am better with it thanks 😅

@eusiahcruz9340 11 күн бұрын

i finished the whole vid :) thank youuuu

@agnesaasmaa9695 10 ай бұрын

Hi, Dan! Thank you so much for sharing these great classes with us. You are a great teacher! And if I had to pick my favorite feature, it must be the real-time updates. I just love seeing everything come together in the prototype view while I am doing small tweaks at the same time :)

@dipakdheer5853 10 ай бұрын

Fantastic man, I learn so much new stuff here... I've been using XD since 4-5 year, but I must that Figma is more advance design tool. Thanks for this amazing video tutorial, Dan. :)

@BringYourOwnLaptop 10 ай бұрын

You're welcome. You should transition easy enough if you have XD skills. But you're right, Figma has more depth than XD.

@N.M.M1999 10 ай бұрын

Met you recently I love your courses ❤❤❤❤

@faeghehbashiripour 6 ай бұрын

perfect, thank you so much

@hagarnahari7505 6 ай бұрын

1:37:30 - Knowing this shortcut could have saved me so much time, I thought this was a feature that is missing in Figma. Thank you for this video, it helped me

@64ester 10 ай бұрын

Thank you so much for this toutorial! its teach me a lot nore than just a figma. I like the idea to give the phone frame size as the same size as my phone. and that you shows all the ather tips and grate plugins that could save my alot of time if only i discover tham half a year ago...):