Figma Dev Mode is here!

hello my friend and Friends big mud Dev mode has just launched it's getting a lot of hype and if you're here on my channel you're probably a Dev so you're probably going to be using figma and getting stuff out of figma files so I figured it would be fun to dive in and see all of the cool features that people are very excited about as well as one pretty big downside that I haven't heard as much about as you might expect first though we're going to start off with the good things like new units we can use Rems within figma now which is so exciting we can link it to GitHub there's a whole bunch of other stuff that's just really really cool a bunch of new plugins uh new Integrations there's even an extension for vs code and that just brings in some better user experience and stuff if you're getting stuff or working with figma and coding which I'm assuming you are and so actually let's jump right into figma which I have opened here and I actually ended up with Dev mode by accident I I went to check something for somebody and had this pop-up come on screen luckily I took a screenshot of it so you can see that now because um I it doesn't seem to ever pop up again or if there's a way to reset it I haven't figured note but it'll give you an option to run through some of the stuff there's like a few steps there and then once you have that up though you can you can always change what you've done and your settings there and actually most figma stuff is over on on the right side here so we're going to focus on on this side of things um and if you're if you're in a regular figma file there's this new Switch that's right here now in the top right that you can toggle on and off when you toggle it on you go into Dev mode and if I turn it off you can actually see that the like the colors of stuff change the icon up here changes and the a few the layout changes we got all sorts of new stuff to explore I've made a really simple layout here that we're going to sort of poke around with um just to get some ideas and I have a few versions of this so we can see the cool things that come with it oh and also if you're more of a shortcut person you can do a shift d to turn Dev mode on and off as well because we all like shortcuts right so the first thing is if nothing is selected you can actually change your language so if you chose the wrong one at the beginning you can you might not see this we'll talk more about this later this is a plugin that I have installed uh that you may be interested in and then here you can have your units to pixels and actually if I do that and I come look here you can see the spacing is in pixels you're going to just select Nothing by clicking off of anything and then I can change my units over REM and this is so nice uh you don't have to convert stuff it just does all the conversions for you so you can see everything is in rem now so I have a two Ram of spacing between those things here I have 0.75 Ram if I click on something I can actually get the border radiuses that are over here and now those are in uh you know it's eight or actually that's still in pixels that's interesting um but all my units here you can see the Border radius is still in pixels so for me that's that's actually really interesting um I didn't notice that but everything else is in Ram all the spacing uh the font sizes are coming through in rem that we can see right there so there's a lot of different things that are said in Ram which is really nice except those border radiuses for some reason and I'm wondering if there's other little things that might come up as well so one thing here though even though um it is kind of interesting that we have these at in pixels we're going to get to a point soon we're going to see that maybe that doesn't matter so much because we can actually have these saved as variables but we're going to get to that in a little bit um the other you know other interesting things are here that if I click on something we do get the Box model that also comes up so we can see if something has padding I didn't add any padding on any of these things but you get your padding your border and the size of things here and you'll also notice that we're getting some CSS here I'm not a huge fan of the CSS that it outputs but it's much better than it used to be because the CSS that it used to create here was terrible uh it was all position absolute everything there was lots of stuff in there that you would never want to do here it's just really over-reliant on display Flex it's just throwing Flex at everything even like sometimes you have like one text box like this one it's a paragraph uh you can see it's a display Flex I also don't like that it has like you know I don't need this I don't really need that either um so just because it's doing that doesn't mean you should be you know the layout stuff here is a little iffy stuff like this though is super nice the font size is in Ram the font families there uh the line height I wish it would take the percentage line height and just do it as a 1.6 but at the end of the day or 1.65 I guess in this case at the end of the day it doesn't really matter um so whatever it just become such a standard to use unitless units for line height and it translates to percentage really easily so maybe that would be a change they could make down the road that I would really appreciate just so it lines up more with how people generally write their CSS since that seems to be the direction they're going with this anyway but we can copy things and then paste it in and make modifications or whatever we need to do but we're going to see there's even better ways of doing that with and we'll get there we'll get there there's cool stuff that we'll still explore but just as a quick rundown here you can see how this is kind of neat you don't change stuff like here I'm moving around if I click and all of that and that's kind of cool another thing is getting assets is a lot easier if I come down onto this image I can just download that as the PNG jpeg or PDF here um that it was always not difficult to get assets but it's a little bit easier I still the thing that drives me nuts if there's round corners here it gives you the PNG with the round corners and stuff which I really wish they would just give you the image that's cropped to the right size or whatever I don't know just not with the round corners so I can do that in CSS instead because then what's the point of the Border radius so it's kind of annoying on that front but that's nothing new that's just how it's always worked I don't know how you'd export otherwise you know I'm sure there's complicated stuff going on there so getting a little nitpicky but yeah speaking of the code and it is much improved over what it used to be is if people go the next step and they actually do things properly so here I have a second file I've made some components but you'll actually see here I have a section now on the side here and sections are kind of interesting it's not like a section of a website it's like you can create sections of like here's like this part of the thing but it's also for like ready for development so you can see here it actually says ready for development I'm going to remove that so you could come into a file and it might have like 100 you know you have all these art boards all over the place and you're like okay I'm supposed to be focusing on one of these and you're hunting it down a little bit well now the designer can Mark stuff is ready for development and it's just going to highlight the parts that are ready to be worked on um and you're going to get these sections that are ready for development and you know I think these can have names too I'm instead of section one section two and all of that so then you can just go to the section that you need to be working on so it's a lot easier to find what you need to work which is really good and so then say I know you know I may as I said I sort of made a component and then did some other stuff with it the cool thing here is that you'll see if I come in on this component um if I get the spacing on here look at that it doesn't show me the spacing and REM like it was showing me before it's showing me a space small which is kind of interesting right and let's go and look at the layout that I made over here where okay those are actually using variables so I don't know why it's showing me too but there we do see the space small for sure um and actually let's switch on over back to the regular mode just so I can make a change in here so if I go on these um and I come take a look at the side here it says 12 which is the space I used but if I go to apply variable I save some variables so space small let's do extra small and it's going to get smaller and now if I go back to Dev mode and I take a look we actually see that that is if I can get it to load up or even actually if I click on the the component itself and I come and look in here it even has the Gap as a variable of space extra small and the 0.5 Ram which I just set it to now this is something that I'm finding a bit weird with their variables because let's come back actually let's just change this one as well to see because I know I use the variable here let's go apply variable that's my space large let's just do space small for fun and then put this back on and see if it highlights it differently so it's really interesting I changed it you saw I was using the variable but it's still showing me 0.75 so maybe there's a few Kinks that need to be worked out still but here we definitely see the space extra small coming in on those so that's kind of interesting even for colors as well if it's saved you can see here it's a color of primary 800 but it also has like the fallback it's a I guess it's just their way of making sure that you're getting both of them I just find it a little bit strange um you know because ideally this is what the variable is actually set to so almost like a comment at the top like we have our H3 maybe it would make more sense I'm not entirely sure but um it's still better than it could be uh or was um if we go back to here as well just display Flex the width you know these are the things you have to be careful with the Align items we'll get to that in a second it's kind of interesting because they sort of um support a flex wrap now which is kind of cool the other thing actually this is what I want to say is we have our colors and our spacing which will come through as our uh as these things the variables um for typography they don't they didn't change it to variables it's still the same style system that it used to always be before with figma but if you save a style in the code it puts the comment of H3 because that's what I called my style and then we get the The Styling of that so here I get the color that's there and then I get all the body styling that comes here um so all the stuff that was saved as part of that typography style because this caught me off guard if you save a style as a if you click Text and save it as a variable it's actually saving that string of text as a variable which is kind of cool if you're doing like prototyping because you can save your icons and stuff and it makes it easier to iterate through different things um and like get different previews of stuff and there's some cool stuff with that that's good for prototyping but it was just unexpected for me when I created it and yeah so we have our sections now that can be marked as development I know sections can also be used for prototyping as well so if you have like different sections you can actually have it like go to the different sections for the way that Pro the prototyping works and the flows between prototyping the sections can also be used for that but I'm more focused on on the dev perspective of what we're looking at here another interesting thing actually is when we come in to do something we can also see changes that were made which is kind of cool so say you were like you get here and it says like ready for development and you're like okay what am I supposed to be actually like doing I got this desktop is what was assigned to me in my Sprint or whatever there's this compare changes button now so if I click on that it's actually going to check for the changes since the last time you saw the file and it's going to show you the different changes that are done down on the side here now in this case it's not the best examples so I'm actually going to jump over to this other file this is sort of their demo file that you can play around with a little bit and what I did is I made a change in here so I think it'd be a little bit more realistic to what you might actually find so this has it's a really good thing you can run down they explain stuff you can play with their file and everything so if I come and I look at this world of peas here and we go to Dev mode right so if I come and I click on there whoops so I'm working on this welcome screen so I can click there I see compare changes come up here and when I click on that I actually get to see the different changes that were made um so you can see here the thing I did was change the background color so it makes it really obvious but you can click on the different thing in a bring brings you to the part or actually I did two things I changed the background color and I changed the Border radius on here so I see here the color has been changed the variable is it was this it changed to that it's used it went from my line variable to my lavender variable if I come here I see the Border radius went from 0 to the 48 48 48 and stuff so you can see the different changes you're not hunting down within the file to try and find the little different things that were changed along the way which is so nice because hunting through a figma file to find like a four pixel difference in a border radius is not what you want to be doing so the fact that you can easily find changes is really good and again I would if you want to learn more experiment or play around I'll link to the article that has this demo in it so you can play around with it because it's a really good demo if you want to spend some time on it so again I can click on these different things and I can see the different changes that I made along the way but a lot of it was just I was creating it so it's my positioning and stuff which isn't um so exciting the other thing that's really cool here is you might get a component like this but you know parts of this might have been used on something else and one big problem is when you get something like this you might not know exactly what parts of it already exist within your code base so what's really cool here is if I select let's go and jump over to my main iteration of this component here and I can see that this is actually like I've linked it to the GitHub repo so I can click on that and it's going to open GitHub and that's because I have my I added the GitHub plugin and we're going to talk a bit about plugins in a second but I can actually see the code that was used to create this and that means this exists already I don't need to recreate this maybe I'm just using that within here or whatever it's not the best example in the world um and right now I'm linking to like an scss file but you know you might have a react component or a spelled component or something and you can link directly to that existing component here and maybe there's a change that's been made but now you know oh okay I this is the fly I'm not making something new this file exists I know exactly where to find it and I can just go and make the change I need to on this post meta.scss or whatever it is that you need to be actually working on or changing or if you're building something out with pieces of other components you'll know that those already exist so you're not building something from scratch when there's already all this pre-existing stuff which is really nice and speaking of plugins if we come and look I'm going to close the GitHub one here you'll notice I have another one when you set things up that asks you to like connect to stuff but you can connect to jira there's storybook which is really popular there's obviously GitHub that is a good one to have I've also got this figma to code one so I'm actually going to run that because it's kind of interesting that you can get some Tailwind classes your HTML flutter Swift UI is coming here so if I select something it's actually going to give me the in this case Tailwind for what we have here and if I come down it's set up my colors and everything here based on the colors I use so there's good stuff here but bad stuff as well once again as I said it goes crazy with display Flex on stuff so if I click on this paragraph you can actually see like it's setting the height at 78.84 pixels uh it's setting the oh I didn't it didn't set the display Flex so I'm happy about that I was expecting to see a display flexed in here um but you know the lighting relaxed that's really cool that that's there the or that's the width and the height so like these I probably wouldn't want in there that's really dangerous to have uh the font is getting set to 16 pixels um I'm not sure yeah we wouldn't want that would we um so a few things to be careful with but it's still kind of cool that you can get some of this information coming from here you'd probably want an object fit on here as well anyway just showing that um you can add plugins that will give you don't use the HTML lens it's all inline styles that scares me but there's this whole list of plugins that you can get that can be really really useful but I think the GitHub uh jira is going to be a popular one storybook connects gonna be a popular one and probably a few others as well and that also leads us to another thing which is the vs code integration and so if I come into here let me just zoom in on my BS code a little bit um if I come and take a look I installed the figma plug-in and what the figma plugin does is it gives you a new little icon over here in the activity bar and that shows you your you just log into figma and then you get your figma files here so I can open the dev mode and check this out it's opening it in vs code um right I also actually here is from conquering response layouts the comments and stuff that are coming up on things uh so here I can actually reply to comments or see comments that are for me so all within vs code I don't have to open figma or anything like that which is kind of cool so that's an interesting feature as well and I can open vs code here but why is opening here interesting um first of all I can go on that uh one that I had that link to before um so if I go to Dev resources let me just go on the original component which I think I I thought the original component oh there it is yeah if you if I have something on the original component and I click on it somewhere else it does show me that it is in GitHub so if I go there it actually opens my file for me what uh so that's really really awesome um it just it I'm in the right project just to say I did open that product like I mean in that project from GitHub is here so I don't know how that would work if you're outside of the project but I have that folder open here I'm going to click on that GitHub thing it just opens the file for me because I'm it's it finds it within my folder which is just amazing um other interesting things that it does here if I let's do a split left if I'm looking at something and let's just come in you know when we have a bunch of stuff already but let's come in here and we'll zoom in on this a little bit let's say our actually let's come over here and get get the bigger View um so if I'm on this component thing here again you can see the code that it's suggesting here I can see the colors that were used including the different names that were used for the variables that were created so that's kind of cool again you want to be really careful with this please don't just hit like copy and then paste it in because there is stuff you probably wouldn't want this width on there you probably want to set the Gap up a little bit differently and I don't oh the 32 pixels was my vertical I have a vertical Gap set on that as well that doesn't matter the flex shrink zero like there's a few things I'm not too in love with that it does in there so let's say we actually came and made like a new card file here right um or creating that we have a blank thing because we want to do like our card component here so let's let's jump on over to the component itself again it gives us this why does it display inline Flex I'm not entirely sure but let's just say we came down we do our doc card and then we want to write display flex and you know what it's not working for me um Flex Direction we shouldn't be getting figma hints I tried this before recording and it worked and it's not giving it to me now uh but normally you'd be getting stuff from here actually showing up as code hints um so I'm not sure why it's not working give me a second but it's still not working for me I'm not sure why but I I 100 I tried it yesterday um and I'd write Gap and in this set here you'd have like the figma suggestions coming from the figma file so I don't know what I did to break that since um testing this out before the video uh there might be a simple setting or something but you should be getting code hints there's probably a setting that I need to play with but that was really cool I like that like when I was getting my sizing and stuff it was pulling from the component I had chosen but it also had it like if I when I did my border radius and stuff um let's just see if it doesn't have border radius probably not no so I was getting like the I was getting is the first suggestion the thing I had selected but then I also had the different variables that I had saved in figma so I thought that was really cool um that those were coming up but sadly uh it's not I'm not entirely sure why um probably a silly setting or something I must have must have mucked along the way um but yeah we're in vs code here and it's all working which is just super cool uh just really fast also here um I'm on the component so I uh we can also go to my Dev resources where we don't actually have any setup I'm just going to click the plus link to the code file so that right away because I'm in the cards file here I can just click on that and now it's linked to this file now the only problem is um it's not on I haven't pushed anything I um so like it's saving it to my local asset but at least that's better than nothing and once I push to GitHub I could make sure I link that properly instead of it being on my computer but you get the idea so some really some really cool stuff that's coming here and now just before we dive into the negative side of things and some of the problems I've found and the really the one big problem that we have or that I've discovered um well big depends on how you want to think about it but um getting assets again was always a little bit annoying from figma at least in my own experience so now the really cool thing let's say I need the this guy I need him as an SVG um you know we have our code here I can go to assets so just down here within this plugin inside of es code I can choose what format I want SVG was the default that's perfect I click this download button and this is the amazing part and this is probably the best part of the figma plugin because if you had just figma open on the side much of what we're doing now except for the code hints that weren't working for me uh they're all there if I click this it's going to ask me where I want to download it and it's going public images and then saving it there and I can name the file differently because well it's a grommet icon so but I can I can name it what I want to name it here and hit save but what's really cool about this is I never told it where to save this um it's it's in my folder that I did in vs code open folder and it just found my images folder I guess I'm not entirely sure how it worked I'm sure sometimes it will maybe go to the wrong place but this is where I would have wanted to save it maybe I'm going to add like an assets and svgs or whatever it is I don't know but the fact that it's in my project without me having to do anything I can change the name say that's what I want I hit return and it's saved um right that's incredible and so like so time saving um but again that's the one downside here let's download this one my image one or whatever um and actually it's downloaded as a JPEG too just to see um jpeg it does give me the settings and I think even if you're doing it in PNG oh there we go um if you there's a way of getting you know you can get your different sizes and stuff if you need the different scales for like a a picture or something or your Source set um let's save it there as well though because I want to check something uh we'll go and look at my files we go to my public images um and that you know why when I did that I didn't even have an images folder these are just the things I saved there this didn't exist it knew I need to be in public I don't know how I knew that um so it's really smart so the PNG you can see it it has those border radius and even oh yeah okay the weird stuff here is just it's the Checker pattern in the background um yeah see like just give it to me without the rounded corners on there um and my SVG is there so that's really cool you might need to clean up svgs and other stuff but still really really awesome um but as I said there's a few things that aren't perfect and one really big downside that's not getting enough press but before we get to that uh the one thing I have found and you might have even seen me at times in the video I find it sometimes hard to get like I click on this actually now it's going better um because usually like I click on here and I'm sort of narrowing down because I have groups and components and sub components and stuff but sometimes it's actually hard to select the part that you want uh like here if I came here to select this first it's selecting the entire frame and giving me information about that with like this is completely useless to me all right and then like maybe I need something in here but or I'm getting trying to get the spacing and I'm sort of like hunting a little bit and then it sometimes it's not working quite as well as like what I'm trying to get or to highlight and eventually you end up finding it as we saw here too I did use a variable but it's not showing it but honestly like that's a little bit nitpicky on what some of these issues are because overall it's just a much better experience I'm really really enjoying it I'm poking around with it but that does raise that big problem that I definitely found uh which was when I was reading about it and everything it's going this is our beta until 2024 and that's sort of where they would leave it unless you look on their website and on their website they show you this where it's a beta until 2024 when then it will become something you have to pay for and I found that like it's not really I don't know maybe it's just the stuff I'm looking at and it's all the marketing material and other things but I've seen other people diving through that are excited about it granted 100 but the fact that we you know we're going to fall in love with it we're going to make it part of our workflow and then we can't use it anymore unless you're paying um 20 something dollars a month sort of annoying Adobe bought them so bound to happen I guess um but yeah just to let you know that like if you're not going to invest that money in there just be work aware that once 2024 hits this will become a paid product and not something that we can all use for free even though I believe figma the rest of figma will stay the same this Dev mode which for us devs is definitely really amazing is going to get locked behind a paywall which is a shame but very important to know about before you make it a really big part of your workflow um just just so you know going forward but with that bad news out of the way if you do want to learn a few other things about figma and using it they're a bit older so it's in older versions of them but I do have my figma playlist that is right here for viewing pleasure and with that I would like to thank my enablers of awesome Bailey Andrew James Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 12,851

Keywords: Kevin Powell, css, front-end, frontend, html, web development, figma, figma dev mode, figma devmode, devmode, dev mode, figma vs code, figma extension, figma tutorial

Id: 063yVWoQvoY

Length: 25min 9sec (1509 seconds)

Published: Tue Jun 27 2023