How I Actually Use Claude Code in My Design Workflow

So, last week I released this video on what Claude Code is and what it means for designers, but how am I using it in my actual design workflow? So, today I want to look at two ways that I'm using Claude Code to speed up my design workflow and be a more efficient,

effective designer. Let's get started.

effective designer. Let's get started.

And real quick before we begin, if you're a big fan of myself, what we're doing here at UI Collective, consider supporting UI Collective Academy. Again,

this is all just on our website. I'll

put a link to this in the description where you get access to, as of right now, about 14 premium courses with a lot more on the way. um private Slack channel access me and the team, some exclusive downloads and a whole lot more. Even if you don't want to join the

more. Even if you don't want to join the academy, it's completely free to join the community. You can ask any question

the community. You can ask any question for free on our community forum. I

respond to every question that's on there. You get access to some great

there. You get access to some great savings and some great free resources as well. So whether you want to join the

well. So whether you want to join the community, you want to join the academy, thanks for being here. Let's rock and roll. Another thing, too, made it my

roll. Another thing, too, made it my goal for the year to start posting more on X. Um so I'll put a link to my X in

on X. Um so I'll put a link to my X in the video description, too. Come

interact with me, send me things, message me, whatever you want.

[laughter] I don't know. I'll there's a link for this down below. So, I want to talk about automating our design workflow with Claude. Now, as you might have seen in my last video, there's now

a two-way sync between Figma and Claude Code. Claude Code can push to Figma and

Code. Claude Code can push to Figma and read what's in Figma and pull it back into Claude Code for you to make some adjustments. Now, this is great and

adjustments. Now, this is great and again, if you haven't watched the last video where I sort of introduced this topic, would highly recommend it. I'll

put a link for that in the description.

Now, but as you might have seen if you've watched that or if you're new here is that the Claude X Figma two-way sync is still not at a point where the designs are perfect. So, if you're here

for perfect designs, it can't happen.

So, there's always issues with auto layout. So, I find myself rebuilding a

layout. So, I find myself rebuilding a lot of widgets despite the fact the widgets are pretty good. Components are

not applied. Like even if you prep it with your design system components inside of Figma, even when you upload the design system, it the designs it produces don't have the components or the the instances of those components

applied. Like all the designs are

applied. Like all the designs are basically unattached components more or less, which doesn't help. And then the variable application is hit or miss.

Sometimes it works, sometimes it doesn't work, where I find myself reapplying a lot of the variables. I wanted to show everyone right now how I'm actually using it as part of my design workflow.

And I'm not kidding when I saying this.

Last week, I was using this for like every single day working on client projects. It saved me a ton of time.

projects. It saved me a ton of time.

Now, if you've seen any of our other videos where I sort of use cursor to, you know, Vibe Code Design Docs or Vibe Code Design System, what's unique about

that is there wasn't that two-way sync capability. But now with Claude, I want

capability. But now with Claude, I want to show you how you can leverage this two-way sync capability to actually speed up your workflow or a lot of those mundane tasks. So you no longer need to

mundane tasks. So you no longer need to cop do things in cursor, copy things from cursor, paste it into Figma, or paste it elsewhere. Show you how you can leverage this two-way sync beyond just

building designs that are more inspiration than anything else. Let's go

ahead and get started connecting clauding. And I'm going to go through

clauding. And I'm going to go through this really quickly in addition to connecting the Figma MCP just in case you're new here. So I'll put a link for this down below, but just go to their docs and scroll down. And I'm on a Mac,

so I'm just going to copy this here. And

again, what's unique about Claude is usually just ran out of the terminal.

Again, there is an app for it. Um, so

I'm just going to go ahead copy this because this is for Mac specifically.

Open up terminal and then let's run that command to make sure that Claude is installed. Then within your terminal,

installed. Then within your terminal, just enter that and go ahead and run it.

You'll see that claude is successfully installed. Real quick, one thing I

installed. Real quick, one thing I forgot to mention. In order to initiate a new cla session, you're going to have to hit enter or hit claw and then enter.

Sorry. And now you can see that claw session is now initiated. So now we can proceed forward with setting up the MCP.

Now we need to connect one part of our Figma connection which is our basic like Figma MCP. So again, I'll put a link for

Figma MCP. So again, I'll put a link for this in the video description. So just

