Google Stitch: The AI Design Tool Taking On Figma

In case you missed it, Google just dropped an AI design tool. Today, we'll

look at what it is, how to use it, its benefits, limitations, and is Figma actually finished. Let's get started.

actually finished. Let's get started.

Real quick before we begin, I'll put our website in the video description, but if you're a big fan of myself, what we're doing here at UI Collective, consider supporting UI Collective Academy. You

get access to a bunch of great courses, micro lessons, uh, private Slack channel access with me and the team, some great downloads, and a whole lot more. Or if

you don't want to join the academy, it's totally free to join our community, and you can ask any questions for free on our community forum. You also get access to some great free savings and resources too. So whether you want to join the

too. So whether you want to join the community or want to support the academy, thanks for being here. Again,

this is just on our website, link in the video description. I'd also made it a

video description. I'd also made it a goal for the year to start posting more on X and interacting with people on there. So I'll link my X also in the

there. So I'll link my X also in the video description. Come follow me,

video description. Come follow me, interact with me. Yeah, let's vibe. Here

we are within Google Stitch. So here we can define whether we want it to be like a mobile app or a web version. We can

start with web and then move on to some of the mobile designs after as well.

We're going to look at that a little bit later. One thing that I would always

later. One thing that I would always suggest with other AI tools is actually starting with a blank page first. So,

actually typing in build me a uh blank page with no design system. That's

usually what I do whenever I'm working with any design tools because I want to build the design, you know, system, select the colors first and then move on from there. But one thing that I'd

from there. But one thing that I'd actually noticed, I was working with Google Stitch. Whenever I did this, the

Google Stitch. Whenever I did this, the when I started to add AI designs, they're always way worse than if I actually started with a a prompt to

build an app and not specifying no design system. That's just something

design system. That's just something that I noticed that I know I've preached in in other topics and other, you know, teachings in the past. So, we're going to remove that for now. And what we'll

do is we'll actually start with a base prompt.

and have it actually select a design system for us because we can easily adjust that. So even if we doesn't need

adjust that. So even if we doesn't need to be like a full page, a full like application, but build me a crypto um

you know dashboard. So build me a crypto dashboard with uh what color do we want?

We'll go with the classic AI purple uh with purple uh in dark mode. in dark

mode uh with purple as the primary color. So let's run that. You can see

color. So let's run that. You can see here what it came back with. So it came back with a sample design system. What's

our primary, secondary, tertiary, neutral colors? Again, we have the

neutral colors? Again, we have the ability to adjust that in just a sec. We

have our headline, body, and label. We

have some sample components. So, it

looks like some buttons, some progress bars, button icon, button with icon, you know, maybe some just basic badges, uh, you know, navigation toggle, search bar.

So, just some highlevel basic components, but it's nice to see. And

then we also have the design that it came up with on the right hand side. I'm

not going to lie, it's half decent. It's

not perfect, but when you compare it against what a lot of other AI designs might give you, I think it's a pretty good starting point. One thing I'd also

like to call out here is that from what I've noticed with Stitch is that the mobile designs tend to be a little bit better. Just something I've noticed.

bit better. Just something I've noticed.

Um, but most of the designing that I do is for web, not necessarily for mobile.

Um, so that's just why I proceeded with dashboard. But, you know, do what you

dashboard. But, you know, do what you want to do. Um anyway, so that's a pretty good starting point. On the right hand side here, you can see it built a

design system for us where we can actually come in here, start to adjust our color palette, our primary, our secondary, our tertiary, our neutral. We

can even change our font. Sorry, move

over the right here. We can even change our font. So our headline, our body, our

our font. So our headline, our body, our label, and even adjust the smaller things like corner radius 2 where you can see here on the actual design system that the corners are a little bit more

rounded. And if we wanted to adjust that

rounded. And if we wanted to adjust that to square, you can see how the design system adjusts in real time. So we can start to visualize how all these design

system elements would, you know, look as we tweak our color palette, our fonts, or even things like our corner radius, too. So again, there's still a lot in

too. So again, there's still a lot in here that Google can add. Different

types of components like how would a date picker look as an example, being able to add more complex components.

It'd be a really nice addition for Google ads to Google to add to Google Stitch, but again, it's not there just yet. One thing I also like about Google

yet. One thing I also like about Google Stitch is it's kind of built to be an AI canvas whereas unlike Figma, Figma is not meant to be an AI canvas where you know what

