How To Use AI To Convert Figma into Code
Other Videos📅 2025-01-08
Transcript
[00:00] so you have your figma design and you want to turn it into code we looking all over the Internet for the answer to this question and everything just seems too complex that's because no one knows of this new strategy I'm about to show you on how to take a figma design like this and turn it into code using artificial intelligence welcome back y'all in this video I'm going to show you how to take any figma design that ever existed for any context any language and show you how to turn it into code for this process to work all it will require for you to have is access to an AI chatbot Claude Gemini Chad gbt personally I'm
[00:30] going to show you this strategy using chat gbt so let's do it okay so I have this little UI element here of this nice little shirt step one screenshot what you want to transfer over as code so for me this section I'll be transferring over screenshot now with that screenshotted let's go ahead and jump over to a react based project so we can import this code so I'm going to be in cascad here just to Showcase how to do this but obviously you can do whatever you want to do and however you want to import your code so coming over to Chad gb1 here let's go and attach this image
[01:01] with the image attached here we want to Output it in the specific code that we like I don't know what that is for you but for react apps that's JS and CSS if you want the best possible answers in this process and in this step make sure you customize Chad gbt in order to optimize your outputs what do I mean by this check out the description down below check out that video right there I show you how to use custom instructions this is where you put stuff like hey I want to make sure my output is using JS and CSS hey hey we use a python based
[01:31] backend like very very fundamental context stuff you want to show up in the code here for now though watch this before I show you the code output here if you feel like I'm skipping steps here and you're like whoa whoa what is this guy even doing right now like what did I even just click on let me take a step back and show you a video that you should watch if you're genuinely interested in turning figma into code that's this video right here it's 3 hours and 11 minutes long of free content that shows you how to take designs and tournament to code and to actually deploy them to a real website
[02:02] link I'll make sure to leave this video in the description down below a little card up there as well I took this website right here on webcafe a.com I give every basic fundamental front-end development practice from taking designs turning them into code that we can just deploy to a real website link and the best part is that as you can see it's mobile responsive and tablet responsive let's go and turn this figma design into code AS on this image created file for product. JS and product. CSS copy it exactly and with all the code use this
[02:33] image as a placeholder import pancakes and pancakes. PG this is just a pancake image I have in my react project pancakes hit enter so this is going to be able to take any element that you provide there when it comes to front to development and just shoot out the code this is pretty cool stuff here and it's very fast this method and strategy also works with the Chad gbt 40 model so here we go we got our JS file but whatever language that you want to Output it as simply ask that instead so we got a product. Js here I mean look how lengthy it's getting y'all I'm going to go and copy this code make sure I create just
[03:04] the product. JS file and the CSS I will paste it here save if you don't save it's not going to reflect properly coming down we got our product. CSS copy all the relevant code paste it in our file and then within at least react base apps to render it we're going to import it tab command save then tab again command save make sure we are currently running so at least for react apps this npm start so I'm just come here and just do npm start scroll over and boom this is version one not bad I mean I did this within like 30 seconds y'all what we
[03:34] have so far here is that we're using the placehold images right here right here and we also got the relevant copy that we saw over there let's keep working here so the first strategy I suggest you do is screenshot this and we're going to do this we're going to say okay this is the design we got I'm going to add that image ready to see what we want changed so first I'm going to load this chat with just context of what their code even looks like perfect then I'm going to re-upload the original figma design so one thing I'm noticing about this figma design is that it looks like it's
[04:05] using a width of around 1,200 pixels or obviously it's more condensed also we're getting pills over here for The Chew size the colors are a circle rather than a square so this is stuff we outline to chat gbt here to see in our design so what was wrong with that element we identified it okay let's make it look exactly like this so please ride both entire code files again notice all the elements are spread apart so do a Max width without ,000 pixels also for choose size make each option in a row and as pills and better color UI for
[04:36] color make each option a circle crop and for the product at a slight shadow in the background and slight round corners where did I get all this information from that's basically what's incurring right here hit enter if you want to learn like more in-depth ways of approaching the strategy in this new age of coding check out that 3-hour video as obviously within 3 hours I show you from start to finish zero lines of code how to deploy a full-blown website based on other websites designs like for example like the little top part I copied cursor AI so we're getting the entire new code file here I'm going to go and copy the
[05:07] JS paste it over we will then copy the CSS and paste it over hit save for both if you don't hit save for both it's not going to reflect and there we go that's our second prompt to making it look closer to how we had it in the figma design keep in mind y'all if I wasn't recording this this entire process would probably only take me two minutes to get to this point so obviously we got a couple things going on here the che size looks a lot better than it used to the select colors is a circle crop but I didn't identify want it in a row so we can do that next we can go ahead and maybe increase the font size there add
[05:38] the little side images to be closer to right there and keep going here so what we can do here is simply copy this again this is not a necessary step but sometimes it's just nice for chat gbt to see it again they want to see how they want to see the beauty of frontend UI so goinging back over to our chat here we're going to attach okay looks great but I also want you to notice like how unstructured these kind of prompts are when you're just talking to Chad gbt in front end development you don't have to use perfect grammar it isn't like do these steps do this context it's very much just like hey I need this this this
[06:09] give me the code proceed okay looks great but make the color Choice a row for the circles and also for the three images to the left of the main image have it closer like only 10 pixels away enter I want to use as much lame indication here as possible just to give you context like hey you don't have to you don't have to prompt perfectly okay you don't have to be a full-blown prompt engineer what's really cool here is that this entire process not only is the time Associated very little but the traditional cost associated with this kind of work if you used fiveyear upwork would be thousands of dollars so if you feel like you learned something make
[06:39] sure to leave a like it's completely free it helps me out here same deal copy JS paste over copy CSS and there we go obviously the color swatches could probably be under select colors here but this kind of gives you the situation of what we're going for so we got V1 V2 is V1 exact to V2 obviously not but that's because I only spent three minutes on this using this strategy though you'll be able to get an output exactly like this probably with 30 minutes worth it work so I'm saving you time I'm saving
[07:09] you money because in reality I think maybe the possible services to do this for you are like are either annual subscriptions monthly subscriptions are just like out the Wazoo kind of money also this process gives you Insight that frontend development is changing in the way we approach it in this new way of coding with artificial intelligence so there you go take any type of design you see on figma or the internet and automatically make it into code you can start using anywhere and don't spam me in the comments saying Corbin you skipped too many steps like what's even going on what's a react what is the meaning of life no but if you actually
[07:41] want to see a full depth in tutorial showing you this new way of coding that was only possible two years ago check out this three-hour video as this is a new age this kind of content couldn't even exist in 2021 it wasn't possible pretty cool those are two random videos that's my face I'll see you in the next video