come down here and just copy um this under Figma and we're going to go back uh to our terminal and then also run that. So, as I said, just enter in that

that. So, as I said, just enter in that line that we had copied from the documentation and then hit run with MCP now connected. Um, one thing you're

now connected. Um, one thing you're going to do, just enter in this specific command. I'm going to put a like this

command. I'm going to put a like this specific command in the description that you can run. But what this does, it is sort of it's the plugin that helps Figma and Claude have that two-way connection.

So, go ahead, paste in this command with MCP installed, with Claude installed, um, and we should be rocking and rolling. So, let's go ahead and run that

rolling. So, let's go ahead and run that now. So, I already had it installed. Um,

now. So, I already had it installed. Um,

so just go through that process, but then hit SL type in /plugin and it's going to show you all the plugins that you can install. More on this in future videos, but then just using the arrow key, navigate right towards installed.

You're going to see that Figma wrote remote MCP. Uh, hit enter to

remote MCP. Uh, hit enter to authenticate. Again, ignore everything

authenticate. Again, ignore everything else that I have here. So, what you're going to do, just hit enter in order to start the authentication process with Figma. Then, this should open. So, just

Figma. Then, this should open. So, just

hit agree and allow access. Just make

sure you're signed into the right Figma account first. And you can see that that

account first. And you can see that that is successful. So let's rock and roll.

is successful. So let's rock and roll.

So here I am with the sample Figma page.

[snorts] Now where I'm getting a lot of value is actually documenting my design decisions for different pages, usage guidelines for components and things

like that inside of Figma. Especially

for a guy like me who I work with a lot with client design systems. This is saving me a ton of time and it's going to save you a ton of time, too. Now here

I just have this real sample button documentation sample. Thinking it from

documentation sample. Thinking it from the point of view that you work at a company, you might already have a you might already have a template that your component documentation needs to exist within within inside Figma. So I'm

looking at it from that point of view, but you can totally have Claude actually build out the template for you, tweak it until it's like has all the sections that you like, the format that you like, and then sort of use that as the master template. So, what we're going to do in

template. So, what we're going to do in this example is we're going to have Claude study this documentation, the type of like content, content length, um, look and feel of the documentation

page itself of this button component page and then have it actually build the documentation for the link based off what we have here. So, we wouldn't actually have to do any writing at all.

Claude's going to study the documentation sample and then build the documentation for the link itself. And

actually, unlike with cursor where it manually gives us the content, it's actually going to push it automatically to Figma, really automating that part of our workflow. I'm now going to go ahead

our workflow. I'm now going to go ahead copy a link to this selection specifically, so we can go ahead and share that with Claude. I'm going to flip over to the Claude Code desktop app

now that we have it installed via terminal. Just my personal preference

terminal. Just my personal preference and where I want to work. So what I'm going to do, I'm going to paste in a link to that Figma like documentation page itself. And just a quick prompt uh

page itself. And just a quick prompt uh study uh this design system documentation uh

page sample for button components.

Uh look at at the contents. Look at the contents uh length um and frame formatting.

Uh goal here is just to get familiar.

We will not make any edits uh or changes.

Um once you are familiar, we will build documentation for other component sets.

Again, just a highlevel prompt. We're

just showing you how this could work. Um

again, I know there's some errors here.

We probably clean this up, but just to get our feet wet. Let's now go ahead and run this. So, what it did is it

run this. So, what it did is it retrieved the Figma design. So, you can see it actually pulled in that design here from Figma. Um so, it's a little blurry, but anyway. So now it's studied.

It's got a clear, you know, documentation of what's going on.

Component badge, H1 title, description, meta pills, the different sections that are in there. So it said it's ready to apply this pattern to other component sets whenever we're ready. So let's go ahead and do that now. So I now have

this sample link component as well again with no documentation. So I'm going to go ahead copy a link just to this page specifically and then apply this. So um

apply this same pattern uh to the following link uh component set component sets paste in that link. Um

when completed this is really important push it to uh Figma. So let's now go ahead run that.

Figma. So let's now go ahead run that.

One thing if it doesn't push right away it's going to open up the page inside of like a local uh file just in like your browser. So then just go ahead and hit

browser. So then just go ahead and hit send to Figma and we'll complete that on your behalf. And now all of a sudden we

your behalf. And now all of a sudden we have the documentation for our component. So Claude understood the

