I spend less time in Figma. Here's how

All right. So, what does it actually look like when you spawn a bunch of sub agents to design something in Figma based on an existing design that you want to improve? Take a look at this right here. This is a part of the course that I'm currently working on and it's a real project that I hope to monetize and it's a AI landscaping tool. Original picture, updated picture, has all these different features where you can just experiment with. Now, this UI in and of itself, I had no say in this is all AI. So, now I'm at the stage where the core functionality is already finished, but I don't like this UI. So, this is all about getting a bunch of different ideas in terms of the layout and what this layout could possibly be so that I can narrow in on one and then really make my own custom adjustments as a designer in Figma and then take all those changes and re-import it back into this page for a final version. So, let me show you how to set that up. So, I'm using Claude code for this and I have it open in the project already and I'm not going to sit here trying to read every tiny tiny thing. You can go ahead and pause this if you want, but basically I'm saying use the Figma MCP server which is already connected. You can figure out how to do that. I already have videos on that. Um, and then spawn five different sub agents right here that would design in parallel different high fidelity layout variations of this UI right here. This is what this is back here. Um, and then I just thought I want to see different approaches. I want to see one of them be like the floating UI like like like like a Figma canvas of some sort for the the picture editor and all this stuff. All right. And then also to to to use to you know, two different um, colors from the brand for these UIs and then I also link to the empty Figma page where it's going to design these and then we'll be able to check them out. So, I'm going to go ahead and hit enter and we're going to see what this comes up with. What it's doing here is it's navigated to the page in Chrome dev dev tools first. It's going to take into its context, you know, all the actual HTML structure as well as take a screenshot and then it's going to start integrating that stuff in Figma itself. All right. So, now it has all the pages created, the five different pages and we're going to get to see this thing update in real time. [music] All right, it is done. Here is what it came up with. Here's five different variations. Um, and I went ahead and put in the actual a picture of a house cuz I had ugly placeholders. Um, but yeah, for the most part I have not I have I haven't touched anything else other than images. So, here's the first one. Um, again, remember the the original that is currently here is this. All right. Not all that different in terms of layout on this one. So, I'm probably not going to keep this one. Let's take a look at this one. All right, definitely a a more different approach. Get rid of that text right there. I Yeah, the the nav bar is obviously screwed up. This should be going all the way across, you know, small changes, not a big deal right here. So, that would be like a very minimal nav bar. It lacks, you know, any type of navigation. But, looking at this, am I happy with this? Well, the colors would definitely have to change. I'm not sure if I really like having a floating panel like hiding the actual image right here. This right here is way too small. Um, so I could take bits and pieces of it. I do like, you know, the fact that we have this afternoon sunny, you know, summer area. Yeah, these are just drop down fields, nothing exciting about those. So, I do like that approach. Um, let's continue on and check out the I think this is the third one. This is more of like a floating UI of sorts and I guess this could make sense especially if this was like a canvas in the background maybe with like a little bit of a grid texture and people can zoom in and out and kind of play with it in open canvas sort of manner. So, that's an entirely different approach. Um, right here custom prompt. This isn't bad right here. So, the definitely, you know, a potential candidate although in and of itself there's still a lot of work that needs to be done manually. This is where it helps to have that UI UX background. You know, the manual skills. Here's the next one. Uh, this is a sidebar uh, drawer kind of similar to what was already there. So, I'm probably going to scrap this idea. Uh, it's just on the left side. Um, and then right here same concept. I'm not a fan of this one either. So, this one I kind of like the most. I and then kind of mix um, some different ideas here together in order to ultimately create a much more polished design in a final end result. So, you know, back in the day, you know, I would say as soon as recent as like a year ago or whatever all the way back to late 90s when I was designing websites in Photoshop, the process was always we design, you know, the mock-up, the prototype and then the high-fi idea first and then you give that to a developer and then they integrate it. Now, what I'm doing this time especially with this project is I I I completely flipped that on its head. I decided to let AI come up with the UI as it was being built in Claude and then I'm at the stage now where I was like, "Okay, I understand the functionality and what's possible with this app. Now, I'm going to go ahead and really fine-tune the colors in the UI itself to create something that's much more polished than whatever the design AI gives me." So, this is a great way right here to help you brainstorm and just come up with ideas that you can then ultimately integrate into a final polished product. So, that's kind of my workflow right now. I It's not to start to design anymore in Figma manually. No, I'm going to let the AI come up with what it wants and then I'm going to refine it based on a bunch of different ideas that it I tackles here. And so, the the process doesn't end here with AI. I could, you know, I could tell it to mix and match ideas or I could just do all that stuff manually myself which is probably what I'll do. So, let me know how you are all using Figma. Are you using with the MCP server? How have your prox processes and your workflows have changed since AI? Because I think the old way is just it's the old way. There you know, in infusing AI is the way forward. So, if you want to follow along on this project by the way, definitely check out the course. Yes, this is spam, but this is a business. Some of you people who like get mad that I mention my course are so ridiculous. Anyways, so check that out at designcourse.com. There's an early access. We're building this from scratch. Um, and really utilizing AI where it makes sense and our hand skills where it makes sense as well. So, I will see you all soon. Goodbye.