# Google Stitch Just Became an AI Figma (And It's Free)

## Метаданные

- **Канал:** Sam Witteveen
- **YouTube:** https://www.youtube.com/watch?v=J7XpscQqCYw

## Содержание

### [0:00](https://www.youtube.com/watch?v=J7XpscQqCYw) Segment 1 (00:00 - 05:00)

Okay, so Google Labs has dropped an update to Stitch and this is their generative AI design tool and it started off as being something very simple where you could just make sort of screenshots and stuff like that. It's now morphed over the past year or so into a sort of full-on competitor to something like an AI Figma. And this latest update introduces a whole bunch of new things. So the key idea here is that they've now moved to a sort of agentic system where they've incorporated a lot of the features from the recent Gemini text models, but also the image models as well. So I'll walk you through it in a second, but just quickly, they've got a new native design canvas. And you can kind of think of this is a similar sort of thing to AI Studio where you prompt it and it builds the code with you. Now you can just prompt this and it's going to build the actual design with you. And to do that, it's going to use this new sort of design agent that they've built. Now, you can spin up sort of multiple ones of these at a time. You can pick whether it's using the Gemini 3 flash model, Pro model, etc. And just as we've got things like an agents. md file for coding tools, they've now created this design. md file. And this basically wraps a whole sort of design system toolkit. And it allows you to edit it both graphically through editing the actual theme, but it also allows you to actually get the design. MD file and use that in your coding editor or in something else or for example, if you make a brand standard for your organization, you can then apply this to lots of different designs that you've got going forward. Another big feature that they've added in here with this design system is the ability for you to pass in a URL and it can actually pull out sort of the design standard from that URL. So if you've already got a site that you're quite happy with the colors, the fonts, things like that, you can pass that in and then use that as context for making this design system and the design MD. So the interesting thing here is we're seeing lots of ideas being taken from the sort of coding agents and now being applied to this sort of new realm of design agents. The other thing that they've done really nicely here is you've got a bunch of different options now to be able to export things out including exporting things out directly to AI Studio. So it can take your design and code that up as an X. js JS app, add in authentication, add in a database, etc. It also allows you to use their MCP and skills as ways to basically work with coding agents as well. Now, another feature which is kind of like table stakes I think now this year is the whole use of voice here. So, we're actually seeing one of the Gemini Live models being used here to let you do what they're calling vibe design with your voice. And while personally I think this feature is still kind of early days, you can definitely get a sense of where this is actually going where you will be able to talk to the interface. The interface then makes changes for you as you go along. So on top of this, you can use both the actual app and get the tokens for free if you want to try this out. I think the easiest thing is let's jump in and have a play with actually making something with it. Okay, to use this is pretty simple. You just come in here and pick whether you're going to be doing a mobile app or a web app. In this case, we're going to do a web app. I'm going to basically put that in. Fix some spelling there. And then in this case, what I want to do is capture the sort of vibe of this particular site. Right? So, this is a famous resort in Thailand where you often find sort of washed up pop stars and stuff like that. And so, I'm going to post that URL in. You can see when I post that in as a URL, it straight away works out that that's going to be a source now. And this is one of the cool things with this new version is that it now can basically take websites as sources. So we can now click it off and generate. In this case, we're using the three flash model. So the 3. 0 flash model. So this is actually 3 4 months old now at this point. And you can imagine that as a 3. 1 flash comes out or something like that, we will see this probably get updated. So one of the first things that you will see in here is that it builds this system design. And this is pretty cool. You can see that it works out, okay, what are your sort of primary colors, secondary colors, and if we compare that just quickly to our base thing, we can see that it's definitely picked up these sort of browns and stuff from the website design. If you're trying to redesign your own website or you're going for a specific look, it can really do that, you know, very well. And that's not something that you can really copyright. You can't really copyright

### [5:00](https://www.youtube.com/watch?v=J7XpscQqCYw&t=300s) Segment 2 (05:00 - 10:00)

