Unbelievable AI Tool Converts Figma to Code🔥

in this video I'm going to share with you a game-changing AI tool that will quite literally 10x your productivity now if you work with any type of designer then you know that typically what happens is they work in some kind of figma file right they do all this fancy design they make it look great and then they send you the link and they say go build this right they just kind of dump it on you and say build this in react build and react native and you do all of the coding and the layouts and all of that kind of stuff now that's fine but it always seemed a bit silly to me that I had to do that because figma is already well structured right we already have things kind of laid out in groups components all of this stuff why am I just taking this figma file that already looks fantastic and going and writing it in code and then continuing what happens when we want to change a button color or the design changes now all of a sudden I gotta go look at the new figma figure out what change and then go change that in the code now fortunately I'm not the only one who felt this way and that's why now there is an AI tool that will take your entire figma file and translate it into code so whether that's react react negative and it doesn't just give you a bunch of garbage kind of boilerplate code it gives you real functioning code that's reusable and looks just like a human wrote it if not even better stubs of the different function calls it allows you to have interactive elements it's a complete Game Changer and the name of this is locafi now the best part is this is completely free and locify has even sponsored this video so for me this is fantastic because this is a free tool I don't need to tell you guys to buy anything it's awesome it's something I would share with you probably for free and I'm gonna get paid for it so just wanted to let you know they are the sponsor of this video take that for what you will regardless I'm going to give you a quick demo now and show you how locify works really it's a low code tool that's just meant to increase your productivity it's not replacing programmers or UI designers there's still a lot of stuff that you need to do with the design but it's saving you all that upfront design work and kind of manually translating designs into code all right so the way we get this set up is we simply open a figma file this is just a plug-in for figma and you go right here to where it says plugins go to find more plugins and just type locify now you can install this you see there's about 80 000 people using it already probably a lot more as this video is going live anyways I'm going to click on run and it's going to pop up this extension or plug-in for me now what you need to do is connect your account so I'm going to connect to an account and then we will locify this file all right so I just connected my account here and now that we've done that what we need to do is create a new project so I'm going to go here and go to new project I'm going to go with demo app like that then you can select the framework in this case I'm going to go with react because this is a web application you guys can pick you have next gaspi HTML CSS react native Etc now here you get a bunch of different options I'm going to go with Tailwind because that's what I've been using recently and I'll leave that in typescript obviously we're going to want typescript here for react okay so let's go ahead and create that project and I'll just give you a kind of summary of what we need to do here so obviously not every single figma file is going to be as easy to translate to code as others so that's why what locify will do is essentially run an AI analysis on your file and tell you all of the things that you need to fix and actually automatically fix fix most of them for you such that you'll be able to actually transform this into code so kind of the first few steps here to optimize your design to tag the interactive elements you can edit some of the styling do like hover effects and that kind of stuff then you can add actions you can say I want this button to go to this page I want this pop-up to appear so you can actually do quite a few things here that typically you'd only be able to do from code you can just do it directly from locify then you're going to sync this to the Loca 5 Builder which is kind of the online IDE which then allows you to push that to GitHub make pull requests branches Etc but generally what you're going to do here is going to optimize the design do the interactive elements edit the styling Etc so let's go through step one here and optimize our design now this file is kind of already set up for this demo so quite a bit of this is done already but you'll see there's a few things that we can change so here it says remove unnecessary groups and Frames so this will get rid of any unnecessary nesting really that you don't need notice that we can fix individual elements or we can just press fix all so I'll go with fix all here the AI just does its job I don't really even need to think about this too much and then I can go to the next step here which is to convert groups into frames so we have this group object instead we want to frame okay let's fix that again I don't really need to think too hard about this I can just kind of let it do it and then we have applying best practices for images and rectangles so now same thing AI does the analysis we can apply all of these and then we have some more kind of complex fixes we can do here with structuring the frames we actually don't need to do that for this design so for now I'm going to go done with this fix you can see it kind of says pending fixes I'm going to say done with that because I had the home page selected all right so now that we've done uh those main fixes and we've kind of optimized the design the next thing to do is tag our interactive elements so I'm just going to go and select my home page up here okay let me just make this a bit bigger by the way too so I can kind of see what's going on here all right and now we have the option to either auto tag or to select different elements so what I'm going to do is go select my button here because I have a button this search flights button that is not tagged yet so I'm going to kind of Click into this so now I'm on search flights and what I'm going to do is go and tag this so to tag this I'm going to say that this is a button but notice I have a bunch of other things I could tag this as when I do that it gives me an option to select any of the different components from my UI Library so this is essentially saying I want to use a material UI button or an ant design button in this case I'll just go with none and then I have some other options here but for now we'll go with none okay so now that I've tagged this button you'll see that if I click on preview here in locafi what this will allow me to do is actually kind of hover over top of this button and see that this is an interactable element so it takes a sec to load the preview here but you can see now once it kind of loads that if I hover over this I get that kind of mouse action indicating that this is an interactable button whereas for something like this it's not interactable I just get the normal Mouse so you can go through and kind of tag all these different elements that's what the designer would do for you it's automatically going to stub all of the function calls and event listeners as well so that you can then go and kind of hook it up after and do what you need to do with the more advanced logic now we also have the ability to auto tag so if I press on auto tag AI again is going to analyze the entire document uses something called Loco Ai and it's going to show you everything that you should be tagging now you don't have to tag it obviously it can make mistakes but it's quite useful and I also will show you here all the things that are already tacked so this again is kind of set up for the demo purposes obviously you'd normally have to go through and tag some more stuff but in this case it all needs to be suggesting us a few things so we have these two little icons here that we want to tag so yes that is a button okay so let's tag that as a button so I'm going to select none for the UI Library okay let's tag this as a button as well because that's a button and then this is a form so we can go ahead and tag that as a form we can fill in all these properties but we don't really need that right now okay so now we have completed tagging and we now need to do the styling and layouts so if I go to my styling and layout actually first let's do a preview and I'll kind of show you that obviously what can happen sometimes is you can have your designs not being responsive enough so maybe when I shrink the screen or I make it too large the layouts kind of get all messed up so here you can see if I take this and I kind of shrink it you'll notice it looks really weird in this main section here when this is too small so what I can do is actually set different break points here just like I would in CSS and then I can change the different layout at those different break points so what we want to do is we want to take this kind of search container here and we want to make it so that this is a vertical layout rather than a horizontal layout such that everything will kind of Stack all nicely so let's do this what I need to do is kind of find this element so that I can affect the layout so the element for this is going to be the form input row so now that's selected here then what I'm going to do is go to the tablet breakpoint so that's kind of what it looks like right now I'm going to change this to be vertical now when I change this to be vertical we'll give it a second here and you can see it automatically kind of fixes the layout for me and now I have search flights down here and as I start getting smaller you can see that everything kind of scales as it should and looks all nice all right so that's what we'll do for now we also could go to like the button and we could add a hover effect so if I go find my button here so let's close the preview and select the button and then let's go edit styling you can see that I can go to hover and I can do things like change the color so I gotta find where my color is it's right here okay let's make it like a bit darker all right that's done now if we go to our preview okay and we hover over the button you should see that we get that darker color so here now you can see when I'm hovering over search flights now I got the hover effect and again we can do some other stuff here but that's fine for now okay so let's get out of the preview and now we go down to Action Now inside of actions you can do things like scroll into the view change the page you can open an external URL open a pop-up I'm not going to go through actions we don't really need to set anything up for right now so now that we're done all of that we'll actually sync this to the Builder which is kind of the final step where now what we're doing is handing off from UI to the developer so I'll click on sync to locify Builder it says we can do all of the frames or the selected frame in this case I'm just going to do the selected frame which is this one page that I'm working on the home page but obviously you could do all of them at the same time if you want for the projects demo app yeah that's correct okay we can change this if we want to at this point but now I'll leave that there and I'll go to view code and Builder so we'll give this a second to run then I'll start kind of showing you the code how we do the components and whatnot and how we can push this to GitHub all right so this is finished syncing now I'm going to go to view code in Builder now again at this point this is where the developer would kind of Step In it's kind of an IDE for them and you'll see that they can actually view all of the different code and I'm not going to go through all of that all right so we've loaded up here you can see that I've got all the code available to me now and it's automatically created a few main components for me uh for the different pages that we have so we have the home page we have this Matterhorn pop-up uh portal pop-up Etc and you'll notice if we come inside of here it's already stubbed some of the different states and some of the different actions that are going to be performed for us now as we go through here you can see that not everything is uh kind of in a component right now so what we do need to do as the developers decide what we want to be a component which is kind of The Next Step so here it says uh kind of create components so let's just look at this step again can I go back out of here it says make components configure the code and then sync export or deploy now if I go to make components it should actually automatically give me some AI recommendations here which it is for the 12 different components that it thinks that I should be making now I can set these change them Etc but it even specifies what the different props should be so in this case it's talking about these kind of containers saying this should be the flight main container and then these are the different props and the values that we're going to have for those props so I'll go ahead and accept those two instances now it's saying we want to have a trip container so I'll accept those ones as well Hotel container and in fact I'm just going to accept all of these because I'm pretty sure these are all good I can obviously change them after if I want to so now this will create components for all of these different things so now we have our main components we can go change the props if we want to or kind of view through them so now if I go back to the code here by just pressing on this button up at the top you'll see all the different components in the entire project essentially and we can start looking at the different components that have been created so we have the trip container right inside the trip container we have all this different stuff and then again we could continue and make more components if we want we have the portal pop-up we have the hotel card container specifies all the different prop types why we're using typescript so it automatically puts all of that inside for us and this is doing a really good job at making this actually flexible enough that as a developer we can go in now and adjust things and change things so now that we've used the AI to create some automatic components for us I'll show you that we can manually create some as well so for example maybe we want to convert the profile photo or the notification or actually the section there inside of to a component well the way we can do that is we can find find where that is in our tree so in this case the account section is right over here so we can press on the account section and then we can simply go here to make components we can press on Create and then we can go to make component now notice whenever you have this little link icon here this indicates that something is component so the search section is a component the top header is a component Etc so if I go here and I click on make component I can make the name so let's go with account section and click on Create and now we've converted that into a component so now you can see since we have the link here this is a component and we can look inside and see the code for this individual component now obviously I can go add props and styles and some other attributes to this component if I want but for now I think that's all we need so now what we can do after this let's go back to the next step is we can configure the code so we can specify if we want to change it to JavaScript CSS modules Etc in my case this is fine I'll leave it how it is and now we can actually export this code if we're happy with how it's looking right now so if I click on this we have a bunch of different options right we can sync one component we can sync all the components we can do the entire project we can also export them so we can either sync with GitHub we can export as something like a zip file or we can deploy the entire project something like netlify versus Cell GitHub pages and just automatically be able to see our design kind of come to life so that's useful for anyone who is a designer now you don't really need to know much about code you just press a few buttons let AI handle it for you now all of a sudden you have a live production application and you didn't even have to write a single line of code anyways let me go to sync project with GitHub which is what we'll do I'm going to connect with GitHub kind of go through these steps and then let's have a look at the repository alright so I've synced with GitHub and I'm just going to make a new repository I'll just call this locify demo like that okay okay let's go confirm repo and branch and then it's going to give us the ability to push all of this to GitHub so we can kind of choose what files we want in this case I'm going to go with all of them so I'm going to push that to GitHub let's give that a second and then I'm going to show you what happens if we have conflicts because lokify actually has an AI tool that helps you handle conflicts between the design and then whatever you've actually done in the code from say your local machine alright so I've just opened this up in GitHub now you can see everything was created for me I'm just going to copy the URL for this and I'm going to go now clone this and then open it up in vs code make a change and then show you how we can handle the conflicts from the loca5 Builder alright so I've just opened up the Clone project now from my local machine what I'm going to do now is just make a change in here push that to GitHub and then show you how locify can automatically handle any of the conflicts and keep the design in sync with the code which is a pretty cool feature so what I'm going to do here is go to where I have this search flights button and I'm just going to change the color so rather than having where is it BG orange I'll just go with BG black and then I'll simply change this to say flights finder or something I know it doesn't really make sense but we're just doing some simple changes so now we'll just make a commit we'll say kind of change button and then get push origin main like that okay and now this will update the repository alright so now that I've made a change here let me go back to my figma file actually I'll start making some changes in figma I'll re-sync that with the Builder and then I'll show you kind of what happens here in terms of the conflict resolution which is automatically handled for you so let's go to this button here okay so let me click into this we're going to go to edit styling and layout and I want to change the color of this button so how do I do that go to normal scroll down okay color let's make that something like this kind of pink color okay we'll go with done and then we'll just sync this to the Builder so let's view that in the builder then I'll try to push it to GitHub and show you what happens all right so it says this is ready so let's go to the code Builder now now from here all I'm going to do is just sync this directly to GitHub because I've kind of changed the color of the button so let's go here to sync and we'll go sync project with GitHub all right so notice here as we try to do this it actually pops up and tells us that we have some conflicts we also have a modified file inside of Tailwind so what I can do is click on my search container here which has the conflict I can go resolve conflicts and then I can go through here and see all of the changes that are on locify as well as which exist inside of the repository just like I would inside of a normal kind of GitHub UI right so in this case you can see that I've just made a change to the background color here it says BG pink and then here it's BG black so I have to decide what I want to accept here sorry so I'm going to accept the GitHub change which is on the left side and on the right side would be the locify change okay so that's pretty much it I'm now going to mark this as resolved and then I can complete the merge and the push so just like we have have kind of a conflict resolution for us in vs code we have that in locify meaning now if a designer does something inside of the figma file you can actually go in and decide what you want to keep or what you want to change so if I want to push this here I just select the branch name in this case it's main I gave it access to main so it can push directly to it and now we'll see that those changes will be applied inside of the repository all right so with that said I think I'm going to wrap up the video here this is a really cool tool as you can see we literally went from a figma design to a fully functional project in just a few minutes this is something I'm definitely going to be using as a part of my startup even though this was a sponsored video I hope you guys got a ton of value from it and you're able to check out this completely free tool by clicking the link in the description or by checking it out with figma now just as a last Point here this isn't something that's designed to replace you as a programmer it just meant to kind of accelerate your workflow and allow you to spend more time on the complicated logic and hooking things up and apis and all that kind of stuff as opposed to doing that General design which again kind kind of should be automated for you if a designer's already doing all that work why are you repeating it now and just translating it into code this is a fantastic tool I hope you guys enjoyed the video if you did make sure to leave a like subscribe to the channel and I will see you in the next one [Music] foreign [Music]

Channel: Tech With Tim

Views: 272,765

Keywords: tech with tim, convert or export figma to swift ui, convert figma to flutter or react ui, convert figma to html and css, convert website design to code, turn figma design to html code, ui design to code, figma to code, turn figma prototype into code, design to code, figma to html website, figma to code plugin, figma to code for free, figma to html, figma to responsive website, sketch to code, ui design code, figma ui design, design code

Id: ZymXD46f7R4

Length: 17min 45sec (1065 seconds)

Published: Tue Jun 20 2023