Visual Copilot Converts Figma Mocks to React Fast and Accurately

all right so stop me if this sounds familiar you've got a really good looking figma mackup that you want to turn into react nextjs Tailwind code but you're kind of like it's going to be a hassle because you know that there's going to be a lot of grunt work along the way to make that conversion and just to build out the HTML itself well I've got good news for you there is a fantastic plug-in that I found for figma called visual co-pilot it's from Builder and it's going to save you probably 80% of your time in that conversion of going from figma to HTML and leave you as any good AI should with a really exciting work of web development which is building out the application let's get right into [Music] it all right so here we've got our example it's a two page layout notice that we have just the desktop layout here not the mobile layout you've got a homepage and then you've got the products page looks pretty good so far so let's go and select the product page and start converting that first so I'm just going to go over here to our development mode and then I'm going to select the Builder IO plugin and then I'm going to select the page I want to convert so that would be their homepage looks pretty good so far so let's hit the generate code and notice it has that nice little callar at the top that it's going to make it 50 to 80% faster to do this conversion it's not saying it'll do everything but it's going to give you a really good starting point all right let's have a quick look around so I'm going to zoom out a little bit and we can see that we have both the desktop layout and the mobile layout and I got to say this looks really good so thumbs up on the AI nicely done sir and you can see it's already doing some of the mobile work for example this feature product Carousel here Maps into the featured products down here in the mobile view and you can see how it's going from a horizontal layout here to a vertical layout there just as you would expect so it's going to be doing a lot of that responsive Workforce which is a huge Time Savings all right now let's go take a look at the code that it's created and see if it's any good all right so we got down here got our code and just as a first pass I think this actually looks pretty good it is developing that for react and Tailwind you can select different Frameworks for example quick or solid or view angular what have you and then you can also select how you want to do the styling I've chosen Tailwind I guess which is the default there's also emotion style components so you can do your CSS however you want that's cool and then there's the fast quality selector so if I go to Quality this is actually a pay War upgrade it's going to take the original llm output so I believe what Builder done is they've actually gone and trained their own llm is a deterministic llm that converts the figma mockups into code they actually have a way to run that again through GPT and further refine that code using this quality option it's going to be slower but it also gives the ability to do this additional AI prompting at the bottom and they give you some examples for example like uh use props or break it into multiple components and then it's going to then run that code through gbt with that prompt and hopefully give you some good results from it so that's really cool but for this example we're just going to stick with fast so Builder is a CMS system but you don't actually have to use the Builder CMS in order to make use of this tool you can actually just have it Go and create these Builder CMS Pages for you and then you just do the copyed clipboard and you take it and put it into whatever application you want so let's go build a nextjs application take the code and put it in there some to use create next app to build our app and call it shoe app and we use all the defaults including tailin CSS we'll bring it up in vs code and let's go over into source and then page. TSX and now we're going to go and replace the entire contents here with what was created by Builder just paste that in there and then we'll remove the react and then I'm going to export this as the default function we'll call it home and remove the props and now we'll just give it a go we'll bring up our terminal do pmpm Dev and go take a look all right it's coming up it's a little bit slow and that's because these images are actually coming out of the CDN so over here you can see that when it's generated the image tags it has brought those in from a CDN so what I've done is is I've created a handy helper script it's located in the description right down below in a gist and it's going to go and grab all of these images download them locally into the public directory and then replace all of these image tags with image components from nextjs pretty cool right so let's go and bring in our little script tag so this is the download images script again you can get the link for that in the description right down below I'll go raw I'll grab that and then bring that over into our app I'm going to create a new directory in file scripts download images. JS paste that in there and now we can see at the top there's some documentation on how to use it so what we're going to do is we're going to take the original source file so that would be sourcea page. TSX we're going to pipe it through our new script that's this script right here that we're looking at and it's going to one download all those images and it's going to create react that has those image components from nextjs can put all that out standard out which will then pipe into PB copy now PB copy is a handy little OSX helper app that basically goes and takes whatever comes in standard in and then puts it into the paast buffer so we can then paste it into our app so let's hit save here and then just grab this whole script bring up our terminal run it and now we can see if we look over into public we can actually see something really cool it's actually downloading the images as we speak it's really neat combination of pngs and svgs but now those are all going to be local right so that's going to be a lot faster so let's go and get rid of that and we don't need download images anymore but we do need the paste buffer that it just created so I'm just going to select all that hit paste fingers cross and it worked so cool all right so we can see that turned the image tags into image components and you probably want to go and change out these image names obviously they're just guids that's not particularly informative also want to change out the alt text over here but otherwise i' say looks pretty good so let's uh let's try this out so let's do pmpm Dev again and we'll go back over to our Arc and then into Local Host and let's just do refresh and boom a lot faster I mean the initial load is a little bit Pokey because the image tag is going to go and try and create I guess multiple versions of it but much much faster so very quick nice to have those images downloaded locally so cool all right so the next thing we want to do is we want to go and because we've got a shared header between this page and the product detail page we want to go and take that shared header and move that into the layout so let's go back over into our code and figure out where that shared header starts and ends so down here these images are as far as I know these little buttons here so the header ends about there and then where does the footer start and end so the footer all the way down here has categories in it so let's go look for categories there we go categories here's probably our logo so there we go everything between those two line braks is our content so let's go and copy that go to layout so in here we want to go and take that children and we want to go and wrap that in the header and footer so let's return a couple times we paste that in so we're going to go take children down here cut that and then replace everything within those two lines nice now we need an image tag so let's go grab that from the original code all right looks good so the layout side is good now we need to remove the layout from the original code so I'm going to go and replace this with a fragment and then get rid of the header and the footer leaving just the content okay looks good all right so now our page has just the content our layout has the header and footer ideally you'd want to go and take the header and the footer and move those out into their own components I'll leave that to you so we'll save here see how we go and it save and everything refresh and everything looks good so let's go and do the next page so that would be the detail page I'm going to create a new route here called products and then a parameterized ID and then page. TSX and you know what let's just export a default function and return hello hit save okay let's go back over here and we'll go to products one and there we go where's hello where probably white text so let's hit class name text block and there we go hello nice Okay cool so we've got our container the layout is doing what the layout should so let's go and take the contents of the product detail page from figma and Route those through it we'll go back over to our figma and if we look at the page right if we gotten everything then we get the header and the footer so what we want to do is get just this section in here so let's see so that's group seven there's a footer down there group six six group seven not 100% well organized but it looks like group seven is what we want so let's generate code again this is a smaller subset so it's a lot faster to generate looks really good and of course if I wanted to I could go here into quality and make any changes that I wanted to using gbt let's just stick with the fast so I'm again I'm going to do the copy here copy to clipboard and and take it in here and again export this as our default function and just because I know I'm going to need it I'm going to bring in image hit save let's see how do we do all right looking pretty good and look at that that is great nice okay got the header got the footer beautiful love it all right so so let's go and do the fix up where we download the images so we're going to cat our implementation file so that would be the source app products ID page. TSX we'll pipe it through that node scripts download images and back into our copy buffer so bring it into PB copy looks good all right let's hit save all all right let's go go let's see if I hit paste looks good got all the image tags let's try all right awesome so now everything is out of the CDN it's in our local application it's under our control fantastic love it all right so as you can see a really nice way to get your initial start on your application code but of course there's so much left on the table for us as web developers to complete this people keep talking about how AI is going to take all our web development jobs well I mean how much is left to be done here so I mean think about it first off designs aren't always this easy so this is a pretty reasonable sayane design often times you don't get that from figma figma is so open-ended you can do all kinds of stuff and honestly going and turning that into Tailwind or any kind of actual implementation in HTML and CSS can be more of a conversation between you and the designer and the product manager as a what's feasible so an AI isn't going to have that conversation that is up to you to have so right off the bat there is some work for you as a web developer now next up would be responsiveness now it's done a really good job here of doing a basic responsive layout but there's a whole bunch of unknowns when it comes to nav do you want a hamburger menu for with a carousel of featured products down here like this one you may also like is that going to be responsive how's that going to be responsive and when it comes to things like this Carousel here is that the same Carousel as we wanted to use here down and feature products do we want to reuse that so there's questions of reusability and maintainability and then of course there's the 800lb gorilla in the room and that's the implementation so this is just images there's nothing behind the scenes here so we've got to go and hook this up to microservices probably for the nav to get all the nav menu options for the products to get all the product information both on the detail page and on the homepage we got to connect it to e-commerce stuff so you can actually buy things we've got to make it accessible we've got to make it internationalized there's just a whole bunch of implementation left to be done here and that to me is the real value of stuff like visual co-pilot it's gone and done all of the grunt work for me so that I can go and do what I like best which is going and building the application that has this awesome UI on top of it all right well I hope you enjoyed this quick walkthrough of visual co-pilot if you have any questions or comments be sure to put that in the comment section right down below I'm doing a full nextjs course called projs dodev go over there today and go and sign up for the newsletter you will get a full course on state man man in nextjs for free by signing up in the meantime of course if you like this video do me a favor and hit that like button if you really like the video hit the Subscribe button and click on that Bell and be notified the next time a new blue collar coder comes out

Channel: Jack Herrington

Views: 71,038

Keywords: figma black friday, figma design, figma ui, figma app, figma plugin, figma community, figma to react, figma to react code, vite, react vite, swc, flowbite, zustand react, vercel, react 18, server actions, nextjs, nextjs 14, nextjs server actions, react js, react.js, reactJS, mobx, next js, nextjs react, jack herrington, next js 13, vite react, reactjs, react app, react component, react router, react typescript, react hook, visual copilot, visual copilot figma, figma to nextjs

Id: DttZuqAiuR0

Length: 15min 43sec (943 seconds)

Published: Wed Nov 29 2023