Google's New UX/UI Tool is Amazing 🤯 - Google Vs Figma | Google Stitch

Google just launched an AI powered design tool to rival tools like Figma and other wibe design and w coding tool. I mean there's an entire list of features I've noted down here and I want to show you everything that I'm super excited about. First one is unlimited possibilities of a starting line. So the starting line could be a prompt where you're asking the AI to design something which is already there in most tools that's fine. The other thing is a dedicated ideation mode. It's a separate project altogether just for ideation. I actually ideated for a problem that I was facing with an app design where users were not able to discover some of the features. So it suggested some solutions for discovery and created a PRD. Now this PRD or this description has a little copy button above it. So as soon as I copy it, it instantly generates this sort of AI understandable description. I take it back to my dedicated dashboard and paste that. right here. That's all I needed to do. And you can see this is a little bit of a funky PRD. You really can't read through it as a human being. It's a little tricky to read, but it's actual specific instruction given by that ideiation tool to the design tool inside Google Stitch. This is insane. This level of integration between all different kinds of features is going to really help this win. The next one is very similar to a real life designer working with you. I'm sure you guys have used Gemini on your phone or on desktop. Similarly, they've incorporated a very natural live mode. Still in preview, so it's slightly buggy, but when it works, it is so seamless. Let me show you exactly how this works with a quick demo. — Hey, ready to dive into those achievements Spotify theme screen. — How about replace the badges uh circles with actual badges and trophies? Feels like we're earning a reward. Let's make those badges feel incredibly premium and desirable with trophies and medals that pop against the dark liquid glass theme. We've replaced the badges with premium trophies and medals following the liquid glass aesthetic. Take a look. What do you think? What's next? — As generated icons or picked up icons from an icon library, this tool will also be able to do multiple tasks at one time on multiple different screens and sections. also pull material data information from third party websites like Unsplash, phosphor icons, text from different websites. If you have a reference in mind, you are being able to do everything plugins were able to do in Figma. Here, let me show you quickly. I want all these screens to be in a material design expressive style or material design 3 with images from unsplash. com and replace the icons that we've used here with icons from the icon pack feather icons. Also pull the theme from YouTube. com. I want a theme like that. The colors, the buttons, the text — on it. Let's transform these greens. — As you can see guys, here there are multiple tasks which have started to play out. It's not just one thing at a time. I can just go to any other page while this AI is doing its job. Do whatever I'd like to do with that page while these tasks are happening in the background. As you can see, it started to sort of apply some of those changes and the images and everything being pulled on from Unsplash icons being p pulled from feather icons like the fill icon theme from feather icon. And it's also generating this style guide which you can always check out with material 3 expressive elements. If you've ever checked out material 3, this is exactly how it looks. It's pulling it from the actual design system. You can pick any one of these sort of iterations and ask it to apply the same theme to all the designs across the board. That is nice feature too. A lot of other tiny features which might work on a day-to-day basis for you guys. On the top there's this toolbar. You can generate instant prototypes. So what you can do is maybe select some of the screens right here. Selected a bunch of these for now just for testing. I go to generate and say instant prototype. It pops up right here and it starts to generate an instant prototype as you can see as a task. Woohoo. It's created like this prototype section altogether. As you can see there are screens in this prototype. So you can replace or you can add and remove and tweak. Here also it's added sort of this phone screen. So it gives this realistic appeal. And there are hotspots which have appeared here. So, if I click on any one of these, for example, navigation literally just works like this. Super smooth as you can see. And if I want to try it out on my actual phone right here, I can just say QR code, scan the code right here, and start, you know, kind of utilizing this prototype on my phone, which is instant. You can even switch between phone and tablet and desktop. And this is so seamless. It's like one click for everything. You can even imagine a new screen from here. So if you want to add a screen over the prototype, you can. You don't have to go back and you can make quick edits. So if I say select this, I can say either change with AI connect to a particular screen or

imagine new screen. So if AI core for example doesn't have a dedicated page, I can ask it to generate a dedicated page and it works pretty well. If I come back to my designs, I can even create predictive heat maps. So before I even launch for testing or prototyping. So pretty basic visual concepts being utilized here but the heat maps look pretty genuine. I mean you could use other heat map tools AI powered heat map tools and maybe generate your own later but this is just convenient. I can then export this or download this. So export actually gives you all these options Figma jewels zip code to clipboard. So if you have a page you can do that as well. MCP server. So if you have an MCP connected to any other tool, you can or a project brief. What if I wanted to tweak my designs quickly like we can do in Figma? Of course, I can go to this modify tab, edit, which is quick edit. It makes everything editable in an instant. So if there's a text, you can edit the text real quick. Edit with AI. So if you want AI to maybe change the copy, you can even annotate which is one of my favorite features to be honest because in the long run you want to just mark different things. It's like leaving a comment on someone's design and someone is fixing it for you. Now when it comes to code stage actually has a feature to go from this design to a fullyfledged working MVP prototype. Click on export. Select whatever screens, maybe five, six screens or an entire prototype. And click on AI studio. AI studio is one of my favorite out there. Top three at least. And I'll say build with AI studio. And magically it will take you to AI studio. As you can see, it will literally copy the code from there. Copy the design system. Copy this PNG so that it has a visual reference. All this is written out by Stitch. So, it's literally linking and communicating with AI Studio. I'll say I'm feeling lucky and it will take me to this build section and say build it. So, what do you think about Google Stitch? Is this a great competitor to Figma? Do you think the Figma and Figma make combo is better or is the Google Stitch and Google AI Studio combo better? Google just released this morning essentially. It's got super viral on Twitter, etc. I was really interested in seeing everything it can do and it's I've tried to cover almost everything. There are a few other features. I'll have a link in the description for you guys to check out and I hope you like this video as well. Hit the like button if you did that really helps support the channel. That's the best free way you can support the channel and let me know in the comments below what are your thoughts on this. I will see you every week here on this channel. So subscribe and I'll see you later. Until next time, take care. God bless.