 Hello, my friend and friends. Figma 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, 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 open here. And I actually ended up with dev mode by accident. 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 it doesn't seem to ever pop up again. Or if there's a way to reset it, I haven't figured it out. 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 always change what you've done. And your settings there. And actually, most Figma stuff is over on the right side here. So we're going to focus on this side of things. 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 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 just to get some ideas. And I have a few versions of this so we can see the cool things that come with it. 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 that you might 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. And I just select nothing by clicking off of anything. And then I can change my units over REM. And this is so nice. 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 REM of spacing between those things. Here I have 0.75 REM. If I click on something, I can actually get the border radiuses that are over here. And now those are in, you know, it's eight. Actually, that's still in pixels. That's interesting. 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. I didn't notice that everything else is in REM, all the spacing, the font sizes are coming through in REM that we can see right there. So there's a lot of different things that are set in REM, 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 it is kind of interesting that we have these 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. 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. It was all position absolute everything. And 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 y'all like one text box, like this one, it's a paragraph, 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. 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 rem the font families there. 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. So whatever is just become such a standard to use unit list 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. We're going to see there's even better ways of doing that with it. 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. That it was always not difficult to get assets, but it's a little bit easier. I still, the thing that drives me nuts is 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 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. 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. And you're going to get these sections that are ready for development. And, you know, I think these can have names too. And so 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 made, 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, if I get the spacing on here, look at that, it doesn't show me the spacing in 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 to, but there we do see the space small for sure. 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, 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've saved 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 component itself, and I come in looking here, it even has the gap as a variable of space extra small, and the point five RAM, which I just said 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 point 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, you know, because ideally this is what the variable is actually set to. So almost like a comment at the top like we have for h3 maybe would make more sense. I'm not entirely sure, but it's still better than it could be. Or was 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 support 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 as these things, the variables for typography, 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 styling of that. So here I get the color that's there. And then I get all the body styling that comes here. 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 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 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 the prototyping works and the flows between prototyping the sections can also be used for that. But I'm more focused on the dev perspective of what we're looking at here. Another interesting thing actually is when we come into 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 is it's a really good thing that 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 in, I click on there, 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. 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 and it 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 using it went from my lime variable to my lavender variable. If I come here, I see the border radius went from zero to the 484848 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 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 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 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. And right now I'm linking to like an SCSS file, but, you know, you might have a React component or a Svelte 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 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 dot 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 will 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 in look, I'm going to close the GitHub one here. You'll notice I have another one when you set things up that ask 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. It's setting the, oh, I didn't, it's didn't set a display flex. So I'm happy about that. I was expecting to see a display flexed in here. But you know, the letting relax, 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. The font is getting set to 16 pixels. I'm not sure. Yeah, we wouldn't want that, would we? 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 you can add plugins that will give you, don't use the HTML one. It's all inline styles. That scares me. But there's this whole list of plugins that you can get that could be really, really useful. But I think the GitHub Jira is going to be a popular one storybook connects going to 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 VS code a little bit. If I come and take a look, I installed the Figma plugin. 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. Right. I also actually here is from conquering response layouts, the comments and stuff that are coming up on things. 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? First of all, I can go on that one that I had that link to before. So if I go to dev resources, let me just go on the original component, which I think 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? So that's really, really awesome. It just it I'm in the right project. Just to say I did open that product like I'm 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. 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, we're 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. 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 string 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? Creating that we have a blank thing because we want to do like our card component here. So let's jump on over to the component itself. Again, it gives us this why is it display inline flex? I'm not entirely sure. But let's just say we came down we do our dot card and then we want to write display flex and you know what it's not working for me 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. But normally you'd be getting stuff from here actually showing up as code hints. So I'm not sure why it's not working. Give me a second. It's still not working for me. I'm not sure why but I 100% I tried it yesterday. 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 testing this out before the video. 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. 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 that those were coming up. But sadly, it's not. I'm not entirely sure why. Probably a silly setting or something I must have must have mucked along the way. But yeah, it we're in VS code here and it's all working, which is just super cool. Just really fast also here. I'm on the component. So I 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 it's not on I haven't pushed anything. 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. 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 found and the really one big problem we have are that I've discovered all big depends on how you want to think about it. But 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 this, this guy, I need him as an SVG, you know, we have our code here, I can go to assets. So just down here within this plugin inside of us 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, that 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 wrong icon. But 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. It's in my folder that I did, 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 an 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. Right? That's incredible. And so, like, so time saving. But again, that's the one downside here. Let's download this one, my image one or whatever. And actually, it's downloaded as a JPEG to just to see JPEG. It does give me the settings. And I think even if you're doing it in PNG, there we go. If 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 picture or something or your source set. Let's save it there as well, though, because I want to check something. We'll go and look at my files, we go to my public images. And you know what, 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. So it's really smart. So the PNG, you can see it has those border radius and even Oh, yeah, okay. The weird stuff here is just it's the checker pattern in the background. Yeah. So you like, just give it to me without the rounded corners on there and my SVGs there. So that's really cool. You might need to clean up SVGs and other stuff, but still really, really awesome. 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, 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 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. 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 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, 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 20 something dollars a month. Sort of annoying. Adobe bought them so bound to happen, I guess. But yeah, just to let you know that like, if you're not going to invest that money in there, just be 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. 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 an 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 corner the internet just a little bit more awesome.