Figma Advanced Tutorial: A 2-hour Masterclass
Вставка
- Опубліковано 8 чер 2024
- 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. UA-cam is not a sponsor and upon entering the giveaway, you acknowledge that UA-cam 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 UA-cam community guidelines: ua-cam.com/users/howyoutubewor...
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
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
Thanks for sharing a sneak peak into your Figma Advanced course. Can't wait to begin my class project!!
i love this t-shirt can you send me this design for me with your signature ?
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
Thank you very much?
Hi Mr Dan, I'm a member of the BYOL community and unfortunately I've had issues with playing the videos on the website.
Everyone watching this... I’m proud of you for wanting to improve yourself, I wish you the best of luck in your future endeavors.
Sir your are a legend because no one is giving free advance course 🙏
Keeping the developer in mind when design is such a good tip..it will help them a lot and make the collaboration a success
I am one of the millions you've helped. thanks dan!
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.
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 UA-cam is just amazing. Thank you Dan.
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!
I learnt adobe illustrator, photoshop and now I'm becoming a pro at Figma thanks to you. God bless you❤️.
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!
You nailed it.
I mean you always deliver. I watch your videos most especially because of your composure and delivery.
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.
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.
Exactly what i want to express to him as well 🤗👏👏👏
So first part of the video and I finally understand the component-instance relationship! Thank you SO much.
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!
Right that is the method from Sir Dan!! just amazing
Can't thank you enough. Superb stuff as always, Dan. Cheers.
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.
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!
Amazing teaching style! I am so grateful that I managed to find you!
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!
Thanks man. Much appreciated. Everyone should go to BYOL 💪
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
I love how easy and amazing components are!
The Navigation bar was awesome
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!
Thanks for the long time support. 🤟
would you like to share your esssential course?
Me too! Love his sense of humour. I remember things better.
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.
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.
Cool that you made it to the end. Glad it helped 💪
All the tips & tricks along the tutorial are spot on beneficial to my knowledge in using Figma.
Super helpful, fresh & funny way of explaining! Booked your course.
Hi Dan, This video is valuable for designers who are having difficulties working with Figma and shifting from Adobe XD. Thumbs-up
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 : )
Wow. You're flying through the videos. I appreciate the great feedback and the stellar testimonial. Much appreciated.
would you like to share your esssential course?
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...
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
Learned alot from it Dan! Thank you for putting it out there
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!
I liked this. You have a good approach to teaching. I just might sign up for the rest of this course :)
Quick getting up new tut with current features😃 Thanks!
Fantastic course! Thank you so much!
This is the best tutorial/masterclass i have ever seen for anything, it is so well put together, this should have 1M+ views atleast!
Thanks Isaac. I'm looking forward to the day it breaks 1m. We'll have a party here at BYOL. 🎉🍰
Awesome and detailed, thank you!
well said... Your courses are so funny and well organized. Thank you so much for your hard work!
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
Knowing you is a blessing 😊 Thank you so much
I did the whole course. I did learn a lot. Thanks! I will buy the full course now!
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 :)
Amazing, as always!
This was a fantastic video vault 💯 🤜🏾🤛🏾
Learned a lot !! Thank you !!
Learnt a lot till this point Dan!! Love the way you teach
Formulas in integer fields!! Blew my mind!!
I enjoyed and learned a lot of new things ... thank you
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.
Thank you, 'Bring Me Your Laptop,' for the fantastic masterclass! Your tutorial was incredibly helpful and had so much fun❤
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
Hello, thank you for the class! It was funny and engaging and super helpful.
"big waffly mess" - new favourite expression! I'm stealing it! 🤣
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!
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
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
This is a very educating thanks for the class
Thank you for your wonderful lectures..
its really easy to understand the way you are presenting especially mixed with funny 😄
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.
I am a new designer/ entreprenuer, i recently found your videos, and i must say, they are very good 👌🏽 💯 💯 💯
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!! 🤝
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 :)
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.
That's excellent Sabrina
@@BringYourOwnLaptop2:00
Exactly what I need. Thanks so much Dan! You rock Design Education 🔥🤗
Thanks Sophie! I'm glad you like the video!
Instance bit was awesome
The content is really good. Big Thumps up!!!!
auto spacing was really cool. I didnt know that was a thing until now!
Very good lesson. My best wishes to you
perfect, thank you so much
Thanks for your content sharing!
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...
Command Shift R -- Replace element with the copied one
Hold Shift + Up/Down -- Change field value faster
valuable video thanks
Thank you in advance Daniel for this free tutorial!❤
You're welcome mate!
great videos, thanks broo, this really help !
Sir, you are in my legendary mentors list 🔥
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!
Thanks so much! I'm glad you're enjoying BYOL and the community !
Does he have an advanced one? Where can I find it?? Need it ASAP 😊
@@PatriciaCarvalho0 he just have released it, on his course page
would you like to share your esssential course?
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
thank you
You made me understand weird stuff I had forgotten that I never understood :D Great job
Thanks a lot 💯💯
Nice Tutorial, Pretty Cool Tips & Tricks
👍
Wrapping and preview feature is the best ones from recent update of config 2023
Met you recently I love your courses ❤❤❤❤
I haven't discovered which tool I find the most challenging because I'm just getting started! Yay for Figma and Dan. #BYOL2
With Danial, Always you are SUPERHERO!.. thank you D ❤
Finally, constraints well explained... Thanks in the name of the whole community.
Constraints took me a while to wrap my head around too. Glad I was able to decode it.
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
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
Its really an interesting video and its very much helpful.
THANK YOU UNCLE DAN
Thanks this is really helpful
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 ❤❤
Thanks for the support Mariam!
would you like to share your esssential course?
i finished the whole vid :) thank youuuu
good job
Thanks!
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.
You're welcome. There are loads more but that's what has helped me with most of my work.
God bless you sir for this. You are blessing
great course