Hi everyone. Uh, an update video. Um,  they've changed our inspect mode to this dev mode. Um, it's kind of new. It's in beta,  it's out in the full version though. Um, the one thing to note about it is  that it used to be inspect here.

Now it's this toggle switch here. You get too, kind of the same place, okay? But with bonuses. So it's nice. The other thing to note is  that at the moment it's what's called an open beta, so  everyone can use it, okay? But there will be a time in the future, okay?

That their plan is to make it a pro only. So you might end up having inspect  or a cut down version of this dev mode, okay? But at the moment, everyone can use everything. So let's get into the pros for it. Alright? The biggest pro is that it's designed kind of more  for development use, whereas  before developers could get lost even in an  inspect mode, they could get lost.

Kind of like looking around  like especially if your document looks like this. They're like, what do I do? Okay, so what you can do now as a designer, okay,  so we're still in design mode. Um, we are gonna use sections, okay? So it's in use for this as well. So sections we've looked at, I'm gonna grab this  and I'm gonna put it around something that I want  to identify for my developer.

Let's say it's this, uh, frame here so I can draw a box  around it, okay? And the difference  with sections now is that you might've seen it. There's this like little thing here, okay? It says mark for development. If I go to my arrow tool, I can click that. Okay?

So ready for dev. Okay? So I click that and nothing really changes in this mode  except when I go to dev developer mode. And this is for you developer, right? This is the version that they're meant  to view your design through. Okay?

What ends up happening is,  see on the left hand side here,  there'll be a little coaching for your developer  to kind of get 'em used to it. There is a ready for development section. Okay? So when they open up the document and it looks like this  and they go, oh no, okay,  over here there's just this one section  that you could name better than section one. This is my weekend screen, so I'd name it as such. They can click on it and they can go to it.

So that's really cool. How do you get this  to your developer? Okay? So you  as the designer are in this blue mode, green mode. Blue mode, okay? So you're in, uh, this mode here.

If I go to share at the moment,  I can only kinda share links in bed, like the normal stuff. But if I go to dev mode  and go to share, I can say copy the dev link. Okay? That just means they come to this app, okay? But they'll come to it via this green version. So they won't have to go into design mode  and then toggle the switch.

They'll just go straight to here  and like if you have something selected like this here,  okay, you can link to a selection. So they can go right to it  and maybe not confuse people too much. Alright? So that's the first thing you can be  clear about what's going out. Okay? Rather having a separate page  that's maybe ready for dev.

You can just put a section around it and say, do this. Now let's jump to this file. It's a little cleaner. Um, the next most interesting  and useful feature for a developer, Kay,  whether you are using it to develop  or probably, you know, the, the next person in the kind  of line, your developer who's  Taking your design and building it is,  let's say I changed the color of this button  to this other variable, okay? And you send them a design, you say, this is ready for dev. Okay?

You don't actually have to put this section around  that says ready for dev. It's just like a helpful thing, okay? You can leave it as is and send in this file, okay? But they get this version, okay? And they're like, what have you done? Okay?

What you can do as a developer okay,  is you can click on the frame  and you can go to this option here. You can see it was edited by us a minute ago or a day ago  or however long it was. This thing here is very cool compared changes. Okay? So you can see there's my button on the left,  the button on the right. Okay.

So side by side comparison versus overlay depends like  a color change is gonna be tricky to do  'cause the overlay makes this, I don't know,  you can just drag it back and forth. Can you see that makes it easy. Okay. See the colors side by side might be just as useful. The other cool thing is down here,  can you actually see it's got a history of,  let's say my main button here. Okay?

It shows me that the previous one, okay,  the fill color was this and it was using this variable. The current one is this other color,  but using this variable super handy. And then you can go back through the changes  and just see like maybe they haven't seen it  for like 10 changes and they're like, man,  this looks nothing like I touched it. They can go back through to the one they last saw. Okay? So that is super helpful.

Other general things is  that it makes things easier for them to select. Okay? So in the past, um,  especially if you've got auto layouts inside of groups,  inside of frames instead of frames inside of groups,  it can be quite tricky to get in  and get the things like icons. So watch this. I can just do one click  and I've selected the plus button. It, it kind of disables some of that levels, um,  deeper level grouping for them  because they don't want  to know, you know, all the kind of groups.