is it you would like to change or create. Let's look at what pages we're

create. Let's look at what pages we're missing on the lefth hand side. We have

this portfolio overview or like a dashboard page, you know, build me uh a page uh for each of

each of the items in the left hand uh navigation. So, we can add these prompts

navigation. So, we can add these prompts where it actually starts to build out the other pages and make the tweaks that we want to make accordingly. You can see that it added the trade page, the

settings page, and the markets page down below. Again, they don't look that half

below. Again, they don't look that half bad in the grand scheme of things. I

think they're really good starting points. You know, we have our order

points. You know, we have our order book. It looks like we have our market

book. It looks like we have our market value here. Our settings page with a

value here. Our settings page with a profile isn't that half bad. Again, it

still needs some work, but you know, it even thought through things like a dark mode, light mode toggle, two-factor off toggle, which I really like to see that it's thinking through different types of wallets that you can connect. On the

markets page, it looked like it also added a top nav when the rest of our app has that sidenav, but you know, that's okay. But maybe I want to elaborate a

okay. But maybe I want to elaborate a bit more on this trade page and maybe see some different options. I can come

up here and ask it for variations where let's say maybe I want uh maybe just two variations. I can add additional instructions. I can choose

additional instructions. I can choose the creative range whether it's the refine refine explore or completely reimagine that design. I think that's a

really cool feature that Google Stitch has. uh aspects to vary. Maybe I'm

has. uh aspects to vary. Maybe I'm

really want to explore different layout changes, maybe color scheme changes, images, text, font, you know, text content. There's some options here for

content. There's some options here for us to define when we want additional variations generated. I think that's

variations generated. I think that's awesome. So, let's go ahead and generate

awesome. So, let's go ahead and generate some variations. Now, it came back with

some variations. Now, it came back with two iterations of a completely different layout. So, this one's more horizontal

layout. So, this one's more horizontal horizontal bars. We have our order book

horizontal bars. We have our order book on the right hand side. This one has a smaller chart where you know more space for order book or recent trades and this one feels a little bit more something like Coinbase where the buy sell is

really big on the right hand side. This

is great for fast iteration and exploring what we could do based on different concepts. There's other things

different concepts. There's other things too that I think are pretty unique where one of which uh is this annotate function where if I hit annotate I can come in here and sort of drag which

areas I want change and actually choose to describe my change to Google stitch.

I think it's a really promising feature.

We won't do that for now. I'll let you explore that on your own. The other one that I find which is kind of cool and can be pretty promising is this uh

predictive heat map feature which I think is pretty wicked. So of course I selected predictive heat map but now it's generating something down below.

I'll pause wait for it to load or essentially took um not the page that we had selected. It looks like it actually

had selected. It looks like it actually took this page but it built a heat map for it which I think is kind of cool.

And I'm not going to lie, is usually whenever I've tried this is it doesn't it doesn't actually take the design that I had asked it to generate that predictive heat map for. So it kind of goes off and does its own thing or

introduces a completely new page. That's

fine. It's still in beta for a reason.

But this is one of those features super promising. Like I know companies and

promising. Like I know companies and plugins and stuff that do this on its own. All of a sudden this is inside of

own. All of a sudden this is inside of an actual AI design platform. What about

prototyping is what we can do is we can select one of these screens and hit the play button. And what this does, it

play button. And what this does, it creates like an instant prototype. Very

similar to Figma's like preview functionality for their prototypes. So

you can see it's here, but nothing's actually synced yet. Like the items in the sidenav aren't linked. And it's

because we need to add the screens to the prototype. So let's select this

the prototype. So let's select this trade one. Uh and you can see it's it's

trade one. Uh and you can see it's it's connecting the screens together.

So maybe the wall is doing that. Let's

also add in just that settings page, too. So again, it's connecting the

too. So again, it's connecting the screens. But if we were to go back up to

screens. But if we were to go back up to the top here, oh, there we go. You can

see that now trade and settings, they sort of have like that dash box around them signifying that it's clickable. So

if I select trade, we navigate to the trade page. If I select settings, we

trade page. If I select settings, we navigate to the settings page. And we

can set up our prototype this way to only include certain screens that we actually want. So I built out the

actually want. So I built out the desktop screens, but what about mobile too? So let's move that out of the way

too? So let's move that out of the way maybe where what I can do is under generate I can ask it to build a mobile app version where it's going to start building the

