Figma Advanced Tutorial: A 2-hour Masterclass
Вставка
- Опубліковано 13 лип 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 🙏
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.
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!
You nailed it.
I mean you always deliver. I watch your videos most especially because of your composure and delivery.
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!
Can't thank you enough. Superb stuff as always, Dan. Cheers.
So first part of the video and I finally understand the component-instance relationship! Thank you SO much.
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 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!
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.
Amazing teaching style! I am so grateful that I managed to find you!
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.
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!
Thank you so much Sir. I've been following your tutorials for a couple of years. This tutorial is so spot on and much appreciated. Very detailed!
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!
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
Hi Dan, This video is valuable for designers who are having difficulties working with Figma and shifting from Adobe XD. Thumbs-up
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.
Super helpful, fresh & funny way of explaining! Booked your 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...
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
I liked this. You have a good approach to teaching. I just might sign up for the rest of this course :)
I love how easy and amazing components are!
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
Learned alot from it Dan! Thank you for putting it out there
I learnt adobe illustrator, photoshop and now I'm becoming a pro at Figma thanks to you. God bless you❤️.
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 💪
well said... Your courses are so funny and well organized. Thank you so much for your hard work!
Fantastic course! Thank you so much!
Awesome and detailed, thank you!
Thank you for your wonderful lectures..
its really easy to understand the way you are presenting especially mixed with funny 😄
Quick getting up new tut with current features😃 Thanks!
You are a gift to humanity. I love you!
This was a fantastic video vault 💯 🤜🏾🤛🏾
Amazing, as always!
The BEST Figma Tutorial I have had the real pleasure to follow. Wayyyy better than the Figma original ones! The pacing, the tone, the details, the ADDITIONAL explanations, they why and how of critical features! What a delight and luck you are out there! Thank 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 💪
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 🤗👏👏👏
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
All the tips & tricks along the tutorial are spot on beneficial to my knowledge in using Figma.
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!
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.
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 :)
Knowing you is a blessing 😊 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. 🎉🍰
Everything has been helpful and new to me, I’m new to figma and I have just been designing with boxes and going based on feel. This has been eye opening.
Exactly what I need. Thanks so much Dan! You rock Design Education 🔥🤗
Thanks Sophie! I'm glad you like the video!
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
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.
Learnt a lot till this point Dan!! Love the way you teach
Thank you so much for this tutorial! it was constructive and informative!
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, 'Bring Me Your Laptop,' for the fantastic masterclass! Your tutorial was incredibly helpful and had so much fun❤
I haven't discovered which tool I find the most challenging because I'm just getting started! Yay for Figma and Dan. #BYOL2
"big waffly mess" - new favourite expression! I'm stealing it! 🤣
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!! 🤝
Learned a lot !! Thank you !!
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...
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
The content is really good. Big Thumps up!!!!
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.
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
Hello, thank you for the class! It was funny and engaging and super helpful.
amazing video! thank you so much
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
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.
YO! Thank you so muchh!! Almost wrecked my head thinking why I'm not getting it right! LOL!
Formulas in integer fields!! Blew my mind!!
great videos, thanks broo, this really help !
I enjoyed and learned a lot of new things ... thank you
More than Amazing!
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
You made me understand weird stuff I had forgotten that I never understood :D Great job
I am a new designer/ entreprenuer, i recently found your videos, and i must say, they are very good 👌🏽 💯 💯 💯
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?
With Danial, Always you are SUPERHERO!.. thank you D ❤
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!
Great tip - I don't have all the options Dan shows for auto spacing!!
perfect, thank you so much
Thank you for making this video :)
Command Shift R -- Replace element with the copied one
Hold Shift + Up/Down -- Change field value faster
Wrapping and preview feature is the best ones from recent update of config 2023
Thank you in advance Daniel for this free tutorial!❤
You're welcome mate!
wow exited to see
auto spacing was really cool. I didnt know that was a thing until now!
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.
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
Nice Tutorial, Pretty Cool Tips & Tricks
👍
Met you recently I love your courses ❤❤❤❤
valuable video thanks
thank you
Its really an interesting video and its very much helpful.
i finished the whole vid :) thank youuuu
Space between’ is now set by choosing ‘Auto’ via the gap dropdown, or double click the alignment box.
Wow! Thank you! :)
Thanks for your content sharing!
This is a very educating thanks for the class