What's up everybody? >> Thanks for waiting. >> It's all right. 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? Seeing a lot of distribution here. there. 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 claw code to Figma and back. Small niche topic that uh nobody's really talking about, but I'm glad we have Tar 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, uh, San Diego based and I'm excited to be here today. And we have Tar from Anthropic. Do you want to take a minute to introduce yourself? >> Yeah, I'm Taric. I work on the cloud code team. Uh, yeah, I um, you know, uh, spend a lot of time trying to figure out like how to use cloud code with new new tools and different partners. I think there's like always new things happening with with agents and uh yeah was really excited about, you know, the new MCP you guys put out and uh spent a bunch of time playing with that this week and excited to talk about it. Brad, yeah, I've spent a lot of time with it the last couple 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 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. We're all part of the same community. Um, we do have our code of conduct for live stream. So, uh, please be kind to each other in the chat and elsewhere in the world. So, um, 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 kneede in every day, Tar. Um, and really that's 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 sketch pad, 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 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 preMCP days. Um we're talking about clearer handoffs, describing changes, manually sending screenshots back and forth, but like with the advent of MCP, Taric, 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 think basically MCPs allow you know your apps to like uh to communicate and talk to cloud code. This can kind of go either way. I think one thing I like about the Figma MCP is that like cloud 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 and work across all these different context. And so, yeah, for design, so much of your context is is in Figma. >> Yeah. Cool. Yeah. So when we talk about roundtpping 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 this 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 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 you're like really really good at that. Um >> cool. So then and then that's like that's when 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 cloud code can create and edit designs in Figma uh that are like linked to your system or codebase because 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 codebase 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 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 plug-in API to directly manipulate and control objects in Figma. uh creating files, organizing frames, pages, managing variables, um and even some Fig Jam connectivity that I know Tar you and I have played around with the Fig Jam 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 think skills basically just give your agent like specific information that uh maybe was 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 like where do I put the the variables and like how do I build the 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, you know, you can, for example, write me a skill that's like, okay, like, you know, when you're translating a component uh 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, uh, 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 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 plug-in 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 RUD. 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 uh 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, Taric. 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 would be beneficial. So, yeah, let's see. Let's see what we 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 anthropic design system, right? And, uh, I think basically what we are, um, you know, what I use cloud 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 that's our goal, right? Is is to like collaborate here. And um yeah, I think that uh first off, we're going to be using, you know, a mix of uh Terminal and Figma. And and so you know if you're not familiar with terminal I think it is like um >> it can be intimidating I think at first but it's really like um you know quite simply. I won't go into a full terminal tutorial here but I think definitely give it a shot. We also have cloud code desktop which is a desktop uh version if you're like uh you know less comfortable with terminal but to get started you install the Figma plugin like this right um and then so it's cloud 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 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 that's the start of it. Um, we but yeah, what I've done now is I I've started cloud 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 uh this card component, right? And so, uh, I've got this in code and now I'm going to prompt cloud 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 cloud code to to go ahead and do that. And um while it's doing that, yeah, it's loading the skill. Uh 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 cloud code and skills are that these skills are um basically something that uh you can uh yeah you can ask cloud code to create right so one of the prompts I like to do is uh you know we've got a skill creator still. Um, you can just ask cloud 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 prompt I 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 off with the skill. But, um yeah, while we do that, we'll uh we'll let Figma >> um do 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 >> 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 groing everything and we can kind of >> go from there. So in that in that first terminal window when we did that initial >> plug-in install when 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 cloud session hitmcp 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 that installation for you with just that command >> totally yeah >> yeah that's rad and then so you're in and if anybody'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 cloud session to run these commands >> that's right >> yeah Cool. Um, cool. So, as we see the I think this is really important to like see that terminal running because I think like a lot of designers are not super familiar with that. It's good that you called that the desktop app and the desktop app capabilities are equal to running cloud code in terminal. Is that accurate? >> Um, yes. >> Hard maybe hard to say equal broadstrokes maybe, but like um you can do a lot of the same things there I'm assuming. >> Yes, exactly. Yeah. Yeah. Yeah. Um so uh yeah exactly uh it it is just it's the same skills it you can uh 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 cloud 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 because when I was like playing around with this and like running making cloud 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. Oh gosh, that's >> 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 and Figma that 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. 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 depth and maybe we can show some of like the other prompts while we while we wait for for Claude, you know. So um >> uh here is 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 you're >> 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 isle 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 as an engineer, I'd just be sort of like asking Claude like, "Hey, can you like make it look good, you know, and like, you know, this would sound ugly." So, um, this is like one of the the prompts we did, right? >> >> Um, and then uh yeah, let's uh let's pick my one. 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 uh 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 still working on that with the >> Yeah. Right. >> Yep. Yeah. Image image generation or image upload via MCP 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 kind of shrink that down. But the notable thing is that it created it as a component and it created it with variants and 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. Um, and uh, you know, you see on that right panel, it's got all of the properties. It's got the category, the title, the subtitle, the time, servings, difficulty, all these toggles, these boolean toggles. >> It built all of that from the codebase 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. These are like minimal tweaks that like sure you could potentially do this in in CSS. Like 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 codebase? >> Yeah. Yeah. So definitely like I I think I the collaboration is like 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 cloud code is a very single player experience and and I think uh 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 the Figma. Um can you update the component in code to match? Um, okay. So, uh, yeah, let's let cloud run. And, um, >> yeah, 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. Um, >> so while this runs, we can also um like I I can keep showing like some of these uh like I have a few other prompts or uh is there um >> uh would you prefer to talk about the uh 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 progress. I I getting it back into code seemed to not always take too long. So, I'm I'm I'm wondering if if we're going to get that. Uh >> yeah, I I think it might take uh a bit of time. Uh because actually, let me let me hold on. Let me start from uh Okay, cool. Uh I updated the card component in the Figma. Just want 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 we've tried. So, >> yeah, you 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 cloud code like hey can you create a marketing poster for this app in our style in the Figma you give a link um and uh yeah like you know this is one of those things where um a lot of times with cloud code it's really good at this like first pass or 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 uh that was great. Yeah. >> Yeah, that's cool. It's it's it's it's the blank canvas problem. It's but it's the same conversation when we talk about like different crossunctional partners kind of sharing these artifacts and and it's like, okay, this is great because now it 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 it gets to the point where it needs to get for all of us, you know? So, um it's just a cool connection point. >> We can like collaborate on it as well. So, >> um yeah, and you can see the cloud code is working. So, it's like >> picked up changes, right? you change 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. Yeah. So >> we've matched it and we've got the font is probably too big, you know, but >> now we've got uh 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 examples on my end that I was playing with >> um and get your take on them. >> So, I I have 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 signup 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'm either building this myself as like kind of a, you know, weekend coder, designer, design engineer, what have you, or I 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 this specific Figma page 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'm 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 feed it back in back back through cloud code to my codebase. And I built this this kind of whole set of components in this file using that flow. I basically just told cloud 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 uh 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 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 uh, for sure where it kind of just kind of misaligned some things. Um, but what's cool is that it actually generated, and I didn't necessarily prompt this, but it generated this kind of fidelity notes on canvas where it it uh, you know, talked about what it did. Uh, talked about what components it linked to, talked about what it had to manually rebuild because 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 was 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, I mean so it's we're never like oh hey there's like a condition where if Brett from Figma says that like it's very much 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 that spectrum. Um, so I think like cure cloud 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 cloud guidance. You know, you can sometimes say like, oh, hey, like, uh, 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' 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-m, 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, well, I think you can make like for example a brainstorming skill and I I think that would be like an interesting thing to like sort of, >> you know, broad broadly do. I I think that like overall it really is prompting, right? And and so um and prompting, but it 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 oftentimes when I see people using agents, they sort of start with the 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 >> one of the great things about you know sort of using cloud code and agents is like that you have like you said this like very cheap and rich exploration space so oftent 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 a there's no hard and fast rules. It's really just like talking to cloud 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 >> show a couple more examples where um I want to illustrate thinking beyond just like generate designs for me in Figma because 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 alert, right? and then um talked about specifically about component overrides that it found in you know li 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 it 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. What why I point that out is because >> 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 kind of cloud 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. >> 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 because 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 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's a a pretty wide like categorization of skills, right? And I 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 the 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 inside of their head. I think skills are a way of 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 this like 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? 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? >> 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 gonna write a skill that shows has like takes all of my knowledge of how to make Claude better at at design and write it down." And it's like maybe a couple paragraphs. It's like online, but it just like drastically changes how Claude like design stuff. And I think there is like versions of 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 cloud needs to infer from your intent, the better. Um, but yeah, like it will also try and like uh infer as well. Um, I think it doesn't always do a 100% like you know there are 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 the skill too. >> Gotcha. 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. Um, >> tell me if this is like the right line of thinking too because I know when I was working on some skills like I 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 could imagine design systems that are 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 Cloud 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 a Gentic 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 >> 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, because 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 cloud 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 places like that where you're like collaborating with people I think is really really important right and I think that this is like um yeah like you know if like I'm working with 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 am 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 a 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 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 cloud code differently than you will, right? And I I think like um the best engineers I think are like doing like 10% of what cloud code is doing is writing code and and 90% of it is like exploration 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 >> that's cool. That was going to be one of my questions to you that we but like how does how what can designers learn from developers who have been working with these agent 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 tea dot for you more than me. So, >> Sure. Yeah. Yeah. I mean, 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 cloud code so that more 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. Um, 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 followup 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 think what we say is like have a gotcha section in your skill, you know what I mean? And so like um add a list of gotchas. So like you know when we were doing the Figma man CPP 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 ellipse or 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's a pattern. Add it as a gotcha, you know?" Um yeah 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. >> Cool. Uh talk a little bit more about how PM design and edge are supposed to work in this new world. What has been working for Figma and anthropic pain points? Um 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 because 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 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 think it's like um two things like uh one people are getting more horizontal and and so like I I think instead of like talking about things 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 cloud 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 you can't like internally you can't have that right but now they can sort of like understand that >> um constraint itself right and so 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 is really interesting and as an engineer um yeah things like the Figma MCP I think the stuff that I can make can look better by default you know is kind of the goal right um and there's not always a lot of time for you know having 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 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 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. Uh I know we have maybe a little over five minutes, but um how do you think about what an agent needs to know versus putting everything in the context window? Um I think we kind of touched on this a little bit, but I'll I'll let you I'll 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 Infigma and like let's say 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 it'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 Cloud 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 resolve that, and now I can give the agent the full details." So yeah. >> 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 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 I think it's sort of like, you know, if someone's asking me like how do we be great at prompting, it's it's kind of like how do I be good at at writing or at speaking or something, you know what I mean? Like there's like a huge amount of >> uh you know like degrees of freedom or like huge amount of like different like even one word or two words can change like an entire output, right? And like I I was working with a friend over this weekend who would like was a non-technical person using cloud code and I'd watch them and I'd be like oh let's just add like this word here you know or like just 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 that like the thing to is just be curious I think and uh be like okay like yeah the model's not doing this in this way um why right like is it not smart enough 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 since we're we're low on time anyway, um I want to kind of jump to >> the end here. Uh let me see if I can find my slides again. 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 cloud code, you know, and be like like there are 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 cloud code, use cloud 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 green field 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 um or clients that we are 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 because 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. Um I think there are there are places that it makes a lot of sense for different people. Um you know, 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 whether when you associate a cost to something it becomes precious and I think um you it's harder to throw that away. And so I that's why I think like knowing when to use the agentic workflow and when to use kind of more traditional workflows is a really important kind of skill for designers to learn um and and figure out on their own because it's going to be different for everybody. Um someone might want to lean more into it. Someone might want to kind of preserve some of that stuff on the exploration side. So uh that would be my advice to everyone. Um cool. Well Taric, thank you so much for the time dude. Um this is a meaty topic. I know we brushed through a lot real fast. Um, 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. Um, be sure to check out future live streams, figma.comvents. Uh, specifically on April 2nd, uh, our developer advocate here, Ricardo, is hosting a developing products in the age of AI, uh, in an email friendly time. So, I would be sure to check that out. Um, and as always, if you have a suggestion or an idea, our community team here at Figma is fantastic. Email communityfigma.com. Um, and uh, yeah, let us know what you want to hear. So, thank you. Find us both on X or wherever you'll find us and and reach out if you want to learn more. But thank you everybody. >> Yeah. Thanks, guys. Appreciate it. Thanks.