Figma AI Agents: What Works and What Doesn’t

Let's take a look at Figma agents. Now,

one thing I'd like to call out is you might have Figma agents in the sidebar here. You might not have it yet as they

here. You might not have it yet as they still are very gradually rolling it out.

Now, here we are just in like this blank Figma file. Like there's no components,

Figma file. Like there's no components, there's no designs in it cuz I don't want the agents to start to be influenced by that. But what we have is this variable collection. If you don't know how to build a variable collection like this, I'll link some videos down

below. I do teach that for free on

below. I do teach that for free on YouTube, so you can check that out. But

before we get into trying to see if it can use our variables and styles, let's run some of the basic system prompts.

What I mean by someone like the basic prompts is the ones that they suggest because you've seen some of my Google Stitch videos in the past. The results

that those prompts give you are generally a little bit better than what you might have if you were just to run a prompt on your own. So, let's run through maybe just build create a dashboard UI. We're just going to click

dashboard UI. We're just going to click this here and see what that result is like. First look, not great. AI slop if

like. First look, not great. AI slop if I'm honest. I get way better results

I'm honest. I get way better results with Claude design or Claude code. But

something Google Stitch, I've noticed working with that tool that I'll also link down below, is very similar to what Figma's trying to introduce here, is that the mobile designs are generally way better than the desktop designs. So,

let's run a further prompt to like see if those results are better.

Uh please build me a uh mobile onboarding flow for a finance app. We're going to go ahead and run this. Now, one thing

I'd also like to call out here is we look inside, it didn't use any of the variables that are inside of this file. And it didn't use any of the styles either. A little

bit disappointing if I'm honest. I one

thing I would always like is that if I'm working within a larger variable library like what we have here inside of this file, that it would always pick up the local variables and the local styles.

But we're going to try to publish this design system and then subscribe to it to see if those variables and styles are pulled in that way. So, while it's generating the additional screens here as you can see, I'm going to pause the

video and we'll jump back once they've loaded. This is what it came back with.

loaded. This is what it came back with.

On first glance, it's a good start.

Mid-fi, low-fi wireframes, has the rough framework down. If I was to drag one of

framework down. If I was to drag one of these out, it appears it's pretty responsive, too. So, that's nice. And I

responsive, too. So, that's nice. And I

guess it's good for iteration. But, what

that did is it kind of proved my point that I'm kind of what I was talking about a little bit earlier, how usually AI is better at the mobile designs versus the desktop designs. So, if I was to copy

desktop designs. So, if I was to copy this original prompt that we made up here and say, "Please build me a desktop onboarding flow for a crypto app." One

thing I want to see is how well it does at translating flows to desktop versus mobile that we see here. Let's run.

While those are loading, check out the link in the description for our website, just on UI-collective.co, where academy members can get access to about 28 great courses on AI workflows, design topics, and a whole lot more.

Always adding more to this, as well. Be

sure to check it out. Link in the description. So, it came back with the

description. So, it came back with the result. Then, I also ran this prompt,

result. Then, I also ran this prompt, "Please build me a dashboard using the variables and tokens inside of this file."

file." And the onboarding result, it's not half bad. It would require a lot of manual

bad. It would require a lot of manual tweaking, but for just like low-fi-ish iteration, it's not horrible.

But, this is good for start, but what I want as a designer is I wanted it to use my variables and tokens consistently in my text styles. And when I ran this prompt,

text styles. And when I ran this prompt, "Please build me a dashboard using the variables and tokens inside of this file." I got this result right here. So,

file." I got this result right here. So,

two things I want to call out here. It's

clearly not good at building individual pages. It needs to be overall flow is

pages. It needs to be overall flow is where it can sort of connect things together. That's a problem, because

together. That's a problem, because whenever I start, I don't want a full flow. I want one page at a time to lock

flow. I want one page at a time to lock down the styling and stuff, and then I iterate from there.

The other thing is notice how I said, "Using the variables and tokens inside of this style." And if we look what it came back with, it referenced some of the tokens and variables and styles, but it didn't

actually apply any of them. You can see they're all un- connected hex codes here on the right.

When we click into the text as well, it didn't really apply the actual styles. So, that's an issue. Cuz if I