mobile view for that particular page.

And you can see here that's what it did.

And again, there's still there's some inconsistencies between the two like this is a bar graph, this is a line graph, but that's okay. I'm sure

Google's going to fix that in due time.

but it's a half decent looking mobile page right out of the gates. One thing

that I also do want to cover is the idea of being able to preview this and sort of like a full page. I know earlier on we looked at in just like that preview prototype mode or instant prototype as they call it, but here just under new tab you can actually come up and preview

how it would look when it's a little bit larger. So I think that is also really

larger. So I think that is also really nice addition. And lastly, I'm sure what

nice addition. And lastly, I'm sure what what's on everyone's mind is like, okay, can I export this into Figma because that's where our developers are working from. All that fun stuff is under export

from. All that fun stuff is under export here. Here I'm just going to select

here. Here I'm just going to select Figma and just ask it to convert. And

when you ask it to convert, one thing it does is you can see that little spinner there. And now we can actually copy that

there. And now we can actually copy that frame. So then inside just like this

frame. So then inside just like this blank blank Figma page. Um I'm just going to go ahead and paste that in. And

you can see it is now available inside Figma. And you can see that the auto

Figma. And you can see that the auto layout isn't actually bad. Again,

there's some issues here with like dates being hidden, but in the grand scheme of things is better than a lot of other AI tools that I've seen. and even figas in some case like you know sure it doesn't

condense all the way down you know to mobile where things start to stack but it's pretty good start a question I'm it's not even a question that I get

something I see all the time on X or in the community whatever people like oh is Figma finished is this the end of Figma no it's not okay Figma will probably

come out with something similar why design systems already exist inside of Figma So instead of having to build a design system, mini design system like we just did in Google Stitch that

already exists. So it's easy to start

already exists. So it's easy to start spinning up UIs based off a design system that already exists. Also too,

Figma's for everyone. There's Figma dev mode, there's design mode, there's Figma sites. In order for Google to copy what,

sites. In order for Google to copy what, Neo Figma does with dev mode, it's going to take a while. And Figma is already part of our natural design workflow. And

also too like Figma has the data to produce great UIs. I don't know how like their AI is collecting data, but I'm sure they're collecting data on how people use a auto layout to and

everything like that. So Figma is going to be around. All right. Um but what it produces can't be too cool that it replaces designers entirely. You got to remember that Figma is publicly traded.

If they release something that just wipes designers out entirely, then their stock price is probably going to be affected. Those are things that you need

affected. Those are things that you need to start thinking about. Will some

design jobs be impacted? Probably. It's

just my guess. But like chat GBT has been around for what year is it now?

2026, four years, three years, something like that. And I have friends who are

like that. And I have friends who are still in communications who still get hired for communications roles. And

people thought that those are going to be the first jobs to go. So will there be some jobs that are impacted? Yes, of

course, naturally. But is it something you need to worry about? Absolutely.

right now? No, but just keep it on your radar. Another thing I want to cover is,

radar. Another thing I want to cover is, am I using Google Stitch every day?

Because this tool just came out. The

answer is no. I am not. It's not even part of my workflow right now, but I could start using it. I think it's that promising. Google, of course, has a ton

promising. Google, of course, has a ton of money to throw behind it. Figma make

not great. Figma AI, not great.

Personally, if I'm honest, I think Figma's got to step it up in the AI zone because goo Google came out with this.

This is like their first release.

There's some really cool features and functionality in there that they're already thinking about like like the heat map analysis. Those are things that are startups on their own. Heat maps for designs and things like that. So, I

really could start using it. So, it's

definitely something to have on your radar. It's just not there yet, though.

radar. It's just not there yet, though.

But, you know, check back in a week, a month, see what else has been added. And

as Google Stitch adds more things that I find useful, find interesting, things that we should keep on our radar. Of

course, this community, this YouTube channel is going to be the first to know. Anyways, that's it for the vid.

know. Anyways, that's it for the vid.

Um, sorry, I'll put this ball away. Uh,

thanks for being here. Again, lots more content, especially on AI and design and and design systems on its way. Uh, if

you're a big fan of myself, again, check out our website in the video description for UI Collective Academy or just the community. Uh, and if you want to watch

community. Uh, and if you want to watch uh a video where I build an entire design system, click up there. And if

you want to watch another video that I highly recommend, click up