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 🙌
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.
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 😊
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!
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?
@@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!
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!
@@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!👍
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!
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
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 🥂
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.
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?
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.
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.
@@stevedoetsch 3yo comment but commenting for others wondering and find this. It doesn't matter THAT much. The goal is to create hierarchy not mathematical precision. There are other ways to create the overall hierarchy of text other than font size such as using weight, and color. Typescale is a path not the goal.
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...?
@@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 :)
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 👌🏼
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
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.
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!!
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.
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.
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.
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.
Hi Mizko! Thanks for sharing knowledge with us! I designed many websites but I still don’t know how to scale typography when I jump from desktop to mobile. Could you give me some tips or advices for that? I always have the doubts if I have to keep the sizes or make them smaller than pc, or sometimes bigger... I don't know.. and I can't find videos talking about that... =(
Hello Misko, You are polishing UI and your video with your work setup. If you could please reveal your work setup, what are the things you use to make videos. If you could help me, I am planning on starting a RU-vid channel. I am inspired by you. I hope you will consider my request. Could you post your gadget videos?
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…….
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
En el min 4:42 , en Figma también está la opción de calcular , ej: Van a tamaño de letra y en lugar de escribir el número, escriben la cuenta : 16*1.2 y les da el resultado
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?"
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 😊
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 😉
Hey Mizko, some fonts have a baseline that do not align to the 8pt or even 4pt grid? What are you supposed to do in this scenario? The line height and font size are multiples of 8 but it still doesn't work. I tried to experiment with the font size and line height but I can't seem to create a scale with it where the line height and baseline align to a grid. The font is a google font too by the way (Nunito sans) so the construction of the font must be okay too. What would you do in this scenario?
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?