# How I Actually Use Claude Code in My Design Workflow

Channel: UI Collective
Video: https://www.youtube.com/watch?v=TKScxZtESzs
Duration: 13 min
Language: English
Words: 2764
Transcript page: https://viewrankai.com/tools/youtube-transcript/TKScxZtESzs

---

[0:00] 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. And real quick before we begin, if you're a big fan of myself or what we're doing here at UI Collective, consider supporting UI Collective Academy. Again, this is all just on our website. I'll put up a link to this in the description. Where you get access to, as of right now, about 14 premium courses

[0:24] with a lot more on the way. Uh private Slack channel access with me and the team, some exclusive downloads, and a whole lot more. And even if you don't want to join the academy, it's completely free to join the community. You can ask any question for free on our community forum. I respond to every question that's on there. And you get access to some great savings and some great free resources as 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 goal for the year to start posting more on X. Um

[0:48] 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

[1:05] sync between Figma and Claude code. Claude code can push to Figma and read what's in Figma and pull it back into Claude code view to make some 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,

[1:35] it can't happen. So, there's always issues with auto 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 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

[2:11] I'm actually using it as part of my design workflow. And I'm not kidding when I'm saying this. Last week I was using this for like every single day working on client projects. It saved me a ton of time. Now, if you've seen any of our other videos where I sort of used Cursor to, you know, vibe code designs docs or vibe

[2:30] code a design system. What's unique about that is there wasn't that two-way sync 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 and a lot of those mundane tasks. So, you no longer need to copy 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

[2:59] ahead and get started connecting Claude. Again, 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 you just ran it in the terminal. Again, there is an app for it. Um so, I'm just going to go ahead copy this cuz 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

[3:23] terminal, just enter that and go ahead and run it. You'll see that Claude is successfully installed. Oh, wait, one thing I forgot to mention. In order to initiate a new Claude session, you're going to have to hit enter or hit Claude and then enter, sorry. And now you can see that Claude session's 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 this in the video description. So, just come down here and just copy um this under Figma, and we're going to go

[3:51] back uh to our terminal and then also run 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, one thing you're going to do, just enter in this specific 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 in Claude have that two-way connection. So go ahead, paste in this command with MCP installed, with Claude installed, and we should be rocking and rolling. So let's go ahead and run that now. So I

[4:25] already had it installed, so just go through that process. But then hit slash type in slash 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 and you're going to see that Figma wrote remote MCP. Hit enter to 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 hit agree and allow access. Just make sure you're signed into the right Figma account first. Then

[4:54] you can see that that is successful, so let's rock and roll. So here I am just 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. It's going to save you a

[5:17] ton of time, too. Now here I just have this real sample button 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. Or 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 it's sort of use that as the master template. So what we're going to do in this example is we're going to

[5:46] 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

[6:14] going to push it automatically to Figma. Really automating that part of 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 in

[6:33] 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 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

[6:59] 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 high-level prompt, we're just showing you the how this could work. Um again, I know there's some errors here, we'll 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 retrieved the Figma design, so you can see it actually pulled in that design here from

[7:41] Figma. Um so, it's a little blurry, but anyway, so now it's studied as I've 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, instead of this 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, apply the same pattern to the following link component sets, component sets, paste in that link

[8:19] when completed. This is really important. Push it to 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 file just in like your browser. So, then just go ahead and hit send to Figma, and it will complete that on your behalf. And now all of the sudden we have the documentation for our 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

[8:57] 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. Then moving on for the next part of this video, as 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 figured 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

[9:24] 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 UX. I'll dialogue with Claude over it. We'll go back and forth. I'll review it ran locally so I

[9:52] can actually preview that experience. And then what I'll do is I'll recreate it using my design system in 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, apply the proper variables, so on and so 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. Let's 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,

[10:36] 50,000 rows of data. Uh build me a clean table components with advanced filtering and column managements. Um yeah, something like that. So, let's go ahead and run this cuz this is kind of an example of how you do have a complex UX problem, build me a component or experience is going to support it. So, look what it came back with now. So, 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 further. So, let's just say active then apply. So, it shows all the ones that

[11:16] 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, move things around. You can see how it updates here at the bottom left, which is great. I can toggle these on and off and you can see behind me that what that does, that actually adjusts. Then I can even export this to a symmetric here at 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

[11:45] 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

[12:03] 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 of my design system. The Figma import, it'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 managed column selector. I want to recreate this using my own components, but maybe some small tweaks. Like maybe our my brand uses a checkbox instead of a switch. But say send to Figma, paste in that Figma file link, and now I'm

[12:32] able to now riff on this specific table component itself, maybe this specific element here. So, now those tables, like that table component, that table experience along with some of its edge states, like if something's selected, its 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 the every since that's where I use it like the most repetitively. Um and again, keeping

[13:03] things honest with you guys, I'm not going to, you know, say I 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. And again, if you've been a 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. See you in

[13:22] the next one.

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt