# How to Design with Claude + Figma | Complete AI-Native Workflow

Channel: AI Design Professor | Nehmat Gereige
Video: https://www.youtube.com/watch?v=YPKAjTDz7Jc
Duration: 32 min
Language: English
Words: 5218
Transcript page: https://viewrankai.com/tools/youtube-transcript/YPKAjTDz7Jc

---

[0:00] If you're a designer in 2026, you're definitely feeling the pressure to be an AI native product designer. But what does that even mean? In this tutorial, I'm going to show you exactly what it means to be an AI native designer to guide you through the complete steps of designing natively with AI. Starting with the research steps to understand the user to exploring and ideulating multiple directions till finally you reach a high fidelity prototype that you can share and test with your users to optimize your speed without ever giving up on quality. Let's get started. What

[0:42] AI native product design is and is not. First of all, what it is not. It is not design engineering. This is another role that designers are feeling pressured to work with where as a designer you're pushing back to code all the time. We're not trying to be design engineers here. AI native product design means AI is inside the process. It's not an afterthought that you want to use AI. You start with AI at every step. It's embedded in your process and it empowers every step that you take. A powerful resource that I created for you is this AI powered UX process where you see the different phases of empathize, define, ideulate, prototype, test and implement. At every phase,

[1:28] I tell you where AI will accelerate your work, but where your human judgment remains critical. Let's start solving our main problem. Sam is a junior product designer. He has 18 months into a first design role. Now he wants to apply for his next one. He has three real projects but the portfolio is not getting any call backs. He has scattered project notes across Figma documents screenshots but he often writes what he did not what was decided or the value of it. The product we're going to create today and this is our product brief. Early career designers

[2:06] tell us that they have the work but they can't turn it into case studies that get interviews. Templates give them a process checklist, not a story about their decisions and impact. We want to help designers turn raw project notes into a clear, honest case study that shows how they think. Every time I have a problem to get started with, especially when the requirements are still vague or unclear, the best place for me to start thinking and defining the problem so I actually know what to design is working inside Claude or the LLM. I start by actually creating a project. Why? Because I don't want everything that I create to be scattered chats like this. Do you

[2:52] see? Over time, your chats become fully scattered and you can't find anything that you want. So, it's very important that you place everything you want inside a project and you're going to see how we will empower this project with context. So, in this case, I want to name my project designer case study creator. Now, once you create the project, you have multiple things here on the right that you can utilize. The first and most important is project instructions. Project instructions makes Claude operate in a specific way inside this particular project that you're working on. So in my designer case study, of course, I want Claude to be a designer. And very often if you're not

[3:41] sure what kind of instructions you can place, you can always brainstorm that in Claude. And what I'm telling Claude is in this project, I'm a product designer. I'm designing a case study coach, a web app that helps early career designers turn raw project notes into clear, honest portfolio case studies. I gave it the PM brief and the persona. I'm saying the brief and the persona are attached

[4:07] because I plan to attach them as context to the project. But here's my instruction to Claude. I'm saying when you answer, keep it concise and structured. Label assumptions clearly as assumptions. Don't give me something that is not a fact and pretend that it is. Ground your ideas in the brief research and say when something is not supported. Never invent metrics. Ask me clarifying questions when the brief leaves something open. This is the PM brief and the persona about what we're trying to create. So I'm copying that as well. And in this case I'm going to add this as context because this is context about the project. And you will see when I'm adding context I can

[4:52] either add it as a file. So for example when you're working on a real project your context could be coming from a product requirement file that your product manager has given you. So you can always upload it from your device. You can add it as text. This is what we're going to do here. So this is my PM brief and persona. You can link to Figma. You can link from your Google Drive or from your GitHub if you had existing information. This is a perfect space for us to talk about connectors. So let me show you how to optimize your clawed environment so you have access to

[5:31] everything you need. Right here on your left navigation, you have access to customize. When you click on customize, you will have access to three elements that are very essential to have context inside of Claude. Claude skills is something we're going to talk about more later. There are skills that are available through the community for you. The most important skills that I use are ones that I have specifically created and I'm going to show you how to create your own. Connectors is how you make your other apps talk to Claude. For example, in the context of a product designer, your company may use Microsoft. And if that is the case, you need to connect with Microsoft. You may

