What's up, everybody? Thanks for waiting. Tariq, good to see you. Yeah, nice to see you as well. Um, so yeah, welcome to the community. How's everyone doing? Where's everyone coming from? I'm seeing a lot of distribution here, a lot of Okay, we got LA, Seattle, I saw some international. Right on, right on. Sweden, San Jose, cool. All right, well, we are here to uh talk about from Claude code to Figma and back, small niche topic that uh nobody's really talking about, but I'm glad we have Tariq here to help >> >> go through some of the basics and um I know we got a good uh spread of the community here. We got designers, we got developers, so uh this will be good to kind of go through some of the basics here and talk about use cases, but um first I'm Brett, I'm a designer advocate here at Figma. Uh I am San Diego based and I'm excited to be here today and we have Tariq from Anthropic. Do you want to take a minute to introduce yourself? Yeah, I'm uh Tariq, I work on the Claude code team. Uh yeah, I am you know, uh spend a lot of time trying to figure out like how to use Claude code with new new tools and and different partners. I I think there's like always new things happening with with agents and uh yeah, I was really excited about, you know, the new MCP you guys put out and I uh spent a bunch of time playing with that this week and excited to talk about it. Brett, yeah, I've spent a lot of time with it the last couple of weeks, too. It's been a new development. Um uh some new some new tools that we released there, so I'm excited to talk about uh how we've both been kind of playing around with it to see what happens. But first, a little housekeeping. Uh just so everyone knows, this session will be recorded and emailed to you. Um another thing, there is a a chat, which we love seeing um and we love talking to you through the chat. If you have specific questions, please use the Q&A button. We do have some friends backstage in the in the live uh stream here who are going to be fielding some questions and and making sure we get as many answered as possible and then grabbing a few kind of key ones that we might want to talk through live here. Um and then the last one is be nice, everyone. Uh we're all part of the same community. Um we do have our code of conduct for live streams, so uh please be kind to each other in the chat and elsewhere in the world. So, um a little bit of an agenda here, intros, already did that, cool, we're ahead of the game. Um we're going to go through I'm going to talk a little bit about the Figma MCP server, uh kind of high level why it exists, what it does and then a little bit about some of the new developments with it. Um and then we're going to uh talk about skills and how skills can teach Claude code things that we want to teach it um and then take a look at some demos and do some some live uh tinkering with this kind of stuff. So, uh and then get into some questions. So, first, I just want to like level set. I don't think this is news to anybody, but uh the product development process is getting condensed for many, many reasons. Roles are blending. What is a designer? What is a developer? What is a PM? All of these questions are coming up. Um and those are great questions. I think the one of the more interesting angles is that workflows are blending and that's because of AI tools like Claude code uh and all the tools that you're kind of knee deep in every day, Tariq. Um and really that's the kind of like the cost to go from inspiration to prototype is going way down. And what that means is ideas can start from anywhere. I think previously, uh you know, the design canvas was a great place for ideas to start because it was very low cost and code was kind of hard to set up and scaffold out and like kind of took some effort and those kind of that gap is kind of changing. So, we're seeing ideas start from anywhere. We're seeing people prompt into kind of inspiration to prototype. And so, um with that world, we're able to kind of go faster with these agents, but work does tend to potentially get a little siloed. Um and there are many ways around that, but um we see Figma as a a place for that divergent thinking and collaboration. And so, uh you know, whether it's a durable file or just kind of like a sketchpad, you need that space to be creative and explore. Um I like to think of it as like spotlight versus lantern mode. When I'm going into like prototype and code, I'm spotlighting on the problem, I'm kind of building towards that. Uh lantern mode is uh where I can just kind of shine all the light in all the dark corners and see where the inspiration comes from. And so, we're seeing kind of a source of truth shifting. Um but for me, I don't feel like it's not shifting to code, it's really shifting to like the system. And so, we're talking about design, not just design system, but design, research, content, all this different uh input is really kind of the source of truth for how all of these ideas evolve. Um and when we talk about system, we're talking about context. And that's kind of where I see MCP coming in. Uh for us, we're talking about design context. And so, we think about pre-MCP days, um we're talking about clearer handoffs, describing changes, manually sending screenshots back and forth. But like with the advent of MCP, Tariq, I'll throw this to you. Like can you give us a sense of what the MCP is? Not necessarily at a technical level, but I just want to kind of demystify it a little bit for our group here, so we can kind of get past that. Yeah, I I think basically MCPs allow, you know, your apps to like uh to communicate and talk to Claude code. This can kind of go either way. I think one thing I like about the Figma MCP is that like Claude code can both uh really act as a collaborator inside of it. It can, you know, uh pull data, push data. Um but yeah, I think MCP is a great protocol for just like getting all of your data into your agents because you're, you know, that's really what lets them be as smart as they can, right? And then work across all of these these different contexts. And so, yeah, for design, so much of your context is is in Figma. Yeah. Cool. Yeah, so when we talk about round tripping from code to design and back again, like MCP is kind of the pipeline that lets that agent traverse those surfaces and keep its knowledge base, keep its context intact as it goes from surface to surface, which is critical. Right. Yeah. Cool. Um so, talking about MCP, talking about moving fluidly between code and canvas, like we've been pursuing this workflow where it's like a single idea manipulated on multiple surfaces, right? Code is a is a material. UI is a material. Historically, they have kind of two different worlds that are different sets of requirements to function, so there's always the translation layer. Um but for many reasons, that translation requires kind of a lossless translation from code to canvas, which is why we need these MCP pipelines and these different capabilities. So, MCP servers uh have different tools and capabilities built into them. Is that kind of a right way of describing it? Yeah, I I think so. There's actually like an interesting like research angle here, too, where like the models tend to think in these this very abstract space. So, like uh for example, one of the questions we get asked is like, what does Claude what language does Claude think in, right? And it turns out that Claude thinks in like a sort of universal language and then translates to like English or German or Arabic or something. Um and it's kind of also true in code. So, like when uh Claude is seeing your, you know, your React code or something, uh and it's trying to convert it into the Figma like equivalent, it's doing that sort of translation, right? And and so, uh Claude like understands it at like an abstract level of like, oh, what is the app that you're trying to build? And then it's like putting these out into different languages. And it's yeah, surprisingly like really, really good at that. Um Yeah. Cool. So, then and then that's like that's what we're talking about like the read and write capabilities on from the Figma server side. These are connection points that allow that abstract thought that the agent is thinking or the model is thinking to to kind of input into the platform of Figma, right? Yeah, exactly. Yeah, it reads your code and then just like, yeah, turns that into Figma code, yeah. Gotcha. So, on the Figma MCP side, we do have these read capabilities and these write capabilities. The read capabilities we had for some time. Um this is uh allowing Claude code and other agents to read design context and extract that from Figma uh to use and implement accurately. Um more recently, we've kind of been investing more in our write capabilities and those are the writing to Figma. So, prompting Claude code can create and edit designs in Figma uh that are like linked to your system or code base cuz it has all that context as well. Um and so, I want to dig in a little bit to the right portion because I think that's like the newer kind of more exciting portion that we're going to be talking about. Um so, initially, we released the generate Figma design tool on our MCP and that was like a notable first step. It was getting layers from a code base onto the Figma canvas. Um we knew it was kind of an initial phase. Community was quick to remind us that it was. We knew we needed to do more. Um and um so we saw that opportunity. Um and the rad part about working here at Figma is we do have an incredible community. And so we've seen how um y'all have worked in the community. We've seen how y'all improve workflows. I know there's were a handful of kind of bridge plugins uh that were being developed to get us a little more further down that line of being able to bring in components and and link the design system and tokens. Uh but so we did see an opportunity to formalize this native solution. So now in beta, um we have this use Figma tool in our MCP. And that uses our plugin API to directly manipulate and control objects in Figma. Uh creating files, organizing frames, pages, managing variables, um and even some FigJam connectivity that I know Tariq, you and I have played around with the FigJam capability, too. But um it should be interesting to see how that goes. So um being able to write to It's one thing to give access to Figma, give agents access to Figma. It's another thing to like let them know how to use it or let them know how you want them to use it. Um and this is kind of where we see skills come in. Is that right? Can you give us like a high flyover of the power of skills when you're dealing with agentic workflows? Yeah, I I I think skills basically just give your agent like specific information that uh maybe were sort of specialized before, right? And and so it allows you to like build on top of uh specialized knowledge. I I think like for Figma, for example, I you know, I'm not a designer exactly. So I like sometimes I get lost in like what's a layer, what's a component, you know, like what's the like where do I put the the variables and like how do I build a design system and stuff like that. Um but one thing a skill can do is be like, "Okay, here's the Figma MCP. This is how you communicate with Figma." But then it's you know, you can, for example, write me a skill that's like, "Okay, like, you know, when you're translating a component into Figma, this is how you sort of structure it and you know, why you might want to like, yeah, turn create variables or uh things like that." And then I, you know, when I'm using the Figma plugin or and and this skill, um you know, the Figma that I create will be like much more readable to you, right? And follow those those standards better. So, yeah. That's such an interesting angle to like that it's kind of closing the gap even more between like a developer communicating to designer uh and designer communicating to developer, as well. Like the the kind of shared overlap in knowledge is is getting filled in uh by these skills, which is rad. Um and I do I love the way our team approached the this and and in that it's kind of a completely unopinionated access to Figma via this uh use Figma tool. Um we did build foundational skills, a few foundational skills, one of which is on screen now, this Figma use skill. Um and that kind of teaches the agent just generally how to interact with the plugin API. And so that's going to be kind of integral for this workflow. So we'll get into like resources on how people can kind of download and install that stuff. Um but it's not necessarily how you want to use Figma. That's where like developing your skills on top of that and and creating skills for Claude on top of that foundational skill is going to be uh you know, where this kind of extends into everybody's workflow, which is rad. Um and so that's where we have I mean, I know it's in beta. We uh you know, it's going to do some things better than others. Um and so the great part about this is it's kind of unlocking platform level access. And so it's malleable. And just like plugins and other community resources that our our community's been able to contribute, uh this is now a new artifact that y'all can explore and build and contribute uh to our our kind of growing list of community uh skills that we have. And we'll get into more about kind of creating skills in a minute. Um but I do want to get into a little bit of the demo stuff. Um I'm going to pass it over to you, Tariq, um to kind of share some of the stuff you've been able to kind of crash course on over the last week or so. Um I want to give everyone a sense of like what this is, what it feels like to use it. Uh maybe a little bit of like how to get it up and running. Uh I think it would be beneficial. So, yeah, let's see what let's see what what you got. Yeah, okay, great. So, um yeah, what we're going to do is we're just going to talk over this like this sample app I made, which is like a recipe cookbook app um that is built in the Entropic design system, right? And uh I think basically what we are um you know, what I use Claude Code to help build this, but I do want to iterate kind of on the design with you. Uh I have a lot of these components, um but I think that like, you know, when especially when we're thinking about new features like meal planner, shopping list, etc. Like how does that look? How do I, you know, like I messed around with this and I I think it looks kind of ugly now. Um yeah, that's our that's our goal is very is is to like collaborate here and um yeah, I I think that uh first off, we're going to be using, you know, a mix of uh terminal and Figma. And and so I, you know, if you're not familiar with terminal, I I think it is like um it it can be intimidating, I think, at first, but it's really like um you know, quite simple. I I won't go into a full terminal tutorial here, but I think definitely give it a shot. We also have Claude Code desktop, which is a desktop version if you're like you know, less comfortable with terminal. But to get started, you install the Figma plugin like this, right? Um and then it's so it's Claude plugin install Figma. Um I've already installed it, so I'm not going to to run it here. Um but then I think an important thing to note is that you have to like make sure it's authenticated. So you go to /figma / uh MCP. And you can see here that like Figma is connected, right? So um this is connected to my Figma account. Um and so yeah, I think that's the that's the start of it. Um We But yeah, what what I've done now is I I've started Claude Code in my code, right? So like I've got this recipe box folder. I've got it in my code. Um and what I think would be fun is we could sort of collaborate on this card component, right? And so uh I've got this in code and now I'm going to prompt Claude Code. And uh we've got a shared Figma, as well. So I'm just going to copy this link, right? Then I'll say like, "Can you uh create this uh the card component in Figma using the Figma MCP. Here is the link to my Figma." You don't have to usually say Figma MCP, but I just like, you know, live demo, I like to be as clear as possible. Uh make it uh an adjustable component, right? So I'm going to ask Claude Code to to go ahead and do that. And um while it's doing that, yeah, it's loading the skill. Uh I I think there is um uh yeah, there is uh other, you know, like we talked about skills. And so I I do want to I might like multitask a little bit here trying to switch between things. Um What if I want to create a skill that will, you know, like what's a good starting skill as a as a designer, right? And I think one of them is like how do you think about your design system, right? Um A great thing about Claude Code and skills are that these skills are um basically something that uh you can Yeah, you can ask Claude Code to create, right? So one of the prompts I like to do is uh you know, we've got a skill creator. I'm still a bit um You can just ask Claude Code like, "I I want to make a skill that describes my design system. Um You can uh interview me in depth using the ask user question tool." This is sort of like a a prompt I'll I'll share later, as well. Um about it uh and what detail to have. So this is like an interesting way of like like starting out with the skill. But um you know, while we do that, we'll we'll like Figma um use that. But yeah, so I I think like we're going to um yeah, have Figma go ahead and try and make these components for us. Um Yeah, any any anything Yeah, real quick. We covered a lot of ground there. I just want to kind of like recap a little bit and make sure I'm like rocking everything and we can kind of go from there. So in the in that first terminal window, when we did that initial plugin install, where we ran that that one command, which we have available, we have resources and people can look that up and get that. Um Yes. That is initiating the MCP connection and installing these foundational skills that we talked about in one shot. And is that Is that correct? Okay. So then you you then you can go in, start your Claude session, hit /mcp. You should see it. You may need to authenticate your Figma instance or what have you. But all of that should be like Claude kind of handles all of that installation for you with just that command. Totally. Yeah. Yeah, that's rad. And then so you're in and if anyone's not familiar with terminal, you're now like you're in that local repo of your recipe box. You're in that folder on your computer and you're running this Claude session to run these commands. That's right. Yeah. Cool. Um Cool. So as we see this guy, I think this is really important to like see that terminal running cuz I think that like a lot of designers are not super familiar with that. It's good that you called out the desktop app and the desktop app capabilities are equal to running Claude code in terminal, is that accurate? Um, yes. >> I maybe hard to say equal in broad strokes maybe, but like you can do a lot of the same things there I'm assuming. Yes, exactly. Yeah, yeah, yeah. Um So, uh Yeah, exactly. It is just it's the same skills it you can you know, it won't be a terminal so it looks more like a regular app, but yeah. And I've like split out this so we can see Claude working at the same time, but maybe I'll I'll move it out for a bit and then you know, uh come back. But um Yeah. And that's this is okay, so this is a good moment too cuz when I was like playing around with this and like running making Claude code do its thing, sending these agents out to like build things in Figma and I was like sitting there and like watching and like we're sitting here on a live stream like watching the terminal run and I'm like oh gosh, this is so cool. Yeah. But like in a normal workflow you wouldn't necessarily be doing that. You'd set it you'd be doing what we're doing. You'd set it to run, it would go, you could monitor it, but then that frees you up to kind of focus on other things like running another agent or doing more deep design work and so um that's kind of a key thing to remember as I was like playing around with this. I was like well, I really could probably build this component myself in Figma without having that's not the point, right? Um, the point is that you can kind of like delegate these things while you keep your focus elsewhere, which is nice. Yeah, totally, totally. Yeah, I mean I I think also you know, this collaboration between like being an engineer and a designer right? Like where I don't necessarily know um you know, how to create Figma components in in Yeah. >> And maybe we can show some of like the Yeah. other prompts while we while we wait for for Claude, you know, so um uh here's an example thing that I did, right? Where I started out with this like sketch. Obviously, you wouldn't do this you know, you're a you're uh you're a developer. I mean maybe I don't know. I have my process. I might paper paper and pen. Um, but you know, I I then asked Claude with this prompt like okay, flesh out the sketch and turn it into something in our design system along with a bunch of components. And yeah, looked at the recipe box code, right? And then you know, created this, right? And now I can sort of like you know, as an engineer be like okay, like do I do I want to toggle this card looks good, you know, what if I add an aisle group here, right? And I can sort of like mess around and edit with with Figma, which is like and I can get you in it as well, right? Which is like the really exciting thing where I feel like before you know, before the Figma MCP I as an engineer I'd just be sort of like asking Claude like hey, can you like uh make it look good, you know, and like you know, like this looks kind of ugly. So, um this is like one of the the prompts we did, right? >> >> Um and then uh yeah, well, let's uh let's think about it running. Okay. So, yeah, this is one of the prompts we did. Um And uh yeah, you can see here here are some of the cards we've got now, right? Um and uh yeah, we uh like we'll be able to collaborate on this and and yeah, let's check in on on Claude here. Um and so this is the the card component we've got. I think something to call out yeah. Here's like this is this is what the card looks like. This is what Claude's made. Okay, cool. It's like consistently messed up like this thing here, right? Um the the circles and then we've got no images. I think images are still like we're we're still working on that with the >> Yeah. API, right? Yep, yep. Image image generation or image upload via MCP is is something that's in the works now and that's it's a good thing to point out. I mean this is a beta tool and like it's it's it does a pretty good job though. I mean I'm looking at this here and I'm in this file with you. It created this recipe card. There's some visual things to clean up, which are easy enough to do. I don't know like just going to shrink that down, but the notable thing is that it created it as a component and it created it with variants and it it knew that it had all these variants and so you can drag this out and see like if you if you click on that that I just dragged out and you know, you see on that right panel it's got all of the properties. It's got the category, the title, the subtitle, time, servings, difficulty, all these toggles, these boolean toggles. It built all of that from the code base and generated that and constructed that and architected it correctly in Figma, which was a big gap before that we didn't necessarily have and so Yeah. it speeds up this process immensely. Like now as a designer I go in, I know the structure of the dev component and I can go in and just kind of you know, tweak what I need to. Like I'm going to go ahead and make sure all of these are uh what was it? 30 height or maybe it should be hugging height. Yeah, there you go. Hug hug height. So, I'm making these tweaks. Um and then maybe let's say I want to want the rating and these are like minimal tweaks that like sure, you could potentially do this in in CSS. Like we're we're not necessarily doing anything dramatic here, but I just wanted to kind of prove that point so that okay, so now we've made some tweaks to the the card component. Uh let's take this collaboration a little bit further, right? Like how do we how do we get this back into uh our code base? Yeah, yeah. So, definitely like I I think I think the collaboration is like a a really good thing to point out also where um you know, we have a pretty limited time in this demo so we can't we can't do too much, but I think this idea of like uh you know, the Claude code is a very single player experience and and I think you know, adding Figma to it enables us to like sort of collaborate in this like live way, right? And we could you know, play around, add comments, like start building screens together. Um but yeah, I think like basically let's uh let's say now like um I've added and modified the card component in this Figma screen in this Figma. Um can you update the component in code to match? Um Okay, so uh yeah, let's let Claude run and um Yeah, I I think again like this is one of those things where especially as an engineer like one of the things that I used to run into a lot was like just missing some of the details in in the like implemented designs, right? And I think being able to say like oh okay, like uh Yeah, like I Claude will help me sort of make that translation really solid. Mhm, mhm. So, while this runs we can also um like I I can keep showing like some of these like I have a few other prompts or uh is there um uh would you prefer to talk about the about this flow more? Um we can uh I mean I've got some examples I can share too, but let's let's check on the the progress that I I getting it back into code seemed to not always take too long. So, I'm wondering if if we're going to get that Yeah, I I think it might take a a bit of time because I shall let me let me hold on. Let me start from uh Okay, cool. Uh I updated the card component in the Figma. Uh just wanted to give it as much context. Um can you uh update it in code as well. Okay. Um Yeah, so we'll let that run. Uh yeah, let me show you uh some of the other prompts maybe we've tried. >> Yeah, we had another one over here talking about the the marketing poster, which was interesting. >> Yeah, this was something where I really uh like doing, right? So, I just prompted Claude code like hey, can you create a marketing poster for this app in our you give the link. Um and yeah, like you know, this is one of those things where um a lot of times with Claude code it's really good at this like first pass, right? And I'm sure there's a lot to improve here, but now it's editable and and you know, tweakable and I can like even send this to my marketing team and just be like hey, here's like a a first pass or here's like something I have in inspiration. Um And so you can do it yeah, not just for like UI, but you can also do it for uh for marketing, for um for graphic design and things like that. So, um thought that was that was great, yeah. Yeah, that's cool. It's it's it's it's the blank canvas problem is it but it's the same conversation when we talk about like different cross-functional partners kind of sharing these artifacts and and it's like okay, well this is great because it now gives me something it gives us something to talk through. Like what are you trying to why did you want to prompt this? What are you trying to communicate with this design and like as a designer I can absorb that and like add my craft to it and make sure that like it gets to the point where it needs to get for all of us, you know, so um this is a cool connection point. We can like collaborate on it as well, so um yeah, and you can see so Claude code's working. So, it's like picked up your changes, right? You changed the the font size and and the body section has moved up and so um now it's like it's doing the changes itself. >> Yeah. And so um yeah, here we go. There you go. We've matched it. We've got the font is probably too big, you know, but >> >> Yeah, yeah, yeah. Now we've got yeah, we moved around the stars and things like that. So, um Yeah, and of course like we chose a very trivial example, right? But we we could have been like oh, let's make a shopping list from scratch and start mocking it out and things like that. So, Yeah. Yeah. Well, that's cool. Yeah. Um, I'd love to kind of show a couple of examples on my end that I was playing with um and get your take on them. So, I I have a kind of a different product um uh and I'm hoping our screen share switches over to my screen here. Yeah, there we go. Um, so we have this Astra product that we've kind of used in a couple of our demos, but I have basically just built this login screen that has a couple different states uh forgot password. Uh it's got an SSO sign-on, um a sign-up screen um and then if I kind of continue logging in, we have this kind of dashboard view, right? Um and there's a couple scenarios I wanted to play around with this and and I have like a storybook instance that shows all the components that I have in this uh and the the one that I wanted to point out is this kind of um this featured video card, right? Like I'm imagining that like I need either building this myself as like kind of a, you know, weekend coder designer design engineer, what have you or have a developer partner who's building this and and we identified that we kind of needed this uh featured card. Um and so we kind of just prompted it or coded it really into existence here, uh but we wanted to fine-tune the UI of it. Um and so over here, I I'm I'm not going to do it live like you were doing, but um I had this prompt where I just said build me the featured item card component on this Figma page and I linked to the specific Figma and it built this. This is very similar to what we just saw it do with your with the card example. Um but now I have the ability to kind of go through and like explore the space a little bit more. Um and I wanted to point this out because I I don't claim that all of these are good. In fact, some of them are probably bad, but like that's kind of the point, right? Now I have this Figma canvas where I can explore these spaces um and I can just kind of pick the the one that I want to go with and and feed it back in back back through Claude code to my code base. And I built this this kind of whole set of components in this file using that flow. I basically just told Claude to like build all these components and it and it did a really rad job with it. Um Another thing that I did was I exploded the the state of the login flow. I basically said generate design frames in this Figma file for each state of the login flow. Um and it it did that. I mean, it went through it it went through the logic in in the code side and it generated all of these screens. Um and so now I have like, okay, if I have an app that has a legacy flow that isn't well documented in Figma, but need to do the design work to iterate and enhance, um I can run this and like have it generate this and and now I have these pieces that I can play with. There are some some gaps for sure where it kind of just kind of misaligns some things. Um but what's cool is that it actually generated, and I didn't initially prompt this, but it generated this kind of fidelity notes on canvas where it it uh you know, it talked about what it did, uh talked about what components it linked to, talked about what it had to manually rebuild cuz there was no component in the library that it was this file was attached to, which was rad. Um and then it uh documented known issues where it would require manual cleanup. So, some of those things that I showed you like um this piece not like being kind of hidden. I think there was another thing up here where there's this like large gap here. It kind of annotated those and told me that I'd probably need to go in and manually clean those up. Um and I don't know if you have an answer to this, but I'm curious from your side like why do you think it like did that instead of just cleaning it up itself? Is it like a it doesn't feel like a limitation. It feels very smart that it like identified those things and documented them. So, like is there anything in the model that you can tell me why it decided to do that? Yeah, I mean, I I think that like um you know, we always say models are are kind of organic, you know what I mean? And so it's not we're never like, oh hey, there's like a condition where if right from Figma says that but like if you're like um I I think especially for Claude, we try want Claude to be, you know, very collaborative. We want it to sort of recognize when it should take its own initiative and when it should sort of like ask you, right? And it's like a tricky balance to get because like sometimes, you know, like um even between like an individual employee or like person you're working with like they might fall differently on the spectrum. Um so, I think like here Claude is, you know, asked to like sort of get your approval and and and do this, but um yeah, it's like something we're always tweaking, but I think generally I've been like very pleasantly surprised. And you can always sort of give Claude guidance, you know, you can sometimes say like, oh hey, like ask me questions or like, you know, interview me is something I like to say. Um or you can be like just just run with it, you know, like use your taste or something is something I like to tell Claude as well if I just wanted to like go ahead and do something. Go with it. Yeah, I've noticed that whether it's this approach or like in terminal, I've I've been kind of like you said pleasantly surprised when it like asks me how it wants me to proceed and I'm like, oh cool, we're collaborating here. It's not just like blindly going. So, you kind of touched on it, but like is there a way to kind of tune it like a recommended way to say like, hey, if I wanted to be a little more risky in its decision design decision-making, right? Like stray from the from the kind of typical safe realm if I wanted to push further. Is there a way to do that? Like would that be through that's not skills, right? That's different. Um I I think you can make like for example, a brainstorming skill and I I think that would be like a cool thing to like sort of you know, broadly do. I I think that like overall it it really is prompting, right? And and so um and prompting but it it's just like it's just thinking of Claude as a collaborator, but like, you know, giving it as much detail as you want so it doesn't need to like um infer your intent too much, right? So, like I think often times when I see people using agents, they sort of start with a very basic prompt. Like, okay, yeah, like implement uh like like make this look prettier or like, you know, make this design work or something, right? And then I think that like the more ambiguity you can resolve um or even just being like, hey, like I don't really know what I have in my head, right? Like interview me, ask me questions um or like I want to see different possibilities, right? Like implement this design eight different ways, right? Mhm. I think one of the great things about, you know, sort of using Claude code and agents is like that you have, like you said, this like very cheap and rich exploration space. So, often times I'm asking Claude to try a bunch of different things and then choosing one and you know, iterating on it. So, um yeah, I think there's no hard and fast rules. It's really just like talking to Claude, but trying to be more specific is always better. Um like treating it like giving it freedom, but being uh specific in what you want or even being honest if you don't know what you want. Very cool. Um I want to keep moving through. I want to Yeah. Show a couple more examples where um I want to illustrate thinking beyond just like generate designs for me in Figma cuz I feel like that's kind of like the first thing that designers maybe go to when you talk about agentic workflows. But there's a couple other examples that I wanted to point out where like this one um I basically asked it to compare the difference between the Figma frame and the login screen of my app and annotate those differences. Um and it it basically this was the design frame that I gave it and then it generated this screen um this frame which is as built in code um and annotated the differences and talked about the discrepancies between the two and um even categorized them as like high, medium, or low uh you know, risk or or alerts, right? And then um talked about specifically about component overrides that it found in, you know, components that were connected to my library where things had been overridden um which was rad. And then I took it a step further. I wanted to see if it could drop comments on that screen uh where I found it and it and it did that. Now, this is a little this is actually using our REST API not to confuse things, but our comment generation is through our REST API, but what why I point that out is because I I I maybe I should have known that, but I didn't necessarily know that, but as I was working with Claude, I said, hey, drop comments in and it said, cool, I can do that, but it's part of this, which means I need a personal access token from your Figma admin, which I then went around and did. So, it's just another example of Claude Claude code as a collaborator and the agent like knowing what it needs to do more so than I do and and kind of just prompting me to like help it do its thing. Um so, this is a really cool use case that I found. Um one other one that I wanted to point out um and then we can kind of talk a little more about skills if if you're down. Um but I I basically I had a local folder of JSON files that were contract files for my variable set. It documented all my variables, what they were for, and their naming and everything like that. Um and so in that local folder, I asked Claude to generate my variables in this Figma file based on the JSON files in the current directory. And if I open up the variables panel, it did it. Um but it basically made a collection per file, which is not necessarily how I wanted it, right? We have this dark mode and light mode as different collections where in Figma, we do have the concept of modes in your variable set. And so I wanted to point that out because we do have a community skill called CC Figma tokens. And so I ran that exact same prompt using that skill. Yes. Um and then the variables came out like this, which is a much more expected or or a much more preferable output. So, it it analyzed those tokens. It followed that skill and it generated all the modes properly. And so I think I wanted to share that cuz that's kind of like to me a very clear example of the power of a skill um when you're talking about kind of teaching it how to use the platform in the way that you want to use it. Um and so with that lovely segue, I'd love to toss to you about skills and like I know we talked a little bit about it. You talked about how um you can essentially ask Claude to create skills yourself, but from your perspective, what as designers or who are developers even go through their workflow and figure out how they can implement this kind of agentic version in certain places. What are the moments that make sense to think about creating skills around? Yeah, I I think that um there is a a pretty wide like categorization of skills, right? And I think I want to like I I think that like the the way for me to think about it conceptually is that like it used to be that there were specific things you could build on top of which were like systems, right? Like you could build on top of like your code system or your design system. Like you create a design system and then you share it. Um but there was a lot that couldn't be captured within a design system, you know, or couldn't be captured inside of code. Um and then you just need like these individual people to sort of like um uh own that, right? Or like like the the knowledge that lives inside of their head. I think skills are a way of it like sort of uh being able to build on top of each other's knowledge in interesting ways, right? And so someone might know, you know, yeah, how to use variables. I I think that's like that's great. Um and I think then like yeah, how would you think about it? I think some examples of skills are uh yeah, like how do you uh think about your design system? Um uh I think you might also want to create skills that uh verify that your design was well implemented, right? And I think it's like a good I think if you're a designer, you might want to work with an engineer closely to be like, "Hey, can we create some skills so that, you know, like when you're working in design, um it's closer to like, you know, what our expectations are, right?" So and so like uh there are all these tools that like you can do like a mix of like you can take screenshots, you can take like do DOM manipulations, you can do box sizing, like like all of these like additional information you can give Claude to like maybe verify your design, right? Mhm. Um and uh I think there's also just like um one of the funny things that we've seen is that like the most popular uh skill in is the front-end design skill. And this was actually like what actually I think one of our uh engineers who worked very closely with Figma, you know, uh was like, "Okay, I'm going to write a skill that shows that has like takes all of my knowledge of how to make Claude better at design and write it down." And it's like maybe a couple paragraphs that's like online but it just like drastically changes how Claude like design stuff. And I think there is like versions of the of that skill for you know, your particular taste in design as well. So um >> Yeah. And you you don't you don't have to like explicitly evoke these skills, right? Claude will find them and use them when it deems appropriate. Yeah, I mean I think that it's a mix. Like I I think if you really know you want them, it's worth just saying it. I think this is one of those examples of like being specific, you know? Um like the less Claude needs to infer from your intent, the better. Um but yeah, like it will also try and like infer as well. Um I think it doesn't always do 100% like, you know, there's sometimes where I wish it had invoked a skill. Um but like the models get better and better at it and uh yeah, the most reliable way is just to ask it to use a skill, too. Got you. And I think one more thing and then I think we'll get into some of the questions that we we may have been sourcing, but um Tell me if this is like the right line of thinking, too, cuz I know when I was working on some skills like I kind of tried to make them I started realizing like, "Hey, maybe I should make these a little more like smaller in size that can then be kind of combined with other skills, right? Like if if if you tell if you tell Claude to do a specific task, it may go through that and realize, "Oh, I can use this skill for this small piece and then this one for this piece." And it can kind of combine them and use them where where it needs to. Like you said, like you know, sometimes you want to evoke it explicitly, but sometimes maybe you kind of just hope that it finds the right skill. Is that the right line of thinking? Like kind of smaller composable skills more than just like big skills. Um I think that they can be both. I I I think that like, you know, um you know, like in the same way that you can imagine design systems that are of like made of tons of different components versus design systems that have like, you know, maybe larger components like glued together, right? Or have a mixture of them. Um yeah, I I think that like this is one of those things where I I'm hesitant to be too prescriptive because I think that like the important thing is to like try it out and see what works for like your particular like workflow. Um but yeah, I do like layering skills on top of each other and referencing skills. Um I I think that's like a a nice way of like uh um like yeah, giving like letting Claude mix and match knowledge basically. Yeah. Cool. Um rad. Well, you down to get into some questions real quick? I know we have like maybe 15 minutes left. We'll see how many we can get through. Um we've got a couple. How do you imagine agentic workflows benefiting from opening up access to tools like Figma? I can give my thoughts and then toss it over to you, but um I think Honestly, I think things are going to get a lot more creative. I think um it's beyond just like writing to the canvas like I was talking about. Like it's these it's syncing, it's it's ops, it's auditing, it's organizing, it's kind of linting things. Like there's a lot of leverage to um there for like some high energy, low efficiency tasks as I like to call them. Um Mhm. And I just think it's going to like kind of rip away some of the artifice of the tooling and it's going to allow uh me to run an agent or run multiple agents to do um some of the like kind of tooling work and that allows me to kind of focus deeper in the creative stuff. Um and that's what I'm kind of hoping will happen. That's what I see the that will happen with the ability to to kind of run agents on the canvas. Um cuz that's some of the more powerful use cases that I stumbled into was not necessarily designing for me or anything like that, but all of the kind of stuff surrounding that that allows me to kind of multitask those out to agents or delegate that and then like focus in on the deep creative work, but curious to hear your thoughts. Yeah, I mean I I think uh two things. Like one, like I said, Claude code is like a single-player experience right now. I I think like, you know, getting in access from things like Figma, like, you know, I use like Notion and Slack and as well as places like that where you're like collaborating with people, I think is really really important, right? And I I think that this is like um yeah, like, you know, if like I'm working with a designer, I'm working with them in Figma. So I I think that um lets Claude be more like a a collaborator overall. Um I think on your sense of like, yeah, things are being more creative, I think that's right. Like I I think that you know, the way that you and I are going to use the Figma MCP is going to be very very different, I think, because I'm not a designer, right? And and so like I think for me it's like sort of raising the bar of like uh you know, I um like uh of of how I can sort of visualize something in my head and try and like bring it to life, right? And I I think for you it's like, yeah, how do you use it to like um you know, really like help your your craft, right? And and I think that like there's a lot more depth there in the same way that like as an engineer, you know, I'm going to use it differently Claude code differently than you will, right? And I I think like um the best engineers I think are like cre- doing like 10% of what Claude code is doing is writing code and and 90% of it is like exploration or creating artifacts, like um helping do the like yeah, the busy work or or things that are like, you know, not as useful. So um yeah, I think there's going to be a lot more. Okay, yeah. That's cool. That was going to be one of my questions, too, that we didn't get to but like how does how what can designers learn from developers who have been working with these agentic workflows more? And I think you kind of just hit it a little bit, but you also touched on it earlier where my encouragement to designers out there is like if you're working with developers, like collaborate on how to use these tools together and like you'll learn from them and you can kind of bounce ideas off of each other. So Um okay, this is a long one. How can Claude adhere to coding standards in large existing project following the same guidelines developers follow building UI consistently, maintaining context over long sessions, and avoiding hallucinations. This feels like teed up for you more than me. So Sure. Yeah, yeah, yeah. I mean I I think uh broadly this is, you know, kind of a mix of skills and prompting and, you know, things like that. I I think that um the way I think about it is that your best engineers should be creating these like the scaffolding for Claude code so that more and people can start using it well. And so yeah, we've shared, you know, content on developers. Like I wrote an article on skills and things about how to like uh sort of create these systems. And and so I think it's a set of systems like skills, uh verification, um like good CI/CD, like all all of these things. Um but at a high level I think as a designer, you know, ideally your developers have done the the work there so that when you're working in in in your code, it's following the guidelines. Yeah. Yeah. Makes sense. Uh let's keep cruising. How can I make sure Claude is using a specific skill and if my output isn't what I expected, what should I do? We kind of hit on this a little bit as far as like make sure it's using a specific skill. If you know that skill is something you wanted to execute on, you can explicitly call it out. Um but the follow-up is kind of interesting. Like if the output isn't what I expected, what should I do? I mean I've found in in creating skills and using skills that if that's the case, I generally just talk to Claude and say, "Hey, this was off. Can we do it a different way?" And bake that into the skill and revise the skill. Is that that's kind of the Yeah, I I think what we say is like have a gotcha section in your skill. You know what I mean? And so like um add a little list of gotchas. So like, you know, when we were doing the Figma MCP earlier, it had like set the badge like a little bit too round, you know what I mean? Or like it was a circle instead. And so maybe there's something there where Claude like viewed that as like a circle instead of an ellipse. Or I I I'm I'm not sure what, right? But like you might try and like uh if you can sort of like empathize with Claude a little bit and be like, "Okay, like it seems like you're doing this thing consistently here. There's a pattern. Add it as a gotcha, you know?" Um but definitely thinking about like reading the outputs, trying to understand what the model is doing, and uh you know, if it's getting confused, like trying to understand why. Yeah. Mhm. Cool. Uh talk a little bit more about how PM design and eng are supposed to work in this new world. What has been working for Figma and Anthropic pain points? Um Uh this is a this is a good this is a great question. I mean, I think that's that the workflows are are changing. The I I kind of jokingly said this the other day, but if there's one thing I've learned in the last whatever six, seven, eight months is that like workarounds are kind of the new workflows, and I don't say that disparagingly. I mean, like everyone's kind of figuring out how to stitch these stuff this stuff together and get the good results. And I think that's the exciting part is that all these different uh functions are kind of finding these tools and figuring out points of connection. Um So you know, anybody who says they know exactly how the these three functions are supposed to work in this new world is is kind of lying, I think, cuz it's always changing. Um but the key thing is like I think the way you're supposed to do it is collaboratively, and like communicate and find out what pieces are beneficial to y'all in your workflows, and and go from there and kind of build systems around that using these agentic workflows or traditional workflows or whatever. But the thing that the the fact that this is all opening up from a platform perspective with MCP and all these connective tissue throughout these different toolings is just exciting and and kind of makes it a little more flexible. So um Yeah, I mean, it does it does create speed, and it does create a lot of like potential thrash if things aren't like lined up perfectly, but um Yeah, I don't know if you have a a take on that from the Anthropic side. Yeah, I mean, I I think definitely rethinking first principles. I I I think it's like um two things like uh one, but people are getting more horizontal. And then so I like I think instead of like talking about things where it it's better to like do some version of it, right? So like um you know, if like uh you know, our designers have an idea, they'll often make a PR, you know, or they'll make like a prototype or something. Even though they know that it's probably not implemented in the way that they think it is, you know, like it's good to know the constraints. For example, Claude Code is a terminal UI, and terminal UI constraints are very, very different, like extremely unintuitive, you know? And so it used to be kind of like um oh, like designers would have a thing and be like, "Oh, here's like can we add like two pixels of padding here?" And you're you can't. Like in a terminal you you can't have that, right? But now they can sort of like understand that um constraint itself, right? And so uh creating PRs and and and uh like doing that in a way that like helps uh sort of describe what you're looking for. I think if you're a designer or PM, it's really interesting. And as an engineer, um yeah, things like the Figma MCP, the I think the stuff that I can make can look better by default, you know, is kind of the rule, right? Um and there's not always a lot of time for, you know, having a a designer on every single like thing, especially stuff that's like as simple as like a marketing like asset that's like kind of posted somewhere or something, right? So um yeah, I think like uh everyone's like moving more horizontally, learning from each other I I think in really exciting and fun ways, you know? Um versus being blocked, yeah. Yeah. I think it's it's also I see a definite value in sure there's like a skill set thing, like learning these new tools and everything, but more than that, I think there's a mindset shift that I see very valuable to kind of be curious about these new workflows and tools, and um and like we said, collaborate. Like you kind of touched on it before. As a designer, if I have a if I can write a skill for Claude that will help a PM do something that will better land in my language, you know what I mean? Like, "Hey, I've seen you doing this." Like I've generated the skill for you to help like do that. You find those leverage points in the workflows. And and that just kind of flywheels in your in your overall workflow, and you start to kind of get momentum in different areas. So uh mindset shift for sure. Totally. Um let's do a couple more. I know we have maybe a little over 5 minutes, but um how do you think about what an agent needs to know versus putting everything in the context window? Um Mhm. I think we kind of touched on this a little bit, but I'll I'll let you know go for it. Yeah, I mean, I I think that uh giving it tools is very useful. So like, you know, like if you're using Figma, and like let's say if some of your information is in Slack, giving it Slack is very useful. Um I I would I I think that like putting it in the context window is not the right way to think about things. I think it's like being specific in your request, you know? And I think that there are lots of times, the majority of times, where we're not very specific, I think. And that's usually when I see the agent sort of get tripped up, you know? And so the more specific you can be, the better. I think one of the great things about Figma, actually, is like there's a place for resolving ambiguity a little bit. Like it can be like, "Oh, hey, um create this design." And then you're like, "Oh, no, this looks kind of ugly." Instead of like asking Claude to make it better, I'm just like, "Okay, let me tweak this, move this around, edit it." And now I've like fixed the ambiguity, you know, or like resolved that. And now uh I can give the agent the full details. So Yeah. Make it better generally is not >> >> Um I was going to say something, but I forgot about it. Oh, well. Um oh, I was going to say like if you could maybe be a little more specific rather about specific prompts. Um because I feel like at times I I try and maybe this is different than specificity, but I've tried to give models like more constraints to try and guide it. And that almost ends up being worse sometimes because I think I've equated it to like a angsty teenager where you tell it what to what you exactly what you want it to do, and it's going to be like, "No, that's not the best way to do it." And try and do it a different way. How do you balance like getting very specific with what you want and letting the model kind of reason the way that it needs to reason to be successful? Yeah, this is like not I I'd say a skill, you know? Like I think it's sort of like, you know, if someone's asking me like, "How do we be good at prompting?" It's it's kind of like, "How do I be good at at writing or at something or something?" You know what I mean? Like there's like a huge amount of uh you know, like degrees of freedom. Like a huge amount of like different like even one word or two words can change like an entire output, right? And like I was I was working with a friend over this weekend who had like was a non-technical person using Claude Code, and I watched them. And I'd be like, "Oh, let's just add like this word here." You know? Or like, "Let's move this one thing around." Like and uh it would like completely change the outputs, right? And and so um this is something I'm trying to work on is like more guides on prompting. Uh but I'd say the like the thing to is just be curious, I think. And uh be like, "Okay, like yeah, this model is not doing this in this way. Um why, right? Like is it not smart enough? Did I not give enough context?" And yeah, each model is also kind of different, right? Which is also, you know, like both between different providers and different generations. And so this is one of the things about AI. Like yes, there's so much automation to do, but there's so much more learning to do as well of like how to use these tools really well. They evolve very quickly. So Yeah, right on. Um we're running tight on time. Um Uh Oh. What just happened there? I just lost my place, but um Well, I think we're we're low on time anyway. Um I wanted to kind of jump to the end here. Uh let me see if I can find my slides again. Uh Um Here we are. So um The one thing I I wanted to get to to make sure we hit is like what can people do like right now? Like what is the best kind of next step for anyone like starting out with this stuff? Or maybe they're trying to take it to the next level. Like what can people do right now from your opinion? Yeah, I I think that if you're a designer, I would just like um either try and get started yourself or work with someone who knows how to use Claude Code, you know? And be like like they're probably engineers on your team being like who are using it quite well, right? Or like and I I think I've only seen people get really excited to be like, "Hey, yeah, let's do it together. Let's work, right?" Um and so uh I think like yeah, use Claude Code, use Claude Code desktop, which is like, you know, more more of the UI version. Um I think like on a company level, sort of like freeing people up to be able to like try some of these explorations is really useful. Like, you know, if you're just sort of like focused on a specific project, you're like, "I need to know what I know what I need to do for this project." Maybe you have less room for exploration versus like we've seen a lot of great companies do like hackathons and and sort of like work greenfield projects. So um yeah, just being curious and and open with the tools, talking to people who might know more information. Obviously, online there's a lot of information, too. So Yeah, that's great. I would I kind of echo that. Like be curious, try these tools out. Um check out some of the resources we have. I'll flip over to this screen here. We do have resources on uh the different Figma MCP our clients that we or connecting to all the different MCPs that we have available and exploring the communities uh the community skills that we do have. So like go into there, figure out how to install this stuff, start playing with it. Cuz then you're going to start to understand how you can implement it and find those moments, Um and then get really diligent with where you want to implement it. I think there are there are places that it makes a lot of sense for different people. And and be efficient with your token spend, right? Like I think we talked about it like the Figma's canvas is great because it's cheap exploration where you can option drag and duplicate and copy and explore, and that's important for a couple reasons. One is because, you know, it's you don't have to spend the tokens to do it. And and and B, I think like when you when you associate a cost to something it becomes precious, and I think you it's harder to throw that away. And so that's why I think like knowing when to use the agenda workflow and when to use kind of more traditional workflows is a really important kind of skill for designers to learn and and figure out on their own cuz it's going to be different for everybody. Someone might want to lean more into it, someone might want to kind of preserve some of that stuff on the exploration side. So, that would be my advice to everyone. Um Cool. Well, Faruk, thank you so much for the time, dude. This is a meaty topic. I know we brushed through a lot real fast. So, hopefully everyone learned something from it and is excited to kind of play around with it. This is kind of a big a big moment for for our, you know, collaboration between Cloud Code and Figma. So, I'm stoked to be able to bring that to everyone here. Be sure to check out future live streams, figma.com/events, specifically on April 2nd, our developer advocate here, Ricardo, is hosting a developing products in the age of AI in an EMEA friendly time, so I would be sure to check that out. And as always, if you have a suggestion or an idea, our community team here at Figma is fantastic. Email community@figma.com, and uh yeah, let us know what you want to hear. So, thank you. Find us both on X or wherever you find us and and reach out if you want to learn more, but thank you, everybody. Yeah, thanks, guys. Appreciate it. >> Thanks, Faruk. Okay.