How to use Figma's new Dev Mode

figma recently announced a bunch of new features at their config 2023 conference and the first one we're going to take a look at today is Dev mode now Dev mode makes it easier for developers to implement designs made in figma we're going to take this simple layout that I created in making the reality in the browser while using the new Dev mode both within figma and as the new figma Visual Studio code plugin if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alright so let's get started here this is the very basic design that I created real quickly just to demonstrate Dev mode here in figma and also Visual Studio code so I'm going to link this exact prototype or this design this figma prototype I in the YouTube description here and then that way you can follow along exactly especially if front-end development is something that you're not usually interested in um you can follow along and see how we we get this realized in the browser so the first thing also before that is right now at the time of recording this video you need to have the beta version of uh figma so I'm using figma desktop so if you just type in figma desktop you'll be able to find and Google the figma download page and then there's going to be a beta option so the beta option uh the actual app icon here in Windows looks like this as compared to the regular option the beta option right now does give you this so if you see this right here this little Dev mode toggle then you know you're working within the right app so what we want to do is first I'm just going to demonstrate switching into Dev mode here within fig mod and as we can see things turn green and the inspector doesn't look the same and and the way you interact with your elements also looks different like by default we still see all these little eye things that says like 8.31 10.06 I very important to understand that this is for developers here and it's just trying to help you get your spacing right if you click on different elements here you'll see it gives you some code and you can see right here we also have this little uh settings optioned where we can set this to rem or pixels I typically you're going to be using REM units either they're not absolute value values they're actually they're relative values and that's what you should be you know constructing your CSS with for your layout set unit scale this is also important so right here set unit scale 16. so this is the root font size for scaling pixels into CSS rims 16 is the default value of the font size property that browsers essentially give web pages on like the HTML element so you want to leave that the same unless for some reason uh developer or you personally just want to use a different uh scale because it's going to use this value right here to determine these values that you you see that are showing up here also font sizes and other stuff like that okay so a developer can come in or yourself if you're trying to work with code and you can start to understand through the figma desktop app or figma itself uh the web the web-based app um you can figure out what your spacing and your sizings are through this app but it's going to be a lot better for you if you use something like Visual Studio code and you use the figma plugin so let me show you that real quick so I'm going to open up my visual studio code and this happens to be all the HTML for that design that I just provided so when it comes to figma itself it doesn't export HTML for you that's something that you have to write yourself and you have to understand how to structure that so for instance we're wrapping everything in a section element we have an SVG element which is actually the little exclamation red icon that was there it's a two-com approach so we have content here just with the H1 paragraph and our buttons these this right here is going to be a display Flex to get these next to each other into two columns so again just going back to our design you'll see I how that's working our two column approach we have an icon here then all of our content here and then this over here will be display Flex as well to get those buttons situated with each other so once you have that that's all good um and then you want to come over here to extensions and you want to type figma for vs code and this will one will show up so for me I've already installed this but you want to install that so click install and after you install it you you'll find this I this icon right here when you click on that it's not going to show you this initially it's going to ask you to log in so just go ahead and log in and then it's going to have I these folders here and then right here it says delete video that's the um project that I just showed you that it's working on when you click on it it's going to basically load figma here in this panel within Visual Studio code uh and then that way you don't have to leave the code editor when you're writing your CSS and stuff like that so it's just basically a different form but pretty much the same form as Dev mode in figma desktop itself so we'll see here we have a link real style sheet to cssmane.css all right so I already have that created right oopsie I have that created right here and you can see it's empty currently so let's go ahead and use this and figure out you know how it's going to benefit us essentially so if I just click the actual background or the the frame as figma calls it it's going to give us a width and a height we don't want that for the website background we don't need that at all because the web the website backgrounds uh in terms of the body element at least is just going to be based on the size of the device we don't need that we do need the background right here so that's nice we can click this little copy thing right there and then that way we can type in a role set body and then we can just type in uh background now I'm going to take I my index.html click on open with live server right here now if you don't see that it's because it's a an extension you can use just type in Live server up here and install that and then you'll see the option you can also get it started by clicking go live right there so if I click that it'll load up a browser and here's our huge exclamation point and that's just because we haven't styled anything and controlled it yet so with that said what else do we need to focus on essentially for this stuff well we know all the type we want it to be white all right so we could just say color white all right simple enough I also know that I want all the uh the fonts here the type the font family to be enter so font family enter and of course if I selected any of this type it will say font family enter but you don't have to specify that that property and value on every rule set that would be kind of silly so you're going to have to understand some CSS and just you know best practices outside of just relying on what all this you know code is is outputted from uh the figma extension so outside of that I also know that I wanted to sim since this is just a demonstration we'll say that this is the website background here um in this area but then this is going to be just centered horizontally and vertically within uh the web the website essentially so to do that I know I can just type display grid and place content Center and that will get us rocking in that regard so it's still messed up SVG Graphics without uh width and height attributes are always very large so we'll get that fixed in a second so right here this element I is the same thing as the section element that I've created here all right so when I select this then we can start writing out the necessary properties for this now if you look down here it says the layout is 51.625 Rems height is 28 point blah blah blah typically you wouldn't be putting a fixed width on a modal like this it'd be kind of like responsive but for just for the heck of it we're going to do that anyhow we're going to copy all three of these and then I don't want an explicit height I'll let the content inside of it determine the height and you'll see Flex shrink 0 is there as well and if I just look at this um can't really tell much was what's happened yet but we can get rid of flex shrink zero as well okay so now we have a defined width explicit width that's placed onto our section element additionally we could see now this is something that's frustrating to me the Border radius is set in pixels even though we have over here rem's chosen all right so this is kind of like the same little toggle that you saw in the desktop app you can also set the unit scale from here as well which is currently 16. um so I don't know why they're not putting this pixel value and converting it to REM units for us kind of frustrating but the way we used to do it in the past is we take your calculator unless you're using some sort of other external tool or extension or plug-in and you just take a 19 divided by 16 and that gives us 1.18 for the quarter the Border radius so border radius would be 1.18 I think that was REM units and we also need to give it a background as well so that we can actually see these Corners because currently it doesn't have a background we save that and there we go if I zoom up enough you can see we have a background or a corner radius right there okay so with that said all right we also want to make section a flexbox container because there's two columns in it there's a column one right here and then all this stuff is next to it so that's a second column so to easily create columns I know we just put in uh display Flex and then you're gonna see once we do that it's now into two columns and by the way the font wasn't loading I had to import that from Google fonts over here all the inter basically was not loaded correctly so there we go so now we're in a two column approach with the display flex and we also want to put a gap in and this is the first time we're actually going to utilize some of this spacing so what you want to do is we take this this icon right here and then if we hover over another element you'll see where it says explicitly 2.25 that means 2.25 REM units all right so what we want to do is put Gap 2.25 REM and then now we are spaced out evenly based on what we're having now it doesn't look like it because just how large this stupid SVG graphic is so let's go ahead and fix that as well so what we can do is take our SVG and if we click on our SVG itself it's going to tell you the width I the height and this Flex shrink value if we take all those and just copy them and then paste them right there we'll see now we're going to have a correct size uh much much much better right here now we don't have padding worked around inside of this container so we can get the values for that as well so you can see if we hover over this it says 3.06 so that is actually the REM value for the padding on our section so what we can do is just say padding 3.06 Ram right there so now we can go back and now we have a nice amount of padding now one thing we're not centered vertically right now because I forgot to put in height 100 viewport height on the body element so now it can be properly positioned in here so now we're getting uh close but we can notice we have like this is down too far and this is where it helps to understand just you know some some CSS and why things aren't like aligned properly and such so now we can take our H1 element and let's focus on that so we click on our H1 element it's going to give us the color the font size down here the font family we don't need font family because we've already specified that the font weight yeah perhaps we could use as well so I'm just going to take these three right now for a second and just paste those in we're going to get rid of font family we're going to keep the font size all right now we still have an issue I when it comes to this stuff right here all right the fact that it's down so far and that can be fixed by specifying uh margin zero so we get rid of any of the margin and now we're much better aligned now additionally this type really doesn't look correct as compared to the actual example over here we have a lot more line height in these elements so let's focus on that as well we're going to put paragraph down here and then we're going to just go ahead and say it's going to be font size and the font size for this one for the Topography is 1.25 REM units and we also have a line height down here as well so let's copy these and just paste them in get rid of the font family we're going to tab that in and now we are a little bit closer to matching this up so we can also get rid of any default margin as well on the paragraph you can see we kind of have this situation occurring where we need more white space between these elements in order to get this looking more like this over here so what we can do is on the HL H1 element we can say the margin margin top is the first element um and then margin right so it goes top right bottom left so top right or zero and the bottom to separate us out and give us white space between these two elements uh we can click on this or hover over it rather you can see it's 2.31 so we're simply going to say 2.31 REM units just like that save it go back now we have accurate sizing as compared to this example over here awesome so let's also take a look at the buttons so at currently our buttons are you know they don't look good and they're all kind of strange looking here and in the wrong color we have a little bit of work so they're all wrapped in a container a parent container called div class of buttons so let's take buttons display Flex all right and display Flex I will pretty much make it look like it was before because they're already next to each other but we also want to have a gap value between them and a margin Top Value to separate it from this element right here so how do we get those values well let's select this hover over this it's 4.81 all right so for our buttons we'll just say margin top 4.81 REM units there we go and then we also want to put a gap between them so a gap between here and here is 2.25 so we say Gap 2.25 REM all right so they should be spaced out further and they are now we can select uh this button right here and this is going to be a.cta the class is CTA as defined right there all right so first a DOT CTA we have a few things that we can pull from here um we can pull this all right now let's see what that does I'm not even looking at the code I'm just looking what it did here okay it didn't give us a background color so we can see it says border radius is seven pixels which we'll we'd have to convert that ourselves and it's still given as pixel values so if we save this it should be a little bit more close to what we want except the color isn't there so we're gonna do color white as well all right and let's get this here and here all right and then we just have to get um rid of this this underline so text decoration none all right we can go back yes delete the video all right so it did a pretty good job um out of the gate for us the font size like I said is actually not showing up there and that's because we have the font size selected here so we have to import um or copy rather a few of these as well so I'm gonna paste those right here don't need the font family font weight we can leave line height we can leave as well if we save it there we go now it is pretty much identical to this button here now additionally we have the final element which is no do not delete so that is a class called secondary CTA so let's do a DOT secondary CTA and then we'll click on it and it's actually fairly straightforward I we have a font size font family all this stuff let's uh paste it in the text decoration um is already underlined we don't need to worry about that um if you remove the line height you might actually affect um the spacing or the white space around it so we're just going to leave that font family don't need that um color we do need that so let's save it and it's almost ready except it's up too high it's not kind of centered how it should be now these are flexbox uh children so what we can do on this child element is just say um let's see it is a line itself Center I'm fairly certain that's the right one there we go and now it's aligned up and this is it so that's how you essentially use the visual studio code figma plugin and you can do the same thing of course as well outside of the editor in finger itself in the dev mode so it does make it speed up life a little bit better it's you still need to understand CSS um and understand you know the various CSS properties and how they all work but essentially this is a nice you know quick way to get your REM units um all accurately in your spacing accurately translated over into the browser alright everybody if you enjoyed that make sure to subscribe if you haven't yet and I'll see you all soon with more figma videos especially about the recent updates goodbye

Channel: DesignCourse

Views: 48,867

Keywords: figma, figma dev mode, figma devmode, figma dev mode tutorial, figma tutorial, figma 2023, gary simon, designcourse, config2023

Id: wk9xSDNboZw

Length: 19min 13sec (1153 seconds)

Published: Fri Jun 23 2023