[6:15] connect with Slack so you can pull in messages that you may have had with your colleagues that are related to the project. Once you've made those connections, Claude will be able to read and write from the application that you've connected it to. It can pull context from inside your Atlacian MCP. That means if you're working with Jira or Confluence, you may using the Google environment like Google Drive or Gmail. Of course, as a designer, the most important you want to connect to is Figma so that you can leverage the Figma MCP to read your Figma designs and also to write in Figma. If you're doing the Figma connection for the first time, this used to be so complex in

[7:01] the past, but now it's super easy. All you have to do is click on connect, which will take you to an authorized page inside your browser. Once you've connected Figma, now Claude will be able to read and write inside your Figma files. Lastly, plugins are also tools available through Claude. If you're using codeex as well, please note plugins in claude are different from codeex. For example, Figma in claude is a connector. However, Figma and Codeex or Chat JPT is an actual plugin. I will not be covering plugins right here in Claude because I honestly don't use them as often. I tend to use connectors much more. So in this understand phase, we're going to try to understand what

[7:52] we want to solve. We want to do some research, anything that we can do with the support of an LLM. We already have some brief about what we're trying to solve that we added to the project. So I'm going to guide you through how I do it. This is the phase when I normally start talking to Claude and just thinking out loud. So, I need to start designing a solution for this problem that you can see here in the PM brief and the persona. Sam, I want you to repeat to me in your own words

[8:22] your understanding of what we're trying to solve. What do we know already and what are we assuming? Can you do some research in the industry and see how many designers are like Sam who are posting, they're struggling because they don't know how to create any case studies for their work. Pull anything that you can find and don't start solutioning yet. Just research and give me any insight that you have. Be very clear. What is assumptions and what is facts? Give me references to where you found the information. Then ask me any questions about things we do not know yet. So

[9:01] we can start designing the best direction for this problem. And by the way, this could be anything. And this is where I want you to trust your intuition more than anything. Like just think out loud. Think of the LLM as if it's your intern that you're thinking with. And very often when you're working with a junior designer, it's like in the process of talking out loud, I start getting more ideas because we're thinking on this problem together. And I said this again here. I'm just getting started. I'm familiarizing my intern Claude with the work rather than immediately jumping at solutions. Now, while it's doing this, very often I find myself thinking faster than the

[9:44] LLM. Another thing that I could do, I can come back to the project itself and I can run another task while I'm waiting for Claude to do its own thing. So, what I'm going to run here is I want to plan research. So let's say at this step I do have access to users, people that I can interview and I want to talk to just to get some realistic feedback because I don't want this to be based on assumptions. If you have that luxury in your project, that would be fantastic. So in this case, I'm going to use this prompt where I ask Claude to plan the research for me. I'm going to do

[10:22] research with real people, but AI is going to help me prep that research. And I'm going to paste this prompt here where I'm asking it to give me an AI research goal, three research questions, who should I talk to when I'm interviewing, and a 30inut interview guide. And again, of course, you can edit all these details to be exactly what you need and based on your project and what you have the ability to do. So, the reason I'm showing you I'm doing this in two different chats is because we're under the same project. All these chats are connected. They all have the same project memory, the same project instructions. But what's better is I can come right here to

[11:04] the menu and I can rename this chat and paste plan the research. So that later on if I want to search what is this chat about I can actually figure out this is the plan the research and right here I want to rename this to my initial brainstorm so that when I want to find these conversations I don't have to guess which one is which. So coming back here to the brainstorm, Claude followed my instruction. It's telling me the problem in its own words. What we know versus what we're assuming. Some research insight. The fact that this problem is widely recognized by hiring managers. It's a fact and we have multiple sources that back this up. What hiring managers

[11:47] say that they want. This is a survey from NNG that actually gives us this insight. the fact that the market is crowded including with AI tools. There are tools like UX folio. So this is giving me an idea about competitive market for the product that I'm trying to create. And by the end of this brainstorm, Claude has identified some questions that will shape directions if I'm able to answer them. So it's asking me for evidence. Do we have some real people that we can interview? Five to eight of them just to get real insight. Do we know what input notes are they going to give us that we can use? When I come back here to plan the research conversation,

