Can you go from Wireframe to Pixel Perfect? UI Challenge

What's up everybody? Can you take a wireframe like this and take it into Figma and then complete it by completing the colors and the structure and making it hi-fi? Well, that is the actual challenge today. We are going to use UX Pilot and there's a link here that you can use in the description to follow along. And I'm going to show you how to use it to generate wireframes, but you can also use it to generate hi-fi as well. But for our challenge, we're going to generate a wireframe and then I want you to submit it to my ongoing AI native design series challenge series which is free to participate at designcourse.com to show people how good of a designer you are so that you could take a wireframe generated UX pilot import it into Figma and then go ahead and complete it yourself with your own design skills and submit it to that ongoing series and I will do some reviews based on who enters. So, let's get started. Okay. So, after you use the link that is in the description, you have to use that one specifically. Um, and the reason being is because it unlocks the ability to export to Figma and all that stuff during this demo project and the challenge. Um, we can come here and I'm going to paste in kind of like it's a very simple almost like a summary of a PRD. Um, and this is based on landscape, which is the demo project that I'm creating in the course right now that you can take on how to build an AI powered SAS for landscaping. Um, and so what I want to do is just describe it. You know, you can you can, you know, include your D, your PRD as well if you want. And what I'm going to do is just hit generate for now. And what ends up happening is is it it doesn't actually generate a design yet. We have to choose exactly what we want. Okay. So, what I want to do is I wanted to have it, if I switch over to studio tab, we can choose right over here, um, we can choose the mode, you know, hi-fi or wireframe. Hi-fi being like it's going to be the full polished version. We want to choose wireframe for this purpose, although you can completely use hi-fi as well if you just want to jump right to, you know, a more polished version of the design. Pixel perfect, aka. So, but but here's the thing. um when it comes to your SAS or whatever your project if you're really you know serious about it you want to see ideas um and so that's the purpose of wireframing and then we're going to go ahead and take that and elevate ourselves within Figma um for the challenge so we're going to choose um as well we're going to choose let's see we'll do mobile right here and so it's going to be wireframe based mobile and you can see over here we have single screen and our prompt and in our prompt here specifically. And just to be safe, I'm not sure if I it's actually going to pass in the context of the PRD. So, I'm going to paste it there um just in case. And right down here under design system and variance, I'm choosing variance 4. All right. So, it's going to give me four different ideas for the actual mobilebased dashboard wireframes that it produces. So, let's go ahead and generate those and see what it comes up with. All right. We can see the first one's done right here. And this only really took about like two minutes or so so far since I you know hit generate. Here's the next one. Again, different approaches um to you know that basic PRD that we had. And let's take a look at this one here first and then we'll take a look at all four and choose which one that I really want to work with. So yeah, there's a credit system. Um new projects, search projects, that's fine. That makes sense. And then you know the way this is split up is there's different projects per residence. So this would be it makes sense to have an actual larger format uh sort of thumbnail for this project, not a small one over here. So I already prefer this one over the other ones. So this one is a strong first candidate. This one right here I Yeah, I mean it shows you more with a small little preview that could work as well. So the next step after you actually have your wireframe generated and you choose the one that you want, come right over here and click on copy for Figma. All right. So what that's going to do is it'll literally just copy it. And now we can just paste it into Figma itself. So here I am in Figma, Figma desktop. I'm going to go ahead and just controlV. There we go. Guess what? It works. Awesome. Okay, this is this is sweet. So, so now I can come in here and make my custom adjustments and mainly this is going to involve, you know, changing colors. Uh, that's the primary thing I want to change. Of course, you can change structure and all this. Um, sometimes these, you know, get imported incorrectly. So, this is a little bit off. We'll have to fix that. Um, and essentially the goal is to go ahead and make this um, a fine, you know, 100% version of what it will look like, a pixel perfect design once it's realized in a browser. And of course, this will involved primarily with this one since I already like the layout for the most part, adjusting colors to match the scheme. So, that's what I want you to do for that challenge. Now, I am going to show you a time-lapse version of what I would do with that design. um because I don't think anybody wants to sit there seeing me, you know, trying to choose a million different colors and and combinations, but I'll show you a timeline in a second, a time lapse of it. Um but real quick, one that's one thing that's very cool about UX Pilot is that you can obviously take these and create a hi-fi version of the design if you're not a good designer. So, if that's the case, all you have to do is once you have it selected, you see this toolbar where it says generate, just do generate hi-fi. All right? And this is going to give this little model up right here. And this comes with a predefined um kind of prompt right here telling it to create like a hi-fi version of it. And I'm just going to go ahead and hit generate for that. Actually, I don't even want to see theirs. I want to see if mine is better first uh with what I come up with in Figma. So, let's do that time lapse right now. All right. And there you go. Okay. So, this is what I came up with. You know, I don't know, maybe it was like 15 minutes or something. Um, taking this right here and, you know, integrating the logo and mainly just changing the colors. There's a few things I changed like the new project button just to a plus right here. Um, but this is basically it. You can see I did modify the topography um, a little bit over here just to create a little bit better grouping. I still kind of want to fix this area over here. But nonetheless, um, that's the process. Like that's what I want to see you do. See, I want to see how you could take this wireframe and make it into a more polished version. That's what the challenge is. So, um, if I come over here, let's see what the, uh, UX pilot did. Ah, okay. So, it went dark mode and I told it I did not tell it to use any type of color. So, it just automatically went to dark mode, which is fine. As we could see though, um yeah, this this is something that would work if I wanted a dark mode version. I like the uh the panel how we have slightly different, you know, colors here. I Yeah, this actually works pretty well. It integrated a a nice feathering effect here at the bottom of each of the uh thumbnails. So it would be really cool just to take this and say you know give it to you know our own custom colors that we want and yeah so obviously you can use UX Pilot as you can see to generate and just kind of skip the the manual process if you're not much of a designer and that way you're kind of just you know you have something that you can then go ahead and take and copy into Figma and then maybe use the Figma MCP server to actually make an HTML CSS version of this thing that works in a browser. So go ahead over to designcourse.com. The top link here is in the description. I want you to participate in this particular challenge. Uh use UX pilot with the special link that I gave you to generate a wireframe, take it to Figma, and then update it and then go ahead and upload a screenshot of what the wireframe look like versus your polished version. That is the challenge. So hopefully everybody enjoyed that. I will see you all very soon with another video. I'll be doing reviews of your submissions that you submit to us. And I will see you all very soon.