sort of combinations of colors like this. It also picks out the fonts for this and even some sort of styling on icons and buttons and stuff like that. Now, you can see at this point it's given us our first design in here. Now this one and it's definitely got the sort of vibe right. This was using the flash model. Let me go across. This is one that I did before with the pro model. So the pro model you can see actually it looks like this is basically the same the sort of design specs and stuff like that. So maybe it is sort of a little bit more deterministic of how it picks up that. But the sort of thinking through of this I would say some ways this one is kind of a bit better. Now really, you've just got to experiment with this. Early on when I did another one, it actually came up with some really nice designs with the flash. And you can see in this case, I asked it specifically, can you make the pages for the different things that were on the navbar? So basically programs, cuisine, residences, and stuff like that. And you can see, sure enough, it did some of those. And you can see in this case, I can actually come over and basically preview it. And I can preview it as a desktop app as sort of like an iPad or a phone app version in here which is really pretty cool in here. So I can see okay what this is going to actually be like. So the other thing that you can do is you can come over and now actually generate an instant prototype. So this is kind of cool that you can basically come in here. it will make this instant prototype and then we can in the other one we didn't have some pages. So let's just generate some pages in here. Okay. Then once we've got this done what we can actually do is in here you can see now it will wire these up. So we can actually go from page to page trying this out and we can come in and pick anything that we want to change in here. So if we come in and we say right I really want to change this and I want to change something in there I can basically change it with AI. I can connect it to a screen that we've already made etc. So this prototype part is really cool. Now at this point we can basically do a whole bunch of different things in here. We can come in and get it to basically generate different examples. So here I'm saying go for a more holistic natural food look and it will go through and generate those up. And you can see it's generating those screens down here. So I can just take the design palette. Okay. So you've seen we've now got three variations on this cuisine page of what we had there. Interestingly, now we've got three different chefs. Obviously here it is using Nano Banana 2 in the background to actually make these images. So it does make really nice placeholder images. Now all of that you can play with the different models. You also have the ability to use the live mode where you can actually talk to it. So this is using the Gemini live birectional model and that literally allows you to design just by talking to the actual app. Now of course we can upload our own images if we want to use that and at this stage if you want to we can take these three variations and we can actually export them and you can see here we can export this to AI studio. So, if we want to actually then take our website, put in authentication, put in a database, put in all of that, we've actually got that going. If we wanted to export it to Figma, you still have the ability to do that. If you want to make a React app out of this, you can do that. And if you want to make a sort of instant mockup prototype, you can do that as well. You can see when we select AI studio, we can actually pass in a prompt that is going to take what Stitch has actually created and generate code from that. So we could say make this real or and add a real user dashboard with dynamic data. All these sorts of things that we can do in AI studio. We can now come out of this into AI Studio and you can see it's basically putting in both the HTML versions and the actual image version in here. So it's going to start putting this together. The other thing that's really nice is you can export out a project brief which you can see over here is basically generating like a product requirements document for this and this can contain our design system and our design pallet in here. Now, if we want to get access to the design system and edit it, we can see here we've got the design theme, what the actual sort of colors are, what the actual fonts are, etc. We probably want nicer rounded borders. We could save that out. We've also got the ability here to import design system from a specific website and then keep it in

### [10:00](https://www.youtube.com/watch?v=J7XpscQqCYw&t=600s) Segment 3 (10:00 - 12:00)

here and apply it to what we're actually doing. So, that's something that's really kind of cool. The other thing is if you want to get your design MD file, you can see here is the design MD and I've just copied that over and you can see now here I've got a full breakdown of what the design guide is. So, this is really cool for if you're trying to get the look of a particular website, feel of a particular website, you can certainly bring that in here, edit it in the theme that you've got here, and then be able to export it out so that you could use that in any different coding project that you're looking to do. So, overall, this is a really big step for Stitch. I think it's really now become a competitor to things like Figma for people who are perhaps not professional designers but do know what they're going for, do have an idea of what it is that they would like to be able to build and perhaps have some reference sites of what it is that they actually like about each particular thing. And again, Google Labs here is showing us that by being able to have teams that work really closely with the models from very early on, they're able to not only build prototypes, but evolve some of these products where they're really becoming super powerful tools. So, I'd love to see this be able to go forward with more things than just sort of apps and websites. I would love if we could use this for YouTube thumbnails, for just general design, and I would not be surprised if we see that coming in the future. So, you haven't played with Stitch before, go and check it out. It's definitely a really cool tool. And don't forget, this is free. You're not having to pay for the service. tokens that you're actually using. Anyway, let me know what you think in the comments. As always, if you like videos like this, click like and subscribe, and I will talk to you in the next video. Bye for now.

---
*Источник: https://ekstraktznaniy.ru/video/22371*