Figma VSCode Extension!! Convert Design to Code!

so figma just released an amazing new features and now we actually officially supports for you to convert your designs into an actual code going from like HTML CSS and react also they release a new AI plugin that allows you to create from svgs renamian layers generating text and images as well as a new vs code figma extension so let's go ahead and see how you can use this in your AI plugin as well as how you can turn your designs into an actual code and react components so just a couple of days ago figma had held their annual conference the figma config which brought absolutely amazing new features and an outstanding stuff that are coming to figma from like features Acquisitions and stuff more and especially for us developers they have an amazing set of features tools and extensions they bring enough for us as developers so the first feature that we are all excited about for us like developers and designers is actually the dev mode so figma introduced a new mode that is called div mode that allows you to actually to toggle between the design and the div mode and once you are in the dev mode you can basically become a developer and you can see like code so when if you select like a frame or a design or a button it just gives you the CSS code and you can just copy paste it and that's all of this just officially supported by figma and the other awesome thing that happened is figma actually acquiring a new team called the diagram team to bring AI to their platform so yes you're hearing it right so figma actually just had an acquisition of the diagram company which is a company that actually offers a pretty set of awesome tools and plugins for figma that utilizes AI so if you go to diagram.com here you can see basically what this one brings and their most awesome and capable plugins called magician and they have a lot of other amazing plugins they utilize AI to help you build better designs alright so let's start and explore Dev mode and try to actually convert this simple design into an actual prototype that works in HTML react CSS with styling with Tailwind CSS and see if this is actually a really great mode or not so as currently there's actually the standard mode where the designer mode as figma calls it so here you are in design you can control the design you can move stuff or you can edit stuff in design mode but as soon as you go on the top right hand corner in here you're gonna find the toggle that says Dev mode so once you just simply click that just toggle that one exclusively everything turns into a greenish kind of theme and figment it starts giving you a lot more kind of like a developer needed kind of information so that's cruising here as soon as I click on something in here it tells me like oh where is the width the height um it tells me okay it's exactly in pixels it is okay a text also it tells me in here like you know margins or patterns inside there is a bunch of stuff for example if I click in here because here what I'm using I'm using Auto layout and what I mean by all layout in the CSS word for us as developers is simply just a flexbox inside of the figma design so here it tells you all the information about like what is the margin the pattern in here and you can utilize all of those so I screw this in here as soon as I select something for example you select the login card on the right hand side in here actually seen here I can just maybe you know make that a little bit bigger for you guys so you can see it so as you can see it tells me what is the actual code but you're also going to actually change and switch between different stuff for example if you go to this drop down where you select the code it can tell you here I have already selected Tailwind GSX but you can actually select compose Swift you are if your iOS Developer or css in here if you select CSS exclusion here it just gives you all the CSS properties as you can see it's already telling us oh this is an inline Flags it has some padding in here and REM because you can choose as well what is the actual whether you want to use pixels or something it tells you that the alignments that Gap basically just gives you the full CSS so all you're gonna do just copy paste that one and from the parameters you can select whether we want to you know put them those in pixels or REM in here or what you want black opportunity equal unit you can set a custom one and if you want to do react or if you want to do a custom thing with Tailwind as you've seen me doing it right now you can go to the drop down here actually there's a couple of plugins there is you know a bunch of plugins in here and what I tried what works for me the best is these two plugins figma to code Auto HTML now thing that's a code in here if you click on it it's actually allows you to select plethora of stuff like going from Tailwind GSX to react GSX or HTML or the second plugin in here which is also pretty great so once you select that one excuse me it just takes a little bit of time to load and there you go it just gave us the code but the thing in here it doesn't give you actually a Tailwind so it's like less reliable compared to other plugins my manufacturing here it just gives you CSS so you can use you know regular CSS if you want or if you want Tailwind as I you know as your like web developers love that you can just go back in here and actually use the second plugin table and GSX in here and there you go so it just gives you you know the full GSX that works in react all the class names in here have like 10 win stuff and you know you can just explore all of those so I can just go and top in here copy it and I can get back to my vs code so here I have like a simple react project here that runs on Veet and for this one I have just a login component so this is actually where I want to put my design so let's go ahead and try this one I can just go ahead and do return return the full Devon here um so as you already can basically notice that it has already some stuff that are duplicated but that shouldn't be a problem right now so everything is good I can go ahead and save and right when I get back into this one there you go it just gave us the full design in here it has the same layout there's actually some stuff that are broken like for example the text in here that doesn't have the full width but that's very easily fixable but at least we've got the same layout the same colors everything is put in like the same way for example in here for a you know a GitHub logo we don't have that because you know you can't just put your GitHub logo so you have to go ahead and download the asset by yourself so you have just to go put bats in That Into You know the design stuff you click on here for example you choose the GitHub logo whatever logo you have you can you know preview in here you can just export that as JPEG or something and you can simply import that you know GitHub logo on top of there and you get back in here for example for the SRC I can just choose the up logo and it can just simply work like that of course it's not super perfect there is some glitches that you probably need to fix but but eventually it all comes down how you design it so if you have your design in here in figma pretty well made for example uses Auto layout which is you know the same representation of flex layout and CSS so if you know if your design is pretty good pretty well layout in here it's pretty you know put together it doesn't use absolute positioning it will perfectly work and you can even actually select Standalone elements that you can convert them 1.1 for example like an input in here it just gives you the code for example text in here just gives you the code but one thing I noticed that I really didn't like is actually it converts everything into a div for example in here in input this should be an input right but it doesn't it doesn't put that as an import I think this is actually more of an improvement that you need to put work on I mean you can actually switch and change to an input once you copy paste that into your you know vs code you can just switch it into an input but that actually beats the you know the idea of just converting design into account when you just have to manually go through that actually debug it so there's actually a couple of glitches and downsides in here but after all it's pretty good actually for a prototype and actually copy paste in and the dev mode now makes our lives as you know designers for slash developers quite easier the other awesome thing they released for us as developers is a really awesome vs code figma extension so the extension here allows you to view your you know designs in here side by side with your code editor so once you install that one and you can find a figment here from the left hand side you click on it you log in with your figma account and you're gonna find all the projects or your like you know figma designs in here all of them even like the ones that share with your team and you can click on that it's gonna open on the side in here so you can easily view the code and the design at the same time and of course this this is actually by default enabling the dev mode that you see you know on the figma website that's the same thing enabled in here excuse me like when I hover over it or go trying to see what is the text it just gives me all the details in here down here with you know the different stuff and then the codes with assets for example you can switch that for example CSS that there's one thing plugins doesn't work just yet but they actually gonna go ahead and support that in the near future so now we're gonna have to you know can be able to view is actually just CSS layout in here but I think that's good enough for most people so I think there's actually a really good extension so you can put it side by side and actually start working you know your designs the same way in here on the code editor instead of like having it side by side with your Chrome tab or with figma installed on your machine something like that I think this is more professional meant for developers kind of thing and the extension of vs extension is a really really nice step ahead now the last thing that's actually coming in and is super exciting to figma It's Gonna Come and being developed in the next couple of weeks and now because they require the you know the a diagram kind of team in here which they've been behind a really awesome extensions they released daily and like some of these extensions are still in developments and some of them are like in beta like this magician kind of like uh plug-in it's not an extension sorry so the magician plug it in here if you go to magician.design you can install that right now you can try the BNA for like 21 days and you can just work with it and see how it works so if you simply just go to plugins and here like just search for you know magician you can find magicians right here click and click on it you can click run in here and you're gonna find the tab so once you get the type in here you can have you know pull through stuff to do right now and more are coming soon so squeezing a version is like literally the first version that was released in here with the problem beta so for example you can try the magic icon so here you can put whatever you want and actually you can generate for you at SVG ready icon so let's say for the login in here I want to generate so let's say for the logo right here I just want to generate like a lock sort of a drop down just to put it next to my header title in here so for example we can do lock I can go in and search for that and yes because it's still looking better so they have you know it takes a little bit of time to load them but I think they are working on this and exclusion in fact just click on an icon it's just going to vectorize that for us and generate that for me and indeed There's an actual real like it's not an image it's more of like an SVG so it's a real SVG so if you go to the color in here color palette and you can just change the color like completely change the color for example you can just put it you know next to the login in here or maybe on top like inside of the login I don't know and I just you know mess with that one but this actually looks pretty good so you've got an icon in here it's full SVG if you click on exclusive it has a vector on top in here so it's full SVG has been generated for you on the fly right into your designs with a really nice plugin and there's actually a poster of different features that you can try for example magic copy this allows you to generate text so you can do uh you know welcome to login page or something and this will you know go ahead and just generate for use same thing can do with chat gbt or some that sort of like you know AI by the simply just give you like a couple of suggestions depending on the text you have so this will just you know save you some time or prototyping and having different variants of stuff and texts and there's another one like where you go and actually generate an image you put them in here and it's going to generate for you and image so the same thing you know with other different stuff but there's really awesome you know tool in here which is Magic rename that I really like and it just like helped me since I started using that one which basically go ahead and renames all the layers for you if you select for example I'd say have this login card right it has a bunch of layers and all the layers in here doesn't have a really you know understandable kind of clean names so what you want to do go ahead and select that one you do magic rename you click on this and exclusion you're just gonna you know select a particular card or you know a frame and this will go ahead and rename so you can click on that one and we'll go ahead and take it like a couple of seconds they already told you that we're working to make that faster and there you go now if you notice the like the names the layer names and you have to change completely change now they are a lot better for example this is heading we have got form in here password input they actually generated all that for us so as you can see here password form a user icon different things I really really like that one it's like just magic you select a frame it just renames that for you and I think this is super helpful for us as figma developers or fake my designers particularly because we just like to put stuff and it's very hard to rename them sometime and I'm pretty sure this throw is going to be super super loved

Channel: CoderOne

Views: 195,194

Keywords: figma, figma for vscode, figma vscode, figma vsocde plugin, figma vscode extension, figma desing to code, design to code, design into code, code from design, figma AI, figma plugins, figma AI Plugin, figma SVG plugin, figma generate svg, figma chatgpt, chatgpt figma, figma dev mode, figma config, figma conference, figma to react, design into react, figma to css, figma to html, figma to swift

Id: sNK-cPmnx94

Length: 12min 28sec (748 seconds)

Published: Mon Jun 26 2023