Figma Crash Course for 2022 (Best Practices & Techniques!!)
Вставка
- Опубліковано 28 лип 2024
- 00:00 - YOUR CHALLENGE! Can you spot them?
00:30 - What we will be doing in this crash course
01:04 - Identifying common Figma BAD practices!
03:05 - What we will be building
04:36 - Become a Figma master ⚡️
05:22 - Download the Starter File (Link in description)
05:35 - Create MacBook 14" Frame (F)
06:26 - Global Color Styles
09:50 - Grid Layout
10:40 - Responsive Header
16:35 - Responsive Hero Banner
19:35 - Button Components
26:35 - Beautiful Mesh Gradients
30:15 - Download Figma Plugin (Noise)
Download the Figma Crash Course 2022 Starter File
👉 thedesignership.gumroad.com/l...
Download Figma Crash Course 2022 Fonts
Clash Display 👉 www.fontshare.com/fonts/clash...
Work Sans 👉 fonts.google.com/specimen/Wor...
===
My Ultimate Figma Design Masterclass (3,000+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/t...
/// Use the coupon UA-cam10 to get 10% off ///
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko - Розваги
Who uses Figma? Drop a comment!
I do! A proud user of Figma and I'm actually quite good at using it. I'm Grant, I'm a product designer 😀. Hello Mizko!
@@granttheemperor2529 Hey Grant!! 🤙🏼 Great to have you here.
@@Mizko Thanks Sir 😊 👍🏽
I do...and really love it
I do mizko, amazing tool. I would really love to see your UX process on a given project, what do you do when designing various screens or pages of a product, do you experience any block? Would like to know how you overcome it
What an outstanding crash course, hands down!! So many helpful and well structured insights and techniques.
And your style of teaching is just so enjoyable to watch, Mizko. Keep up the good work.
For me:
Shift + A: creates an autolayout component with all selected components
Auto-layout direction: vertical or horizontal
Shift (upon selection of component in autolayout component): navigates up or down components with arrow keys
Enter: selects all nested elements in selected frame
packed -> space between: creates space between components (in header); pushes them out towards the edge (?)
align center: centers subcomponents in larger component
Command + Drag: allows you to resize on side of frame
Option + Drag: allows you to resize two sides of a frame at once
Option + Shift + Drag: allows you to resize entire frame keeping aspect ratio
Constraints: Left & Right will make a component *stick* to the sides of the display
Hug Contents -> Center: keeps frame in center
Press F: create frames by dragging, click -> 100x100, *shift* makes it a square.
Command + D: duplicate text/frames
Press T: creates text on click, selects text on hover
Command + G: groups elements together
Upon highlighting multiple components: create component set -> creates on component with multiple variants
Shift + i: Allows you to search for components in the currently selected frame
P: allows you to draw a vector shape
Command + [ or ]: allows you to bring layer to front or back
Effects -> Layer Blur: blurs shapes
Layer -> Color Burn: (usually after duplicating a group) creates cool effects of layers on top of each other
After downloading Noise plugin: Soft Light looks good
let me comment
Just started Figma and this tutorial clears lots of basics, thanks a lot 💐
I've been working with Figma for 2 months now and your videos really help a lot. Great content, keep up the good work!
Thanks man! This is how tutorials on professional tools should be made. I can’t say how many times I watched videos explain the obvious micro options while what we need is the best practice ways of doing things. You made my day.
OMG I'm just 1 minute through your video and I already enjoy it so much, I know that will be super powerful!!! Your intro is incredible!
Perfect, thank you! This is exactly what I was looking for :D
Great content, as a backend developer who had to touch some design for a personal project, this got me started right away, thank you
Thank you very much... I learn a lot from this tutorial
Thank You So Much. Learned many new things😊
There are just no words to describe your design.
This is gold! Thank you Mizko 🙏
Great Video. Thank you Mizko. Your content is always so helpful
I just started watching mizko's tutorials a few weeks back and oh manh! I can't describe how helpful his figma videos have been. Seriously life changing 🌈. Thank you so much!!!!
I'm so happy to hear Anurima :)
Thank you for these videos, helped me a lot!
Thanks for the video!
Such a beautifully done tutorial. I learned so much from this one and solidified my knowledge - this one has definitely upped my design game - thanks @Mizko the work your doing is helping designers everywhere
Excellent tutorial, clear, concise and covers all the basics. I'm now way more confident using Figma.
This was awesome. Thank you so much.
❤❤❤ Your tutorials are the best, thank you.
You just got yourself a new subscriber! Cheers man!
excellent tutorial, thanks for this vid!
This is just perfect!
Thanks so much, such a helpful course!
I don't even want to admit to how much debt I put myself into going to an online BootCamp where they didn't teach me half of what this video provides. They really told me to watch youtube videos and that's how I found your channel. Mizko, thank you so much for the knowledge. I'm a junior designer at an agency and I'm still learning from you all the time. To anybody wondering if the course is worth it, don't even hesitate for a second because there are people charging more than 10x what this guy is and doing a terrible job at it.
Crazy value as always!
The video was really helpful, thanks man!
Another great tutorial Michael! The tip about #componentSets was priceless!
Thank you so much Mizko!
Thanks Mizko...... really helpful
Love it!
thank you so much you are the best ui desinger on youtube
this is all i needed
Great, thank you
It's working thanks my friend
It worked! Tank you sir.
Fantastic video! Working efficiently impacts the success of projects. Very helpful tips!!
So helpful!
Great video Mizko!!!!!
Dayummmn Mixko that video was awesome and that intro was a banger. You did it perfectly.
A Suggestion will be: Keep the Background music at -27 DB and when you want to have some uplifting beat then bump it to -7 or -9 DB. In that case, it will have a good flow with your Voice.
Thank you! This tutorial has helped me learn more than I thought I knew. Love from Ghana, Africa
Very helpful 👏🏽👏🏽
This is gold! Thank you so much!
Many thanks :)
Excellent presentation 👍
new sub 🏆 thanks for this amazing content
Good video, keep going
So so so good tutorial... really useful. Thanks :)
So helpful thx mizko ❤
Thank you for this!
Welcome back :)
Supa helpful 👌👌
you are the best dude
Great vid, we are proud of you as well
Haha, thank you!
bro you a legend
thank you
I do and I love this design.
Thanks my g I love u
Honestly the first time I saw Mizko I didn’t want to click (i underrated) but now I’m glad I clicked 💯💯 Keep up the good work I learnt a lot new things 👍 thanks 🙏🏾 😊
This is awesome feedback Sanusi! Do you remember which thumbnail or video it was?
Small additional hack for duplicating text (at 18:30): After putting any text snipet into your clipboard (by selecting a line of text and pressing cmd+c) u can simply just click cmd+v and it will automatically create a new text box with the previously copied text =)
now i am in a good mood
Thanks a lot.. Your videos are always crisp and without a lot of bla bla --- nice.
One question: do you actually have a tutorial on how to build and organize a UI kit? Or reorganize an existing but chaotically created one without making mistakes in linking to the existing layouts? Thanks!
Hey Michael, thank you! I do have a simple Design System playlist on my UA-cam.
@@Mizko Ok, I've already seen some of that. I was thinking more of optimizing an existing, poorly organized UI kit. Making sense of it and organizing it and optimizing it. In Frames? On Pages In Grouppes, Naming and all that. I don’t mean to create the system or kit from scratch. All links must be preserved. You can only do this if you have done something like this more often or have planned it :-)
I was almost late to watch this😀, Thanks Mizko for the guide, It's so helpful, I even had to turn phone notifications on
Ha! Welcome Chris
@@Mizko Hope one day when I make it as a UX I will fly to Sydney to buy you a cup of coffee, 👍
thank you for the video Mizkooo 🏆🏆🏆 !!! i always had a problematic when it come to design and auto layout:
(almost none youtuber talked about this one) so when you design for desktop for exemple, you always design for 100% of the frame(1440X1024) right ? but you never take in consideration the "nav bar" of the browser nor the "bottom bar" of the windows bar.
so is the auto layout will solve this problematic when it comes to the code part ? since the actual design is for 100% of the view, but when we see it on browser it is less than that, so the design will fall apart and will be reduced. (sorry for the long question).
You forgot to make the mesh background scalable by changing the constraints! Anyway, thanks for these nice tutorials ❤️
Hey MIZKO! I bought your design file! Amazing stuff man! When I go to publish, it says I need to pro team plan.... any workout around or just publish Styles? Help! :)
you can also click the window button + shift + s for a screenshot and it can be used anywhere
I am a new designer going through a Bootcamp but I am seriously thinking about taking your master class as I find it WAY more helpful on the UI side of things.
With that being said, when you are doing the header around 18:30, why do you separate the fill and the stroke text? Why could you not do it on just one line?
@Mizko Please showring us a method...Which is creating a Heropage and transforming it into seconds with different frame layouts like Mobile View or Tablet View. Thanks
Thanks Shahab! I would suggest you to check out my masterclass which is where I cover everything you are asking for.
Would love something like this for webflow also, the 'correct' way to webflow
Webflow videos will come maybe later this year! I'm trying to stay focused on Figma and UX/UI design first :)
@@Mizko Great to hear, looking forward to the product course! LEGO
@@RJ-ir9pj It's coming along nicely! Can't wait to release it as well ⚡
@@Mizko How's the UI/UX course coming along? Any idea on a possible release date? :)
Yes
top notch shit man
How do you know how much vertical spacing to use?
Hey Mizko. Thanks for sharing. Loving your videos. 🙏
If I were to start learning figma today should I start with this video or the ultimate crash course 21? I understand figma made some updates this year.
Both! This is just a crash course of some updates. The Masterclass includes a deep-dive into the workflow.
@@Mizko Thank you
how do you replicate the mesh gradient in a coded design? can it be exported as an svg?
Hey @Mizko I am super new to Figma and I'd like to edit all my screen types on one board. Is that possible? I see that you are able to set it up that way, but then you have different files for each size i.e. Mobile, Desktop. Is there a reason to avoid editing them all in one file? Can it be done?
what is the shortcut key taking screenshot in windows sir?
Hello. How to drag header out to 80px when whole things move then inside header if I press alt key?
how did you do the 'copy' screenshot on hover?
for some reason ots not allowing me to add left and right , only on of them either left or right :(
Can anyone explain why he need to resize the nav bar to the full width of the screen at 14:53 ?
Mmm love the gradients and the noise for extra texture. Quick question! If you add noise textured hero banner say… on Webflow, would it affect the page load time?
Hey James! You can generate noise with simple canvas JS. Google it. Or you can export a small 100x100 transparent noise PNG and repeat it with CSS.
@@Mizko Brilliant. Thanks Michael!
Creating the header when grouping them all removes the menu items in the middle from being in the middle. It's annoying my ocd!
You’re really good at teaching! Thanks for your video! ✨👏🏻
Just one thing, it’s really hard to listen to you for someone who has misophonia disorder like me 😥
Thank you! Is there anything I can do to help with that? Is there anything I’m doing specifically that’s making it worse?
@@Mizko maybe that was just the microphone too close to the mouth, not in all videos there is this problem! 👍🏻
@@Woffola Thanks for letting me know! I've started to try keep the microphone further from the mouth. But now I'm in a new office, I'm battling the echo in the room now 😂
I've just started using Figma. Thanks for the tutorial. Is it worth continuing with Figma now Adobe have bought it out? I really don't want to subscribe to their products.
Good tutorials but why always desktop first?
When i change mesh group from pass through to color burn the colors just disappears, its in the frame but it can't be seen
That's odd, might be a Figma bug. If you're using the app, try the browser and if you're using the browser, try the app.
hey mizko
please enable parity purchasing power.
200 usd is quite impossible for us who lives in developing countries.
15:56 It's Shift G isn't it? you're gonna cause a lot of headache to the noobs who will be creating groups instead of turning off the grid hahahaha
I have a question: How do I load your UI Kit for every project I create?
Duplicate the system, rename it and then re-publish it for new projects.
@@Mizko hm, so after duplicating and renaming, just work my project within the newly duplicated file? Is that what you mean? Sorry for the confusion.
I'm from germany and I can not download your mokup. I want to pay with paypal and there is no option for it....
What was the Mac screenshot app you used?
Cleanshot. My favourite Mac app to date!
i use figma
I will cancel taking figma course cause u don’t sent any message for reset password and didn’t responded quick at email
Why does nobody see a whiteboard, if that's exactly the thing you use it for; to show others? Even online, and it includes practicing by hand
First here
I first, your first!
@@Mizko 😊😊😊
it would have been so better if they called the "FRAME" "Block" instead.
noise
Foreal lmfao
Sa