How To Use AI Art, Figma, and ChatGPT To Create Websites In Minutes (One-Click Method)

AI guys we have to talk about it and we need to talk about it in terms of what it means for us as designers web designers uix product designers we need to know how this is going to impact our work what is going to happen how can we use it to our advantage so today what we're focusing on in this video is one the most important pieces what this means for us as UI ux designers how GPT in general the technology how it's going to advance heavily and why we need to find ways to incorporate it into our workflow we're going to talk about one of those workflows today literally how to use mid-journey chat GPT and then figma AI to build a website literally from zero to 100 and probably less than 15 minutes so with that said we're going to be talking about that but more importantly I really want to share with you guys this image right here okay this is this is gbt version three today versus gpt4 which is not far away at all and how much more trained and more information is going to be really able to uh bring to our lives guys this is exponential technology that we need to be able to understand be able to know how we bring into our workflows so that we are efficient and we can work better faster and uh just longer so until the AI masterminds uh take over no I'm joking but we need to learn how to use these things and more importantly once you guys see this picture I want you guys to see something else this was kind of I think last year so now that we talked a little bit about GPT we need to talk about figma and what they are planning to do with AI guys figma just purchased a company called impera empira is an AI focused company that I'm just going to read off right here off the screen for you guys take a peek so we're excited to announce that the impure team is joining figma at Imperial we've built machine learning products at scale we've learned the importance of user experience and bringing Innovative products and Technology to Market figma's vision is to make design accessible to everyone and we will see a natural fit between our two products we want to thank our customers investors and employees for their support over the years it has been an honor to learn from each and one of you and grow together we look forward to what the future holds together with us at figma guys this is a huge power move not only for figma but I want to show you guys one other thing this is what kind of stopped the world in 2020 there was a plug-in that was for figma that you literally just like we're doing now with Chad gbt in mid-journey how you're prompting and Building Things there was a plug-in for figma that was not released publicly it was demonstrated that you can type in a prompt for a UI ux mobile website app doesn't matter you simply in this plug-in in figma you wrote a prompt of what exactly you wanted for a website design what have you it would create in vectors the website app design that you wanted I'm gonna put the video here so you guys can see a little bit of how it works but this was a show stopper in 2020. this was not released to the public but this was two years ago that this technology was here I want you guys to keep this in mind think of what we just started off this video with gpt3 what that looks like in comparison to gbt4 I want you guys to keep in mind how figma is thinking about AI first going forward I want you guys to keep in mind this plugin that was just mentioned in 2020 that was very baby technology then we are now in 2023 I want you guys to think about what is going to happen in the future and when we do get prompting to allow us to design literally with words not with our mouse and keyboard okay now what we're going to show you guys today is a step forward in that direction using mid-journey using chat GPT and using figma to create a responsive website literally just with Clicks in in a few minutes so follow me along while I go through this entire process go using mid-journey for inspiration using chat GPT for our copy and then using figma to use simply a click to build a responsive website with no code in editor X so let's dive in okay first we are going to start in our community Discord we actually embedded mid-journey in our Discord so all of our community members are actually creating websites or inspiration for websites here live as we currently have a competition going on but I want to jump to a prompt that I use to generate this it was very simple all you have to do and if you're in our Discord it's very simple if you are in our AI generation Channel all you need to do is go forward slash imagine and write the prompt I'm just gonna do ours again so modern shoe website black Sleek UI ux web design UI u x dash dash AR one by one so we'll go ahead and do that we'll give it a wait and it will pump out exactly what we need so right now it is currently generating what possibly could go with this prompt now I am going to stick with this this is what we've already designed but I just want to show you guys how simple it is to bring in a prompt get nice inspiration for your UI ux design project and be able to take these and produce assets so let's actually dive into that so I'm going to jump into figma show you what I actually did and I'm going to also show you how I use chat gbt which is also in our Discord right here and we can actually use it to produce brand names slogans paragraphs copy for our website but let's jump over to figma very quickly so as I showed you guys before in our Discord here we did get these as our prompt outputs I love the design I love gold as you guys can see but I basically copied these I saved image or copy image and I brought them into figma these two in particular and I also generated a couple other ones but basically what I did is I went into Photoshop I just copied these I brought them into Photoshop and maybe you'll see a little bit of that process here and I just cut out the shoe and I also cut out other individual shoes as well all I did from here is I put in my text here is heading or a slogan a paragraph graph as well as other paragraphs here now for our paragraphs in our heading our slogan in our paragraph what I did here is I simply went to chat GPT all I have to do is simply ask our bot that we are currently training we just have to go to forward slash ask me hit enter I'm trying to come up with a luxury three suggestions here we go here are three suggestions for a luxury shoe brand name lug sole Excellence the Footwear Boutique and now I want to have a slogan for these so basically ask me input can you give me gave me sure here's a slogan step into luxury with Luck's Souls perfect ask again ask me can you create on this Brand's website welcome to Lux Soul where fashion meets Comfort our collection of a luxury shoes combined with style and quality give you the perfect Footwear for any occasion from classic leather loafers to trendy sneakers we have something for everybody step into luxury with Luxe soles so this is how I generated the brand name the slogan as well as the first paragraph on our website and simply all I did was pick my fonts and copy and paste okay now as you can see I very much took a lot of inspiration from our very first uh design here we basically cut it out using Photoshop and I have four other shoes which I generated using again mid-journey and I got four other prompts now let's talk about how we make this site into a real live site in just one click so in figma if you guys haven't already tried or even know about editor X it is a no code platform for designers and agencies to be able to build there or bring their designs to life without any code edorx just released the editor X plugin a little bit ago that allows us to take our artboards in figma and bring them into editor X as they are so what we're going to do is we're going to go to our plugins here I already have my editorix plugin here and we're just going to run it it's going to ask it's you know turn your designs into a website very easy I'm going to go ahead and get started and as you guys can see it pulls in my typography Styles my colors as well as my media and shapes all we have to do is export to editor X and it's asking me to grab the URL for my figma project so I'm going to go ahead and go to figma I'm going to go and grab my URL paste that in and I'm just going to hit export and now what is happening on my other screen here I'm going to place it figma to editor X start turning your design into an editor X website so it loads for a little bit it's checking my files your designs and assets including media styles and more will be uploaded to editor X all we have to do is create site it gets a nice little bit loading it starts from zero percent and it will let you know know when the site is complete at a hundred and there we go guys this is our from figma to editor Rex everything is the same and we have all of our Vector art we have all of our text which is editable here everything is the same we can change this if we want we have our image we can move this around if we desire everything is in its place as it should be now that is the power of using Automation in no code and AI to build the next generation of solutions digitally so all I'm going to do is I'm gonna go to publish I'm going to call this luxol and we'll go to the website let's view and there we have it guys we have our beautiful website Luxor shoes we have step into luxury everything is looking absolutely beautiful and of course we'll have to add a little bit of functionality if we want to build a slider but this is beautiful guys this is everything that we have put into our figma file and literally at a click of a button brought it into editorix and it is a live site all brought to you by empowered by editor X so ladies and gentlemen this is the next generation of how things and web designs and in Solutions will be made digitally designers no longer have to work with developers everything will be streamlined using AI using prompting using you know automation tools like this that are built into figma there will be a whole bunch of plugins things like that that allow us as designers to just build the design solution and everything will be pushed and automated into live Solutions so ladies and gentlemen that is it I wanted to share with you guys the possibilities and the ease in which designers web designers we will continue to have as the future progresses we literally created a website using mid-journey as inspiration we then used chat GPT for all of the copy on the website and we simply extracted the assets that were made in mid-journey brought them into figma produced a artboard that then we just clicked a button and it created a fully beautiful website in one click that is the process moving forward as design and it's going to continue as GPT and as AI continue to become more advanced this workflow and the way that we work is just going to be more and more automated and automated we need to be able to work faster like this I build a website with you guys in literally 10 15 minutes in total this entire video so with that said I highly recommend you guys continue to Deep dive into AI see how you can embed it into your workflow and I cannot wait to see what more comes our way as AI progresses as tools start implementing more AI Solutions and just allowing us to make way better Solutions cooler things faster with all the technology at our fingertips so with that said AI is here to stay AI is not scary it just helps us build better Solutions faster as we want to solve more problems out here in the world so with that said guys if you like this video do not forget to subscribe like the video and share this with your friends on the interweb so that they can see how easy it is to go from inspiration to building something and then building it live living product and just a click of a button again if you want to see the full process of making a responsive website with editor X click right here with the same example and you guys can uh enjoy it there alright guys take it easy have a great day bye

Channel: Editor X TV | With Brandon Groce

Views: 27,074

Keywords: creating a website with ai in minutes, create a website with figma, create a website in figma with one click, brandon groce, create a website in minutes, ai website, figma website, create figma website, create ai website, how to create ai website, how to create figma website, figma and ai, websites created with ai, How To Use AI Art, Create a Website In Minutes, create a website in minutes with ai and figma, creating a website with figma in minutes, make a website with figma

Id: hx1ZsyIBr7s

Length: 12min 19sec (739 seconds)

Published: Wed Jan 18 2023