component. So Claude understood the sample documentation read the link component based off its understanding of the link component that we gave it and the documentation sample

that we gave it. It now generated the documentation inside of Figma. I didn't

have to do anything manual to this. I

didn't have to write a single thing. It

wrote everything for me and built the actual Figma frame on my behalf. Now,

moving on for the next part of this video is we all know that AI generated designs are not the best. I'm not the first one to tell you that. I'm sure you figure that out by now as well. So, what

good is it if it's like, oh, build me a financial dashboard if it doesn't give us a design that's going to get it right the very first time or even remotely close to the very first time unless our prompt is crazy and all that fun stuff.

But where I've actually got a little value, a lot of value in automating elements of my workflow and working with tools like Claude Code is actually for

complex UX problems. I don't care if the design isn't perfect, but it helps me visualize what the experience could be and what the art of the possible could exist as. I'll have Claude generate the

exist as. I'll have Claude generate the UX. I'll dialogue with Claude over it.

UX. I'll dialogue with Claude over it.

We'll go back and forth. I'll review it ran locally so I can actually preview that experience. And then what I'll do

that experience. And then what I'll do is I'll recreate it using my design system within Figma or I'll have Claude push those UX elements, those components

into my Figma file for me to iterate on, apply the proper components, app apply the proper variables, so on and so forth. Now, it's not just specific to

forth. Now, it's not just specific to overall UX problems, but this really comes in handy with componentry as well.

If you need help visualizing something, let's take a look at this. Now just

going to run this prompt here where you know I am working on a complex complex data visualization table

components table components uh with potentially if I can type 50,000

rows of data uh build me a clean table components with advanced filtering and column

managements. Um, yeah, something like

managements. Um, yeah, something like that. So, let's go ahead and run this

that. So, let's go ahead and run this because this is kind of an example is how you you have a complex UX problem.

Build me a component or experience is going to support it. So, look what it came back with now is it came back with this table where I can search records. I

have all these filters that come up when I hit filters. So, statuses,

departments, regions, all this fun stuff. I can filter this down even

stuff. I can filter this down even further. So, let's just say active, then

further. So, let's just say active, then apply. So, it shows all the ones that

apply. So, it shows all the ones that are active and what the badge looks like when it's active. I can go ahead clear these filters there. Um, I can see the columns. So, I can arrange the columns,

columns. So, I can arrange the columns, move things around. You can see how it updates here at the bottom left, which is great. I can toggle these on and off.

is great. I can toggle these on and off.

And you can see behind me that what that does, that actually adjusts. And I can even export this to its metrics here at the top. And if I wanted to, I could

the top. And if I wanted to, I could also filter this by priority level. You

can see that changes. Or also by region as well. So, what this does, it helps me

as well. So, what this does, it helps me give a really good visual as to what it is, the experience that I might actually want to build. I'm not asking for the

perfect design itself, but it gives me a really great example to go off of that I could then work on within Figma. So, let's say I'm happy with what it came back with and say I like some of the treatments here.

Now, I already know that this isn't going to be perfect. It's not going to be a one to one in my design system. The

Figma import, it's there's going to be things wrong with it. It might not be perfectly responsive, but let's say there's elements that I want to come in and and riff on here. Like maybe I like this manage column selector. I want to

recreate this using my own components, but maybe some small tweaks like maybe my brand uses a checkbox instead of a switch, but say send to Figma. Paste in

that Figma file link. And now I'm able to now riff on this specific table component itself. Maybe this specific

component itself. Maybe this specific element here. So now those tables like

element here. So now those tables like that table component, that table experience along with some of his edge states like if something's selected, it's empty state are now here in Figma for me to reference where I can match

spacing and do other things that I would need to do without having to entirely like start from scratch. Yeah, that's

it. Um, more is going to be coming as I introduce it more in my workflow, but I figured I'd start with there because that's where I use it like the most repetitively. Um, and again, keeping

repetitively. Um, and again, keeping things honest with you guys. I'm not

going to, you know, say do things and show it to you if I don't use it myself.

Um, anyways, uh, if you want to build an entire design system, click up there. If

you want to watch another video, I highly recommend, click right there.

Again, if you've been a big fan of myself and like this video, consider supporting UI Collective Academy. It's

just on our website. Uh, I'll put a link for that in the description. Save the

next one.