styles. So, that's an issue. Cuz if I wanted to use my actual variables and styles, I have to rebuild everything from scratch, which is no fun. Now, what

I want to experiment with here is how can we get that to work?

This library here, this is published as a design system.

If you don't know what I mean by that, skip to the end of my building design system course. It's for free on YouTube.

system course. It's for free on YouTube.

I'll link that down below, where I sort of chat about that. What I want to do is I want to go inside of a new Figma file and subscribe to this here. So, the

variables and styles that are inside of this Figma file are available inside a different Figma file. So, we're going to try that now. Inside this new file, you can see here here that under libraries,

I'm now connected to that library that had those variables and styles. So,

let's run a prompt. Please build me a uh dashboard. Whatever. And because it's

uh dashboard. Whatever. And because it's connected, I don't want to have to be able to specify I don't want to have to specify every time to use the variables and styles. What I want is for it just

and styles. What I want is for it just to recognize that the library is connected and use every whatever is in that library. So, please build me a

that library. So, please build me a uh dashboard. Whatever. Let's run. So,

uh dashboard. Whatever. Let's run. So,

it's telling me here that it found the variables and it found some of the styles. And this is the result it came

styles. And this is the result it came back with. Let's do another check. So,

back with. Let's do another check. So,

it looks as if it did pick up some, but not all of them, which is the issue.

Now, I'll wait for this to finish generating, and it looks like it is. And

it finished generating and still the same thing. Like,

same thing. Like, I would have to like go through manually reapply variables, and it is just not worth the effort in my honest opinion.

Even when we click into some of the text, too, the styles aren't applied. If

any of the variables aren't applied Oh, look, a variable is applied there. It's

just I get way better results using Claude design and then using Claude code and then pushing to Figma using my design system and and Figma skills. I

got some videos for that. I'll link them down below. Just not worth it in its

down below. Just not worth it in its current state. But what I want to try

current state. But what I want to try now, let's try it with a design system because that was just with variables and styles inside of like a blank library.

But what about an actual design system?

What I have is the design system that's part of UI Collective Academy. I'll link

that down below again. It's just on our website. I've connected that where you

website. I've connected that where you have all your buttons, your inputs, your styles, your variables, so on and so forth. So, it's a full design system.

forth. So, it's a full design system.

Put it that way. So, what I Again, that is connected. Perfect. So, let's

is connected. Perfect. So, let's

uh build me a dashboard.

Uh let's run this and see what's able to pick up those styles, those variables, those components inside of that full design system. So, I had it generate me

design system. So, I had it generate me that dashboard and then also this transactions flows. Look at the

transactions flows. Look at the dashboard first. Starting off, it looks

dashboard first. Starting off, it looks like it finally picked up the variables and the styles and everything. So, it

appears to me is that in order for it to use the variables and styles, it needs to be components that it's using.

Otherwise, it just doesn't apply them right if we when we compare what we looked at earlier to what we're looking at now. Now, in terms of the design

at now. Now, in terms of the design itself, again, not that great. So, this

sort of reiterates my point that I think it needs to be full flows in order for it to generate better designs. But it

does look like it's using the components, which is pretty good. So,

anyways, moving on to the flow. Again,

the flow, much cleaner, much better than just like one page. And again, it's mobile designs, too. So, I think like the best results with Figma AI agents right now are with mobile designs and with flows, not with individual screens

and not with desktop. And if we click in here, again, it looks like it's also using the variables and styles, too. It

looks like we have one like a broken one here, but that's fine. Claude code would also give you a couple broken ones. And

again, it looks like it's using everything relatively fine, but this just looks a little bit better uh in the flow than what it would produce with an individual screen. So,

individual screen. So, honestly, promising tool. Is it where I want it to be now? No. Hey, thanks for watching this one and making it this far. Going to have a lot more content

far. Going to have a lot more content coming and trying to keep it as real as possible when it comes out to designing with AI, working with AI, no overhyped stuff.

So, be sure to drop a subscribe. Really

try to push 100k subs this year. That

would be crazy.

Also, too, check out our website. Link's

in the description. Come follow me on X.

And yeah, thanks for being here. See you

at the next one, I guess.