Become a FIGMA EXPERT With me today! My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.) 👉 thedesignership.com/courses/the-ultimate-figma-masterclass 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/figma-design-system/ Outline - Figma Wireframe Kit (350+ components and variants) 👉 www.thedesignership.com/products/outline-wireframe-kit Yours truly, Mizko
@katherine9524 Жыл бұрын
Where's the file? :)
@Zakariaaaaaaaa Жыл бұрын
@@katherine9524 can't find it too
@CoreyStewart913 жыл бұрын
I cannot express effectively how valuable your videos are. To the point, quick moving, and SPECIFIC, actionable topics. Thank you!!
@biancawu91233 жыл бұрын
I hope the algorithm picks up your videos - they’re so high quality
@Mizko3 жыл бұрын
Haha! Really appreciate it. Gently smashing the like button will definitely help the algo pick it up 😉
@misalsudhir3 жыл бұрын
I am so confident that one day you will have millions subs. Your videos are really simple with high value. God bless you!
@Mizko3 жыл бұрын
Thank you Sudhir! Really appreciate it 🔥
@fluffypanda53803 жыл бұрын
I literally subscribed after watching your 2 figma tutorials. Very helpful for aspiring ui designers like me. Thank you for making these videos! More tips and tutorials please 🙌
@Mizko3 жыл бұрын
More coming soon! Will be lining up some more advanced tutorials soon.
@user-ri8dd5fp3l11 ай бұрын
Hey Mizko. One tip for you: You can calculate directly on mac, if you press cmd + space. Only put your calculation there ;-)
@frankbarnhardt48573 жыл бұрын
Mizko -- just got a tip about your tutorials from a colleague. You are now my new favorite person. Learning tons from your videos and love your teaching style. Will spread the word as much as possible -- and will also be smashing that "Like" button every chance I can. Keep on keepin' on.
@frankbarnhardt48573 жыл бұрын
Also -- do you have any tutorials using FRAMER?? Started looking into that --and very pleased with it's prototyping capabilities. Thanks.
@Mizko3 жыл бұрын
This is awesome! Thank you Frank!! Really appreciate it
@Mizko3 жыл бұрын
I can definitely produce some framer tutorials as well ✨
@hansulibakshi93033 жыл бұрын
Have been binge-watching your videos now! Such resourceful literally. Thanks for all the effort you have put forward.
@Mizko3 жыл бұрын
Thank you Hansuli! Really appreciate the kind comments. Hearing from my audience make my day and keeps me producing more content for you all.
@valeria53012 жыл бұрын
Hi Mizko, I love your videos & all. Pls just beware that line height must meet web accessibility standards. I calculate this way: line spacing = minimum 1.5 times the font size
@claramoramunoz8524 Жыл бұрын
Thank you SO MUCH for addressing styles like the ones found on awwward, they're a big inspiration for me and I had never thought about using golden ration for scaling my typefaces 😊
@prateek1369Ай бұрын
Thanks man really helped me design as a dev
@Junnanma3 жыл бұрын
Finally got some time during the holiday to catch up all your videos at 5am with 2.5x playback speed. Thanks for all the great insights and tips! One thing I've been struggling with is client communication on Figma. I've been using both Sketch+InVision and Figma for a while, and I found Figma is better in so many ways. However, the only thing that stops me migrating entirely to Figma is the client feedback/comment feature. I am so used to the InVision platform where I can view/manage the client's comments/feedback easily, and I love how InVision sends an email with screenshot whenever someone comments on my design. I don't find Figma's commenting system is as easy to use as InVision. Really want to know how you manage/track/document client feedback. Thanks!
@Mizko3 жыл бұрын
Ha! Thank you so much for the support Junnan! Ha I would have to admit, Figma's commenting system isn't always the best because of how the panel disappears when you click on a comment. It gets fiddly BUT the overall experience is stellar. I don't think I'd ever return to Sketch from Figma. What's the core problem with the tracking of comments? Is it because there's generally a lot and it's fiddly to click through or simply the interaction is tedious?
@Junnanma3 жыл бұрын
@@Mizko My main pain point is the fact that the comments are directly on the design. I worry that if I make any change to the design as I go through the client comment one by one, things might get shifted and moved away from the comment pins which I have not gone through, then I won't know where the client is commenting on. This is most likely to happen when I get hundreds of comments from the client. By comparison, with Sketch+InVision, I can leave the commented version on InVision intact and address each comment on Sketch one by one without worrying my change will affect the version on InVision unless I sync it. Has this ever been an issue for you at all? Should I simply change my way of dealing with comments (e.g. maybe go through and document all the feedback first before doing any changes instead of tackling them one by one, or should I duplicate the entire project and make changes on the new copy). Please enlighten me. Thanks very much, Michael!
@Mizko3 жыл бұрын
Hey Junnan, great insight. I've never had a problem as a freelancer or even when we worked on major design projects for government etc. I think potentially it's about management of the feedback cycles. The fact that you receive hundreds of comments sounds overwhelming already. Try to avoid presenting lots of different flows etc in one go. Always break up your presentation into batches and present them in a staggered manner. Eg. 1. Present Homepage + the funnel - get feedback, refine and finalise. 2. Then proceed to working on section B and C. 3. Get feedback, refine and finalise. 4. Then proceed to working on section D and E. etc etc. Hopefully that helps!
@Junnanma3 жыл бұрын
@@Mizko Thanks so much for spending your valuable time giving me such a detailed answer. You are absolutely right! I usually present a whole chunk of design at once to the client. This is so helpful. I am definitely going to try this and keep my feedback cycles smaller and more frequent. I am pumped for this year!👍
@abdullahiarala1013 Жыл бұрын
man, I cant count how many things I have learned from your channel, 💖
@Nick-ec6gb3 жыл бұрын
You are a GEM buddy! You just earned a FAN. I love your style of explaining and have a request of creating more videos on responsive web design since it is a struggle for new beginners. Keep up the great work!
@ashishchandna5327 Жыл бұрын
Your tutorial are sorting out a lot of confusions. Thanks a lot.
@soukainasro3541 Жыл бұрын
Dude this is on clutch!!! Thanks so much
@stevedowning48243 жыл бұрын
Nice work mate! Really love the way you show things. Learnt a lot with this channel!
@Mizko3 жыл бұрын
Thank you Steve! More to come. Once I release all the fundamentals, it's time to ramp things up!
@adrianjerez60902 жыл бұрын
Hi Mizko. Your videos make me a better designer every day. Thanks a lot!
@AsMeReIr3003 жыл бұрын
Heyy bro! your content is superb! please keep uploading this videos, you are helping a looot of people! keep rocking man!!
@Mizko3 жыл бұрын
Thank you Anibal! ✨ Will be doing more advanced Figma and Webflow tutorials soon.
@nameislee3 жыл бұрын
Best tutorials on the topics. Thanks, mate. Very helpful and very on point, straight forward.
@Mizko3 жыл бұрын
🔥
@SehrishMoujahid8 ай бұрын
wow I always stuck on how to decide the line height of font now i got that because of u thanks
@gispinzon28003 жыл бұрын
I love this channel!! It's extremely useful for beginners like me :D
@Mizko3 жыл бұрын
Woo! Glad to hear Giselle. Hopefully you subbed!
@federitossa Жыл бұрын
This is fantastic mate, thanks a lot. Quick question, is it ok to use those odd sizes like 39.06px? Shouldn't it just be 39 or 40 and follow the 8s rule? Cheers
@arielwertlen6709 Жыл бұрын
Very helpful channel, thank you! I wonder though, whether anyone else is perplexed by the fact that the scale setting in Type-Cast lists triads instead of scales!
@swapnilshinde61213 жыл бұрын
Soo good Mizko thank you, especially including the practice file is GOLD 🥇
@Mizko3 жыл бұрын
I’m here to help you! Glad you found this very useful. Thank you for letting me know Swapnil, really appreciate the support
@TheMelwynx3 жыл бұрын
Awesome video. Very helpful. You are really helping lots of designers out there...Keep it up Mizko.
@Mizko3 жыл бұрын
Thank you Melvin! Really appreciate it :)
@pradeeshk37773 жыл бұрын
You are making awesome video to who coming to learn UX/UI design thanks for the video man, keep doing more.
@yunes11762 жыл бұрын
Mylosp just a legend really aren’t ya
@diego_dandrea3 жыл бұрын
Straight to the point and full of content! Just awesome! Keep it up! When you hit 1M subs, I'll gladly say "I've been here since the 2k" XD
@Mizko3 жыл бұрын
Haha! What a heart warming comment. Thanks so much Diego! I will remember this day 👌🏼
@Mizko3 жыл бұрын
I will also personally invite you to the studio when the day happens 🙏🏼
@diego_dandrea3 жыл бұрын
@@Mizko Hahah! I'll remember that! 🙌
@Ioannnify3 жыл бұрын
Love this tutorial, Thanks! Just wondering if we are supposed to be rounding out the font-size 13.33 to 13 or 14px?
@Mizko3 жыл бұрын
For sure! I round them to whole numbers
@BhattShashwat3 жыл бұрын
Thank you for this awesome video, you made it super simple for folks like me who have no experience in design
@mohammedomran54913 жыл бұрын
I have a question, I'm used to use type sizes without decimals , I know that is a good practice for UI Design , and we advised to use whole number , I mean like 48 , 40 , 32 . . . etc, what you think about that which is best for UIUX Designer workflow?
@onarayavoravarchai61032 жыл бұрын
I've watched another video by Figma using similar multiply method. They round up/down the decimal after multiply with golden ratio. I think it's fine as long as the bottom line - the user experience- is good.
@stevedoetsch2 жыл бұрын
Your line heights should be whole numbers, usually a multiple of some number like 8, so they align with your grid, but your font size scaling should use decimals according to the scale you have chosen. It's your line height that determines the vertical rhythm not the font size.
@jeremiahwelch27393 жыл бұрын
Just getting into Figma and really enjoying your tutorials so you gained a follower. I'm planning on chipping away at all of them in the next few weeks. Also sent you a request on Linkedin and will find follow you on IG as well. Cheers 🥂
@Mizko3 жыл бұрын
Jeremiah, appreciate it! Glad you are finding a ton of value from the videos. I'm going to try ramp my frequency to 3 videos a week. Let's see how it goes.
@RajatKumar-ku7lx Жыл бұрын
Your videos are really valuable. I like the practicality and easy to follow approach. Looking forward to your future content.
@vaibhavnamburi27563 жыл бұрын
Loving these mate, i'm trying to upskill right now in Figma and this is really good
@Mizko3 жыл бұрын
Thank you V! Really appreciate the support.
@theopistusyoga54052 жыл бұрын
I'm grateful to find this video. this is high quality tutorial. Thanks for sharing this
@malinirao3 жыл бұрын
Thanks for sharing Mizko, really helpful tips.
@Mizko3 жыл бұрын
Woo! Malini thank you :) Really appreciate you letting me know. Means a lot. New video is dropping tonight :)
@khairulhaaziq2332 Жыл бұрын
this is priceless, so much knowledge. thank you for sharing these man!
@stella-80642 жыл бұрын
Amazing video! Thanks for sharing!
@user-xd4bl1gd1v2 жыл бұрын
i appreciate for you man! from russia with love!
@arkoprabhobhattacharjee75473 жыл бұрын
Thank you so very much! You have no idea how helpful your tutorials are :')
@priyankajoshi34189 ай бұрын
this was incredibly useful!! thank you so much
@jlitzphotography18053 жыл бұрын
This video is REALLY informative. Thank you for getting straight to the point with everything. Awesome!
@nguyenchau7107 Жыл бұрын
Fking love this man bro. One fking respect from me broooo
@lerodcailao34943 жыл бұрын
Your videos has been really helpful man! Thank you so much.
@stevenquadros90043 жыл бұрын
Really enjoyed this video. Could you please make one explaining a method to help map out the respective font sizes from desktop to mobile? For eg: if a font on desktop is 50px then it's relative font size and line height on desktop should be...?
@luischicote72592 жыл бұрын
did you find any answer for this problem?
@stevenquadros90042 жыл бұрын
@@luischicote7259 not exactly. The best answer that I've come to find out is to eye ball it or to use the -1 method. Eg if H1 desktop is 40 and H2 desktop is 30 then H1 mobile will be 30 and so on... Hope this helps :)
@luischicote72592 жыл бұрын
@@stevenquadros9004 yeeah, I understand. Perfect. I gonna try to do this method
@lazarelondaridze3 жыл бұрын
Goo stuff. One thing I would do differently is that I'd round those numbers
@Mizko3 жыл бұрын
Yep! This is really just to help everyone get started. As suggested take the learnings from this video and make it your own. I normally round it up and down as well 👌🏼
@lazarelondaridze3 жыл бұрын
@@Mizko Cool
@Mizko3 жыл бұрын
@@lazarelondaridze thanks for popping in with the support and comment. Really appreciate it 👌🏼
@lazarelondaridze3 жыл бұрын
@@Mizko You'll be big soon, with the quality of the content you're putting out. Best of luck and keep up the good work
@Mizko3 жыл бұрын
@@lazarelondaridze means a lot. Ha Don’t worry, I will remember this moment when we get there 👌🏼
@Always_help_when_you_can3 жыл бұрын
Thanks for the video, I subscribed since I Identifies you as an expert
@fernwehtwl Жыл бұрын
Thanks for this video Michal! I am curious to know the logic behind these scales like why 1.2 and not 1.3 or 1.5 to create the scaling of the text and how it fits nicely in design. :D
@dUXDesign079 ай бұрын
Super helpful content 👌👌👌👌
@rubenjsloureiro2 жыл бұрын
Sorry to ask, where we can download the file?
@roboroboto92627 ай бұрын
Thank you so much bro, God bless you!
@raygandesign3 жыл бұрын
Great video man..Simple explanations
@Mizko3 жыл бұрын
Thank you Ray! Oh nice channel you've got there too. Keep it up!
@raygandesign3 жыл бұрын
@@Mizko Thank you man! This means a lot to me
@echolu3349 Жыл бұрын
Hi Mizko thanks for this great video. Where is the file to download? Thanks!
@clairewei7963 Жыл бұрын
Hi Mizko. Thank you for producing such high-quality tutorials. I really enjoy watching them. Quick question. In order to snap the texts to the baselines, you adjust the line space to be multiple of 8px. However, the leading of the paragraphs is not in scale. For example, for both paragraphs with larger or smaller fonts, the leading is both 16. If I wish to have a bit of consistency, how to achieve that? Thank you!!
@evanbrogan293811 ай бұрын
I think you and others have the same question I do. Why are we OK to give exact scales to character size but round the leading/line spacing? Honestly that's the same question as in print when creating a grid. To me, the size of the font creates hierarchy (and therefore meaning), while the grid/baseline grid creates the overall harmony and rhythm. You really do have to work at it to create enough paragraph styles to accommodate both size and aligned leading while having enough leading. Related to the grid but not to leading: For the same reasons of harmony, rhythm, and creating a professional look, whether in web or in print, you should try to space each block using a the grid and not exact/decimals. Try as you may to space blocks in print along a grid, usually you have to squeeze something in. And if you're really still struggling at this point in print, you adjust your leading. It's probably easier to stick with the rounded numbers in web, where one can scroll, and you really don't have to squeeze things. It seems to me that developers look at everything according to the CSS block model as well. And if everything is a block, then wouldn't it be nice to simply know the space between them using rounded numbers? You get a clean professional look and it's easier on the dev team. I thought this quote was a typical perspective about designing with grids: "Personally I hate (baseline grids). I know what they are for but they always seem to cause more trouble for me. Yes, the body text is nice and aligned. You can plan your headings to work right. But then the client wants to change the size/leading of the subheadings, and also doesn’t want widows and orphans, but also wants columns to balance on every page. Something always has to give. Just hang the text from the top and be done with it, otherwise I’m spending hours of manual work topping and tailing 100 pages." While this author says he knows why, he only alludes to when: "100 pages." For me, when to use the baseline grid is on print projects with many pages--it creates that professional, thoughtful, consistent approach page after page after page. You have to experience that. A single page ad doesn't really need this. In the world of web, carousel ads could benefit from consistency of placement, but sites with many pages (same as in print) definitely would benefit. Other things you could try if leading is too tight: 1) Changing the base font size to go a little smaller. This would readjust all your sizes in the scale, potentially impacting each scale as well, but all your scales will have more breathing room in leading if the point size comes down compared to a stationary, rounded leading number. 2) Try a different scale ratio.
@toyoubaldo11262 жыл бұрын
The secret to good UX is having a play around!
@hmabubakar86 Жыл бұрын
Thank you so much bro ❤
@TheMrNomadus Жыл бұрын
There is a plugin in Figma called Typescales that does exactly the same thing for you but automatically.
@KamarajMani3 жыл бұрын
Informative... 👍👍👍
@Mizko3 жыл бұрын
Thank you Kamaraj! ✨Thanks for the support and feedback. Really appreciate it.
@vibesick Жыл бұрын
thank you i appreciate your work
@milindkhadse5563 жыл бұрын
Very helpful information thank you very much.
@clarenancy77 Жыл бұрын
Thanks for these tutorials, Mizko! I'm going to continue onward! But...questions. I'm curious about all the fonts! I've been doing print design for years. OR design in which the font can be made into an object and therefore static. How do all these programs and websites manage the fonts? How to you choose a font that Google or Firefox won't foul up? Or will they reconcile with a similar font?
@Queenbeez786 Жыл бұрын
thank you soooooooooooooooooooooooooooooooooooooo much
@evangill9123 Жыл бұрын
Super helpful video. This is helping me be consistent across different paper sizes and digital formats.
@daisykmr23 жыл бұрын
Your videos are amanzing... thanks for sharing useful stuff... Do you have any videos on how do you translate your clients requirements and vision of his/her product into visual design/branding/visual. I use this stylescapes and am looking for more tips like what sort of questions to ask the client, picking up and deciding which colors, etc.
@lmd48812 жыл бұрын
complete lifesaver :)
@Chaumaerik3 жыл бұрын
Hey, first of all thanks for sharing. I'm working on improving my handoffs to developers and just recently moved to Figma from using Sketch the past years. I like structure with the vertical grid, never really used it before but it does make for more precision. I just wonder if you could quickly clarify how using this 4pt/8pt/16pt translates for easier and better efficiency for developers too, is it mainly due to that it is based on rem increments? Also what are your thoughts on having type sizes that have decimals, for example not 14px but say 14,32px or whatever. Historically I've always had the mindset that it would make it easier/cleaner to have precise numbers without decimals and that developers wouldn't like having decimals either but maybe that's ok to have after all as they go by rem rather than px when coding? Thanks
@Mizko3 жыл бұрын
Hey Martin! Appreciate the kind comments. 1. 4/8/16pt is conventional. The reason why we use 4 is because it's even and 2pt is just too small. 4pt is meaningful enough and more appropriate for dense UI designs. 2. Rounding up numbers is a very common practice and you can definitely round them up / down for the developers. In the end working with developers is more important than defining what you do.
@eniolade7 ай бұрын
Thanks for this video. Should I stick to this or use the 8 Grid System?
@tarunjawla9463 Жыл бұрын
amazing video
@3esila8942 жыл бұрын
thanks tNice tutorials really helped
@maxdronov Жыл бұрын
Thank you so much!
@biancawu91233 жыл бұрын
SUPER HELPFUL
@Mizko3 жыл бұрын
Thank you Bianca! Glad you enjoyed this ✨
@keithrogerseventphotograph9193 Жыл бұрын
Thank you!
@OthmanAlikhan2 жыл бұрын
Thanks for teh video =)
@InayaNanban2 жыл бұрын
Why should i use scale for typography ? Please say !
@SahithNayudu3 жыл бұрын
Very helpful!
@kronkorken_ Жыл бұрын
Nice Video. What is about mobile design? I think the headings could be too big for small smartphone screens. How do you handle this?
@opsnax14685 ай бұрын
Please reply I have a question, brother. Can we use font sizes in points like you used in the video? Can we use them in real projects? Also, could you please explain how we can use line height?"
@GraveRave3 жыл бұрын
Awesome!
@Mizko3 жыл бұрын
Thank.. YOU!
@ffewf62 Жыл бұрын
What do you mean by snap to the grid? Each font type is a different size and spans more than one 8px line.
@kassandrapalma6216 Жыл бұрын
Thank you!!
@vigneshKrishnamoorthyRules Жыл бұрын
perfect
@dieryarias2 жыл бұрын
Thank you so much
@sepidekhaneghaei89043 жыл бұрын
so practical
@alexnikon78983 жыл бұрын
Thanks for the video! I was constantly told that using decimals in the font-sizes is questionable decision. What do you think?
@Mizko3 жыл бұрын
No problem at all. Rounding up and down is also a very common practice :) I do it too.
@GustavoPohlodMontanha6 ай бұрын
Boa man!
@minaghasemi25443 жыл бұрын
Thank you
@giancarlomanalo8624 Жыл бұрын
YESS
@Cuminbeef2 жыл бұрын
If there is a body paragraph vertically alighted middle in a 400px height container, when the container snaps to the 4px grid, there is no way the paragraph will snap to the grid. Do I suppose to take the paragraph off the 4 px grid then align it vertically inside of the container??? Also the spacing between the paragraph and the container will not be 4,8,or 12, the padding will be 9,11 or 13…….
@djerabendigngar8569 Жыл бұрын
hello thank you so much for your videos. its very helpfull. am doing now my on stream music app and want you to correct that for me. can you ?
@bithagrop2539 Жыл бұрын
🎉❤nice++!!
@SketchbookStudioo2 жыл бұрын
thanks!
@sirbirre2 жыл бұрын
Thanks for the video again! Can i have a question? I added Line height pixels divisible by 8 or 4 in my case and actually I used your grid vertical system 4px too. However my typography Montserrat denied me matching the grid and my text as well. 😔😔
@hapebeast60469 ай бұрын
So why not use 8 point for the font as well? So 8px 16px 24px ect.?(:
@tommakadobe13393 жыл бұрын
Hi! Can I use 10pt grid? I find 8pt grid doesn't fit the layout for iphone 12 max. Thanks!
@Mizko3 жыл бұрын
4 or 8pt
@GameIsland632 жыл бұрын
Hi Mizko, Great Video as always! May i know your masterclass, you say for line height, just multiply the same as type scale, for example minor third, but in the tutorial, you say multiply by 8. May i know what is your current method? Thank you.
@pierregelas Жыл бұрын
No you multiply the text size by the scale, but for the line height, you base that on your grid, a multiple of 4 if you have 4px vertical grid, or 8px if you have a 8px vertical grid.
@comrelaxandrepeat5061 Жыл бұрын
Are you sure we can use font size as fractional values like 19.2 px? bit confused in that area
@jeesus972 жыл бұрын
what do you think about typescale? is a figma plugin
@isaaccurmi13263 жыл бұрын
Hey, what would the process be for mobile - how do you decide the scale for mobile and what changes? Thanks!
@Mizko3 жыл бұрын
Isaac great question - my team will normally downscale the scale by 1. So if it's a H1 on mobile, we use H2 scaling. H2 on mobile, we use H3 scaling.
@isaaccurmi13263 жыл бұрын
Cheers! Thanks for taking the time to answer questions 🚀
@vasu97603 жыл бұрын
I mean is it really necessary to use type scale in this manner? What if i like to use type scale in only even numbers? Like 20, 16, 14, 12... something like that...bdw very nicely explained, also had 1 more question that what about developers? i believe they'll be thinking what the hell is with this designer? Everything's in this type scale is in decimal...so please highlight me on this, thanks mizko 😊
@Mizko3 жыл бұрын
Great question. You can but you will realise you’re designs don’t look great. The typography scale won’t scale nicely. For developers, this is an entirely different story. When you implement a system like this, you don’t input PX values you will use REM or EMs. An entirely different topic for another day 😉