[12:26] I see that Claude followed exact instructions. It identified three research questions for me. And this is where you need to use your human judgment. Review that, iterate on that, see if it actually makes sense. But generally, it's really good at helping you at this phase. So the second thing it's giving me is criteria about the participants. We want to do six to eight interviews. It's giving

[12:50] me specifications what these designers need to have in common. And lastly, the interview guide. And as you notice, this is right here. But let's say I'm happy with this content. Now, I can prompt Claude further to specify what output I want this in. So, because I'm a designer, I'm very visual. Sometimes I like things to be organized as a visual so I can see them better and I can have the ability to edit them further as I check with my team and my product manager. So what I want to do at this stage is I want to send my research plan to Figma so I can edit it further there and have

[13:33] it branded. And this is where I'm going to start showing you how to use a skill. To access a skill, you can either click the plus button and come here to skills. And here you will see access to any skills that you've created or used before. You can always browse existing skills that are created by Entropic, but those could be more generic. These are mine that I created. And most importantly, what I want to show you today is how you can create your own skill. And you can see here

[14:06] I created a skilled called Namat's brand that generates things in my actual style and brand. And I'm saying create the interview guide as an artifact in my brand. And the output I expect from that is a stylized document or artifact that I can share. Now I want to show you how to go one step further and how to send this to Figma using your Figma MCP so that you have everything in your same document. And for that I'm going back to the project. I'm going to start a new chat. So for this I want to define the problem. I want to have a visual problem statement that I can take back to

[14:48] my team and my product managers and discuss it. So I'm using this prompt that says using this design brief give me one problem statement for Sam how might we questions and turn this into a visual artifact that I can share with my PM. Now because I want this to look in a certain specific way I want to use my design system and therefore the Figma MCP. Select the design system that I want to use. This could be your work design system. Copy the link for that from Figma. Come back here and I'm going to paste this link and I will say use my design system as your main styling reference. And

[15:34] now I will click enter and you will see the Figma plugin will appear here because Claude is reading my Figma file and using it as reference. Coming back to our previous chat, the case study. This is the artifact that it created. It's using my own brand skill that I had. How I created this brand skill in the past is I use the exact Figma design system and I asked Claude to create a skill out of it so that every time I ask it to visualize something for me, it can use this skill as the reference. Now, remember how we said we want everything probably to be in the same Figma

[16:20] file. So, I'm going to come here to the to Claude and say send this artifact as vector editable layers to my Figma file. Clicking the check mark and at this point I want to come here to the Figma file where I actually want to send this. A clicking command period will allow me to see my page structure again. And I want to send this to the understand page right here where you have all the instructions. So I will click on the share, copy this link and I will come back here. And

[16:53] this is one more way to use the Figma MCP with Claude. Claude can write into your Figma files. In this other chat, we've asked Claude to read our Figma design system. It's reading Figma and applying here. I'm asking it to write inside my Figma file and I'm sending this to that specific page while it's doing this. And again, this is the advantage of working in multiple chats because you don't have to wait for Claude. Multiple tasks are running for you. So, this is the problem framing of what we're trying to solve. And I can see that Claude styled this with me, my design system. So, let's do the same thing. Let's send this to our Figma file. And here you go. Claude sent the

[17:40] discovery research to Figma styled with my brand as well as a problem statement that we're trying to define and create. And the last thing I want to do with you at the understand phase, and again, all these things can vary per your project, but I want us to get a design brief or a prompt that we can use. is now that we understand the problem. So we can move to the next stage which is ideating multiple solutions that we want to build. But this prompt basically asks clogged to give us a design brief that we can reutilize and that define four meaningful directions tied to how might we

[18:23] questions and finally to give us a prompt that we can use inside the Figma design agent to iterate. So now that we've moved to the ideate phase, there are different ways that we can go. One thing is you can use the native Claude design that exists within Claude. If Claude is the main tool for your work and you have unlimited tokens, this is a good way to go. But if not, if you are a user who has your own $20 pro account, I don't recommend that you do that because even doing the very basic research that I was showing you how to do, I ran out of clawed usage. Let's jump to Figma right now