They just want the icon. They can click on it  and just go straight to it. Okay? See the general stuff that we saw when we used  to have inspect just by itself, okay? One of the changes is that you can, as a designer  or a developer, link to the resources, okay? That you know your GitHub library.

It might be you can link  to Asana if it's a job program you want to connect  to just things that, um, like it could be documentation  around like implementation  of the button in your design system. Okay? So you can link to those. The other thing is that's more typical,  depending if you've done web design  before this border box is a way that they'd be used  to seeing things like if we click on this here,  they'll be used to seeing the padding  and border expressed this way. Same stuff, just more developer friendly. Um, the other thing is down here, some of the code  that they might use, okay, it might be great  to copy and paste some of this out.

Probably not. They're gonna probably rewrite it  or use their own kind of flavor of what they're doing. But it gives them a sense. Well, it's really easy to see what you've done. Okay? The other thing is, is that we're using CSS.

They might be using one  of the app development, uh, frameworks. Okay? And they can switch between something  that works better for them like normal, the styles, uh,  colors they can go through and export this. So let's go and have a look at this. They can go, they've got this plus button. They can come down here and say,  Actually actually let's give me this.

Okay? Uh, I got this icon,  it's an SVG, I'm gonna download it. And the developer has it ready  to go if you're not sending it to them directly. Other kind of more normal stuff is that when they hover  above stuff, they don't have to hold down any of the keys. Remember earlier in the course we have to hold down option  to get things like the spacing and padding, okay? For the developer mode, you just hover above stuff.

You don't have to do anything. And you can start to see  all the um, things including, um, like us,  we're using padding card. Remember that variable, okay? Um, don't have to do anything. Just comes up nicely. Another cool feature for developers is  that we spend some time earlier on in the course making  these components to have properties.

Remember over here we could say actually we want  the, this card. Okay? We had lower,  we had a large version, we had a small version. We had one with the price off. Okay? So different versions of it.

How do you communicate that to the developer? Normally through documentation. Okay? But now under dev mode,  what they can do is they can click on it,  they can see all the different properties that you've got. Props, okay? And you can see here price large, actually  what you do is you go into the playground, okay?

And they can mess with it  and they're not gonna mess with your design. 'cause in design mode, if you switch it round, it kind  of stays at that mode, okay? Whereas in here, you can mess with it, break it,  change it, okay. Work out what's gonna happen. And then when you close it,  it's not affecting the design option. Okay?

Just a, it's a playground. You can mess with it and get a sense of what you,  the designer are looking to do these different options. So that's a handy feature as well. Last couple of features is  that under code settings they can switch uh, units. Okay? So developer can be probably,  if they're doing web stuff, probably dealing  with relative uh, measurements instead of pixels  that we use here in Figma, they can switch that.

Okay? The other one is plugins. So there are two sets of plugins here. There's plugins that they can use. I say they, 'cause it's the other person. I'm not a developer.

I can do a little bit  of front end stuff and copy and paste code,  but I am not a proper engineer. So, um, there are stuff for the div  that will be useful for them, okay? For plugins, okay? To help, you know,  get stuff outta Figma for them. The other set of plugins is actually Figma has a plugin. Probably the most useful one is vs.

Code. Vs. Code is a very common um, text editor for developers, okay? And there's a Figma plugin for that, which is really cool. Okay? So you might advise them on that  and it kind of brings in some of the design  features into VS code so they can pull stuff kind  of like dev mode, straight to vs code rather than kind  of going from Figma  and you know, switching between applications.

So that's a cool little uh, plugin as well. Just remember at the moment everyone can use uh, dev mode,  how they're gonna implement it in the future for pay,  you know, the unpaid people. Okay? We'll have to see what that is  and we'll have to update the video, okay? If it's a big change. But  otherwise at the moment everyone can use it,  but will be a pro only feature dev mode.

Alright, that is dev mode. There you go. I'll see you in the next video.