From Figma Units to CSS for Pixel Perfect Layouts – 2 Methods

what is up everybody today i'm going toshow you two different ways that you cantranslate your figmavalues like your white space and yourfont sizes accurately to css you can'tjust use pixel values i'm going to showyou why we have to typically use m andrem units so i'll show you a plug-in andwhat you can do that and also sort oflike a css override to make it easy sothat you don't have to deal with math oranything like that all right let's getstartednow chances are if you're watching thisvideo you probably want to be a betterdesigner and if that's the case how muchdo you really want itbecause at designcourse.com i've createda ui ux course that will help you gofrom designing layouts that i might ratea four or five up to eight and beyondbut more important than that as a betterdesigner this means that you can landhigher paying clients in jobs thiscourse includes over 16 hours of video40 interactive ui design tests and evenmentorship where i personally take alook at your work that you submit ireview it and many times i also reviseit providing you with great feedback tohelp you become a better designer nowfor this video i want you to use thecoupon code ui2022and that will give you 22 off atcheckout all right so here is theextremely simple example i didn't wantto take a lot of time trying to do afull ui because once you understand howto do this just within the context ofwhat you see here you'll be able to dothis i've pretty much anywhere else soi'm going to link the figma communityproject here where you can justreplicate this very simple design so youcan follow along i'm a strong advocateof actually following along along ratherthan just watching because it does helpyou build muscle memory when you do itwith your hands and you see it takeplace in front of your screen on yourown browser so um the first thing we'regoing to take a look at is i just fontsizeand i'm also going to show you how todetermine white space or the amount ofdistancein the empty space between elements sowe have a few different areas of concernhere when we're going to be working withour css first how much white space isall around from the very edge of thebrowser or in this case the frameto where the content begins how do youdetermine that all right well assumingthese are both lined up on the samecolumn and they should be they're righttherewell all we have to do is just take oneof these items or like say this biggreen rectangle and hold alt your alt oroption key on mac and when you do thislet me just zoom upand you hold alt you'll see that itshows this orange 37 right there thatmeans 37 pixels because that's whatfigma uses uh for their unit ofmeasurementsocan we use pixelsfor things likemargin like css margin or padding whichis what you use to define white space incssno typically typically you don't want touse that um i'm going to show you whythough in a second so if i get back outof herei'm going to refer back to uhright here this is visual studio code ihave a very simple document open withthe necessary html markup needed tocreate that very simpledesign there you can also see i have mybrowser open here as well and this righthere is not what that looks like uhwe're gonna make the white spaceconsistent as well as um the font sizeand everything else so if we go to mymain.css and by the way the folderstructure's simple i just have anindex.html i have a css folder with amain.css file inside of it so i alreadydo have some initial markup just to makethe green square i or the rectanglerather and our font family and all thatgood stuffum and and so let's go ahead and definethe white space i around everything with37 pixels so if i chooseour bodyput margin 37 pixelsthere we go that looks like it'sprobably very fairly accurate based onwhat we had going on in the figmadocument um let's also put in pixelvalues uh just for the sake of argumentumfor our type so if i go back herethis says it is 32 pixels all right sowe're going to put in font size 32pixelsokay now it really pretty much didn'tchange because we're at the samethe default size is very similar to 32pixels anyhow sohere's why you don't want to use pixelsespecially for something like typeumif i go ahead to mysettings let's go to our browsersettings andi go toappearanceyou see some people may have changedthis pagenot page zoom but the font size where itsays recommended to something that mightbe like very largenow if i do that you can see howyou know a lot of almost all the typehere has has increased in size guesswhat this is notthis is a problem because those peoplethey might have issues with being ableto read and they want things to belarger than they are by default when youput in pixel values that doesn't happenso we want to use m or rem units i'mgoing to switch this back here tomedium and we'll come back to this andi'll show you um how it actually willrespond when we use an m or rem unit andtypically for type you're going to use aram or the responsive m unitokay so umlet's go back here i'm going to show youtwo ways for calculating and doing aconversion from pixels the pixel valuesyou find here for your white space andyour font sizesto mrm units all right so the first thefirst way to do it is iyou can use a calculator and there'salso a plug-in though that does does thecalculations for you um so if we goright here to plug-ins andthere's one called hand overall right so hand with little two littlewhat do you call those things anyhow allright well i'm just going to call them igreater than signs uh handover and whatit allows you to do is you can selecttype for instanceand assuming your base pixel size is 16what does that actually mean i'm goingto show you what that means real quicklyuh if we go backhereby defaultthe htmlelementhas a font size of 16 pixels all rightso you don't have to specify thisbecause that's what browsers use bydefault all right in one m unit or oneand one run one rem unit iare equal to whatever this font sizevalue is so if you don't override itit's going to be 16 pixels so that's whythat document that figma plug pluginactually has the base size by default 16pixels but you can of course increase ordecrease that if you're doing anoverrideall right so what we do is we can see iif we select this typeit's going to tell uswhere is the font size right thereit's going to tell us thatthe 32pixel size that we have created here infigmaright here is equal to exactly twom or rem units all right because we have16pixel base font size so 16 times 2 is32. now if we wanted to figure out maybelikeum like this one like the height of thisrectangle well that would be 199 dividedby 16 equals 12.44 and in fact i'll showyou with my calculator 199 divided by 16equals12.4 and rounding up here to the seconddecimal placesothat's all we would have to doin order to figure out our m verse remunitsand so what we would do then for ourfont size this is equal to tworem units let's go back herefont size is now to rem unitsnothing much is going to look like itchanges howeverif we go back to our settings and weincrease this to very largeguess what it is increased kind of hardto tell i but if i change this back tovery small or go the opposite directionyou're going to see how this how muchsmaller it isso now if we go back to medium itresponds unlike an absolute value likepixels okayso that's that's the first way so youcan do you can you can get all of youruh your white space let's do it let's doit another time uh for for anotherelement um like for instance our bodygetting that margin up there i believeit was 32 right so if we go back herejust to confirm no it's 37all right so we use that plugin we go toplugins handoverand we'll choose37 oh it doesn't actually show youdistances so we have to do that onemanually we douh 37 divided by 16. all right that's2.31so what we do is put ini margin 2.31and we put m units herethere we gothe distance here is going to be equalto 37 pixelsnowlet me show you a quicker way even nowif we take our html element here and wesayfont size62.5 percentit's going to make everything smallerbecause we're taking the font size whichis by default would be a hundred percentwe're going to check it we're going totake that down to 62.5 percent so it'sgoing to make uh all the font sizessmaller now the reason you do this isbecause it will turnit will make your conversions frompixels to mrm units much faster and it'sa matter of simply moving a decimalpoint over one placeso this basically makes the font sizewhen you're going from 100 to 62.5 to 10pixels so when we're working with tensmath becomes so much more easy so let meshow you um for instance this body themargin was 37 pixelswell all we have to do now is changethisand move that decimal point so 37.0we're going to move that decimal pointoveronespotto the leftand it becomes 3.7m unitsall rightnow there we go now if we take our fontsize over herethis was 32 pixels 3.2 rem unitsthere we go how about the white spacebetween food for thought for instanceall right we take this element we holdalt hover over there you can't see itit's 36 so that becomes 3.6m units so we put ilet's do margin zeroyeah and then it would be3.2 did i say 3.2 i already forget whati said let's do m units herenow one thing that becomes a little bittrickyif is if you have a font size overrideand then you're using m units uh on thesame element we can just use rem for itto default back to thisbase font size no matter what all righti think i saidi think i have that wrong what was thati have a terrible manner it was 36. sowe'll just change this to 0.6 3.6there we go so now we have correct whitespacethat's accurate based on our figmaprototype now we also do have one otherthing you could do this for all theother values like corner radiuses orborder radiusesall right so it says the border radiusis 10. that makes it super simple thatsimply means we take our border radiusof our green squareand make it onerem unitall rightand additionally if you wanted to getthe heightall right it's going to tell usuh it is 355 by 339 or by 199and that's just a matter of 30 point35.5 m and versus 19.9 m as well youcould do that as well if you wishtypically you wouldn't want to do thiswith like a card assuming there was apicture in here or something or therewas content you wouldn't need to set anexplicit height but that's how you getyour margin your padding and your fontsize is ihandled here within figma andtranslating it to html css values allright everybody let me know what youthink in the comments about thistechnique i do you use a differenttechnique for handling your conversionslet me know as always make sure to checkout designcourse.com to learn ui uxinteractively and also subscribe hereleave a comment like all that good stuffand i'll see you soon goodbye[Music]you