[19:05] and let's generate multiple wireframes. So to access the agent you can either access it from the canvas itself or you can come right here to agents and I can start a new chat. You can always attach similar to claude either upload a file in this case I could bring in my design brief. I could add context as Figma designs different files connectors or skills. I'm going to take the prompt that we generated through our LLM based on our design brief and our research that will inform the agent to ideulate multiple directions for us. And let's be clear here, my goal is lowfidelity wireframes. At this point, I'm still thinking of the UX. I'm still thinking of the direction that

[19:57] I want to build. I'm still thinking of the how of the product. So on purpose I'm asking it to make whatever it creates grayscale low fidelity. I don't want to worry about how it looks. I want to focus on how it works and ensure that it follows my research to optimize what I create for this designer who needs to create the use case. So you will see the prompt that I generated with the LLM is very specific and it's based on the research that I have which will guide the direction of what the Figma agent creates. Now here is what the agent came back with. It followed our instructions

[20:39] exactly to give us three directions that we're ideulating on. The first direction and it followed my prompt for that is an interview first direction. I can start by asking the designer questions. First of all, for example, they can give us a project context. We can ask them about key decisions that they made during the project. This is what will help us pull out the best things that they did and project it. So you will see the whole process as an interview first where we're asking them what decision changed the direction of the project. What are the trade-offs? What is your contribution? And we use impact and evidence and they can see a live preview of the case study as

[21:21] we actually take these answers and plug them in. This is really nice. I like this guided interview approach. Now the second direction is a structure. First the designer can input the para project notes that they have. So they can place that and we can output different things based on the notes that they have given us. The agent in this case the intelligence we're building in our artifact is mapping what are problems worth solving research insight direction and tradeoff and based on that we're trying to give him a completeness of these are the signals that we have. your problem is strong. The decision not really. The contribution, the impact, the missing evidence. And in order

[22:06] to fill the gaps, we're allowing him to answer three missing questions. I like this approach, but it's a little bit harder to map. Now, the third direction is feedback first. So, Sam has his draft here that he can replace, and then on the right side, we show him the hire manager's review. So the agent is acting as a hiring manager and it's showing three priority gaps based on his input. So we have him review the draft, select the gap, revise and recheck whatever is the problem. The agent right now has given us three directions in which we can design a solution for this problem. And like I said, I'm doing this in Figma here just to show you that you can

[22:50] use the agent because you can further edit these layers as vector. So if you wanted full control, you can do that. However, this stage very much can also be achieved from inside claw design. If you're doing this at work, the recommendation that I have for you at this phase, definitely work with lowfidelity wireframes. Don't start with something pretty because we are humans. You will get enamored with that. If you show your product manager highfidelity designs sooner than you should, you will get the wrong kind of feedback. So validate the direction that you want to go with your product manager at this stage before you actually move on to the next

[23:31] phase. So before I move to the highfidelity stage, I created a comparison of which way I want to move between these directions and why my pick is interview first, which is the first screen direction. And the reason that I like that is Sam could get started with nothing, just his memory. What it solves is it directly solves the problem because we're asking him one question at a time reviewing that blank page and he can contribute his decisions directly. However, there are different things that I actually liked from the other two pages even though they did not really meet my criteria and I'm going to borrow the best of both of them. This is a progress signal as to

[24:15] give the user indication how he's doing. And the second thing that I'm going to borrow from the feedback first is the hiring manager review at the end so we can give him that as a last step so that he can see how a hiring manager would perceive his work. Now that I've made this assessment and I'm very clear on what I want to do, I had Claude help me synthesize this ideation and this conclusion that I wanted. and Claude actually used the Figma MCP to create this visualization for me that compares the notes using that I've asked it to also create from all the context of this project

[24:56] a prompt to start building this prototype and once again what I have to call out here before I show you the prototype that I built inside Claude is there is different ways you can go from here there are so many tools that are accessible to us today with AI I native design. I show you that in other tutorials how to move from the ideation in Figma design agent to Figma prototype linking to you above if you want to do this here in Figma. But the path that I'm going to show you today is how

