Two speakers demo new featurefrom @figma

Transcript

Hi. I'm Guy. I am the design director on the AI team at Figma. And I'm Alex, an engineer who worked on the feature that we're showing you here today. I'm really excited to show you this workflow that we've been working on. Ideas can come from anywhere, from doodles, to code these days. And code is really interesting because it can get you to somewhere real very quickly, but it also runs this risk of just rabbit holing down and kind of missing out on a lot of the exploration stage. Exploring rank code really means changing code. It also means creating new git branches, feature flags, threading variables and state and data through all these different code paths. Ultimately, versions that you end up with, they really just live on your laptop. They're not something that you can easily share and collaborate and show to other folks. And so oftentimes, I find that the feedback is often shared in the form of screenshots and video recordings and things like that. The decisions that you make in code often are also ultimately very single file. They they have to happen in a certain order, and it kind of limits your ability tier, like, explore horizontally and think about the big picture. And so for us, the canvas is key to a lot of our workflow. It's easier to engage as a team. You can see the differences side by side immediately, and exploration just feels cheaper and more carefree. Today, we're releasing Cloud Code to Figma, a new feature in the Figma MCP server. You can capture any running UI state in your browser and paste those as editable Figma frames right on the canvas. Cool. Let's best into a demo. I have some worse code that I really want to explore. So I'm gonna spin up Claude and ask it to spin up a dev server. Great. So this is where we're starting. Looks pretty cool better we could probably make it work a little bit harder. So what I'm going to do is I'm going to go back into quad code and I'm going to ask it to send the my pantry page to Figma. Great. So now we have it in Figma. I also wanted to capture a small detail here. I can select element and I can pick up one of these cards that I think could be better explored. So just by clicking it, it's already sending it to Figma. I can open up my file and there it is. So now it's on the canvas. No I can come and get my whole design team and we can start exploring variations on these, designs. And so for us, it's not really about polish. It's about exploration. We want to try out as many variations until we get to something that we feel really excited about. So we've jammed with the team on this and we've landed in these four different solutions that all really address the problem in quite different ways. As an engineer, I also have this great context that is a bird's eye view of all the different trade offs and can make, you know, really clear, engineering scope, considerations based on this. That way, no time is wasted on the implementation details of figuring out how to pull off each of these ideas before we're even ready to commit to which direction we wanna go. And finally, once we have selected one of those ideas, it's really easy for me to use the Figma MCP server to bring those frames back into my code editor and keep us moving forward as a team. So what's really great about this is that it uses the best of both worlds. Code helps us get you to something that feels real quicker, but Canvas helps you explore and choose direction and really decide what's worth building. We've had a great time building Code two Canvas and we're so excited to see what you end up building with it.