[25:27] to do this in clot. And I'm going to copy this prompt go inside my claude project. Paste this. It's exactly telling claw to reference the project, telling it to build everything based on the conclusions that we've made. It also asks claw to build with accessibility in mind, making sure everything is well contrasted. And I also asked it to use the styling from the design system that's inside the Figma file we're using as the styling for this application. Of course, you can attach any Figma file that you want as your design system and build. Now, let me walk you through the final result. You will see this is the case study coach. As a user, I come here,

[26:13] turn your project into a case study that shows how you think. I'll ask one question at a time and build your case study beside your answers. I only use what you tell me. So, we have multiple options to get started. We can paste project notes as a user. So I could paste something here. If I have a Figma link, I can add that. Or if I want to start from scratch, I have nothing. Then this

[26:40] will guide me through key decisions, the project, the challenge, what I learned, the key decisions. This is amazing. And it shows me a completeness progress right here. I can save and exit. Let me get started again and use an example project notes. So it says reading your notes. Okay. And then it right away assessed my notes and it said here's what your notes already cover. I drafted these in your words using only what's written. So it allows me to say this looks right and to move on to continue to the questions and I can see my progress. 6% is complete so far. Okay, that's

[27:19] great. I want to save and exit. And I can do that. I can start over. I can continue my questions. actually want to start over to show you if I were to get started with a Figma file how this would look like. In this case, I want to give it my actual Figma file as a starting for this project. And I'm saying reading the Figma project. Can you imagine how much easier this will make it for me as a designer to write a case study. Wow, this is amazing. And here is what it found. It said, "Here's what your Figma project already covers." Starting with the Figma project gave me seven out

[27:56] of nine questions completed 39% still two things to ask but it already answered the problem the question what I learned and I can verify each one of these by saying looks right proceeding here I have a few more questions to answer so I put my answer here what the project is for and once again it validates my answer it highlights that my answer may need more evidence. I can make choices guiding the designer to add more instruction. And when I reach this phase where I've answered all the question, it says run the hiring manager check. And when we do that, now it reads our case study like a hiring manager to give feedback. It shows me what's strong, what needs work, what's

[28:45] mixed, and it allows me to see my case study. I can either download it or copy it and it's right here in a live preview. This is incredible. This tool is fantastic. It is styled as I like it to. Now, the next step, I want to push it as code that I can save and reuse later and decide how I want

[29:10] to publish it because the options are endless. Okay. So now that this is created and we love it. I can either use it for testing as it is because a claude artifact is something that you can use. You can share it with other people in your company. It's accessible and that's a fantastic upgrade that Claude has done. But also if I want to save it as code, push it as code and maybe use GitHub pages or Versal to make it go live like this. We have moved today through a completely AI native UX process. We empathized with the user. We defined the problem. We ideiated with the Figma design

[29:53] agent. Chose one solution combining multiple values from different ideiations. We prototype with Claude and the Figma MCP. A live functional prototype that we're able to test and further validate with our users. There's so many ways you can create this prototype. We can send it to Figma make with the complete context and you will see it will also create it super accurately. So being AI native is not dependent just on the tool that you are using. It's dependent on your attitude and your process. AI is not an afterthought for me. It's where I get started. It's where I brainstorm where I think. It has an incredible ability to save me tons of times at every stage. But what I

[30:44] have to ask you to keep in mind is AI accelerates at every stage. But it's your human judgment that makes the difference. Following this process that I suggested that is user centered and based on research is what makes a difference between how a designer uses AI versus a product manager or just an engineer who simply is vibe coding in some tool with claude. It is not the same thing. This is how you keep the user at the center of everything that you do. Please take a moment to let me know how this course has impacted you. Leave me comments. I always read and reply to your comments and they

[31:25] make a big difference for me. If you like this video, like it, hype it to support it, reach other designers. If you want to continue as a design engineer publishing this to the next level, beyond an artifact, watch this design engineer video process. Let me know what you want to learn

---

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