Earnings Call - FIGMA INC

Thank you. We'll be right back. Please welcome to the stage, Figma co-founder and CEO, Dylan Field. Hello, Config India! Good morning. Good morning, Bengaluru. Welcome to the first ever Config India. This is an amazing room to be in. Wow. And just also, before we forget, hello to everyone watching on the live stream. Good morning, evening, afternoon, wherever you are. It's so awesome to be here. We are surrounded by the most amazing community, incredible designers and builders. I feel so lucky. Thank you for being here with us. This is my first ever time in India. And that's the energy that I've felt this entire time. Thank you for welcoming me. Thank you. Thank you so much for welcoming our team. We started an office in Bengaluru about a year ago, and we're scaling it rapidly. It's been just this past week an absolutely exciting time to be here and to see everything that's happening. India has quite the history of celebrating design. through whether it's architecture or print or typography or software or, as I've learned a lot about this week, your payment infrastructure. Design is an ever-present theme. And I had a hunch this would be the case because as we look at our numbers, we see India in the graphs. Yes, India is across every state and union territory Figma's second largest community by daily active users. And also, it is one of our largest Friends of Figma communities worldwide with 30,000 members and 23 chapters and I gotta be honest I'm also fanboying a little bit because some of the folks that I've looked up to for a long time online are here today so I'm gonna give them some shout outs for example Vijay it would up here I'm not the only fanboy here. Vijay has been making the most amazing intricate illustrations in Figma for years. When I see Vijay's work I usually just stare at it and go wow and then that follows with a how. So good. Or the team at Goalie Labs. Their India-inspired speaker designs have taken shape in Figma before being brought to life by local craftspeople, and the creativity of the community overall is just absolutely mind-blowing. This has been constantly reinforced. Your craft, your flair, your attention to detail, all that that you bring to everything you make. It's incredible and I'm here with all the inspiration. The success of Agoli Labs or so many other companies fueled by design and passion and craft and care confirms something that I think all of you here know which is is hopefully obvious at this point. Design is the differentiator. This was the premise of Figma when we started, that as more software would be built, value would move to the top, design would be how products would stand out. And we are seeing this play out in real time With AI, especially. You might have heard of it, agents can code. This means anyone can build. And they can build fast. And they are building. Everyone's building. And as a result, where does the value lie? Where does differentiation lie? Design. Design is expanding. The role of design is expanding, and how we build products, let's be real, that's changing too. For a long time, the workflow was linear. Maybe you would jam in an idea with your team, or perhaps you'd make some mocks in Figma. You would play around with some prototypes if you had the time. And then, when you're absolutely sure you're ready to go, you'd either throw it over a wall to a developer, hey, go build it, or if you're really skilled, you would take the time to build it yourself, cool. And all that, it made sense in a world where coding was expensive. Every change, every time that you went to go build, that was time. That was money. And so you planned carefully. You measured twice, cut once. That was where we were a few years ago. Not that long ago. And AI, well, it's flipped that equation. Do you have an idea? Great. Go build it. An agent can code it up for you in minutes. It's never been easier to build. And as a result, we're not waiting anymore until every detail is perfect to get started. And again, as AI has made coding cheap, building something has never been easier. So, more teams are building as a way to start, to expand their thinking. They're building first, using it as a jumping off point. Not as this is the first prompt and we're done, but rather as a way to untangle a problem. I don't know about all of you. When I look at a blank page, a blank canvas, sometimes I freeze up. when you're able to put something on it to react to that really helps bootstrap and kickstart your thinking and suddenly you can go wait a second that's not what I want I actually have a better point of view on what I do want and you can start building to think that process of building to It is fast, it's loose, it is messy, sometimes it feels reckless. It's less about creating a polished product at that point. It's more about pushing your own thinking. And let me be clear, don't delegate your thinking to AI. You need to think. So that's one mode. Let's talk about the other one, which is building a ship. Building a ship, okay, you've thought through it all. Now you need to be deliberate. This is where precision, craft, security, all that really matters. So every detail that you have, it's a promise to one of your users. It's a sign that you actually care. You're imbuing that care into what you're going to deliver. to what you're making. And that care is so critical. So today, we're going to show you some new ways we're bringing we're to bring both of these modes, building to think and building to ship together in Figma. Our goal is to give you a full stack creative canvas. We want this to be a home for you, because we keep hearing that when you're working in a terminal or an ID as a non-developer, it does not feel like home. You'll deal with it. You want to be current, you want to at the front of your craft, but we have heard repeatedly from designers everywhere that that's not what they want as their home. They want a home made for them. So, starting today, we're building that home, we're trying to make it as comfy as possible, And that home is for you, it's for your team, it's your agents, it for your designs, and your code. Because now you can build with code on the Figma canvas. With code layers, which we're announcing today, is moving into open beta, rolling out over the next few weeks. All right, who's ready for some demos? . We've been testing Calera's for months. It's already changed the way we work in Figma and I want you to see it live. So, to demo, I'd like to welcome to the stage two incredible Figmates, Pete and Sam. Please join me in welcoming them. Thank you. Hey everybody, I'm Sam and I'm a product manager and I am Pete. I'm my product designer And we're part of the team that have been building code layers The canvas has always felt like a studio wall to me It's it's like this place where all of your references and sketches your experiments Specs and finished work live side by side this space lets you take a step back notice things that you couldn't see up close and draw connections between different explorations it makes your thinking visible and invites other people into the process but we've all been off vibe coding prototypes by ourselves haven't we and it can feel like you're starting to design in isolation. Collaboration looks like sharing a link to a prototype in Slack or sending a 17-minute screen recording for your co-workers to watch. You can see the end result, but you can't see how you got there. We're building to think, but the thinking and the design process itself has become invisible. Code layers brings all of that work onto the canvas. The finished prototype alongside all the mess that got you there. And when something sparks an idea, the pieces are right there. You can jump in, remix them, and take it somewhere new. That's what makes code layers so exciting to me. Because it feels like we're designing together again. So let's talk about how you get started with code layers. We know most of the time you're not starting from scratch, so we've made it easy to create code layers a whole bunch of different ways. You can start with designs and have the Figma agent turn them into code layer for you. Or you can tell your coding agent to create a code layer with your prototype in it via the Figma MCP. You can also clone a repo from GitHub into a code layer. Right now this works with GitHub Cloud and we're working to expand support to GitHub Enterprise Server and other source control systems. In terms of code-based support, code layers already work with a wide variety of web frameworks and you can expect them to be able to run increasingly complex applications in the near future okay so now you know how to get your codes into a code layer let's jump into a demo okay normally when Sam and I are designing we're designing Figma in in Figma and I'm not gonna lie this gets a bit confusing at times and you know like this whole thing is a prototype playground. So every year our brand team creates these imaginary brands for demos and this year we've created one called Pickup. Pickup is a neighborhood marketplace for buying and selling and today we're gonna add a new delivery service live on stage, no big deal. But there's one more way that you can bring your code onto the canvas with some new updates to our Chrome extension. For a while you've been able to capture a page or even select an element and copy that as a design layer onto the canvas. But today we are going to use this new feature called capture code and this This lets us take a snapshot of this web page and bring it back into Figma as a code layer. So I'm going to paste this here. This can take a few seconds to load. It's spinning up a new sandbox, loading our assets and connecting up all the plumbing so it just works. This kind of workflow is really useful if you've got a production app but you don't have access to the source code or you just want a super fast starting point to riff off production. I know a lot of you already love the Chrome extension but if you haven't got in on it yet you can download it from figma.com slash downloads. It already works with design layers and it'll work with code layers as soon as you get access to them. Now this is an exact copy of our homepage page and but how can we tell well all of our CSS animations and hover states just work because it's using your actual CSS file this unlocks some wild workflows that we don't have time to go into now but you can learn about later in the code layers deep dive today today though we're gonna be working on this delivery feature and this is inside of our browsing and purchasing experience which users typically visit on the mobile site. So I want to show you this on the phone. So I'm going to pull up the site on the phone here. Okay looking good and let's see you can see some of the items for sale in the pickup marketplace. I'm gonna go into this view of these headphones. Let's click buy now and then you can see this delivery feature that we're prototyping here? We'll see what happens if I buy and request delivery. I think this screen could use something a little bit more exciting. So let's see if we can add that. What we've been looking at on this phone is actually a code layer mirrored via the Figma mobile app. So we can just pop into that code layer back in our file and add some pizzazz. Pizazz, is that what we do as designers? I mean. Well, this code layer on Canvas, what are we actually looking at? Is this the full pickup app, or what is it? We're using a lightweight version of our app that's optimized for prototyping. It's using our production design system, but we've pulled out a lot of the complex back-end logic, like admin screens, user profiles, and the listing databases, so that we can explore and think through ideas faster and use fewer tokens. As Sam mentioned, you can clone GitHub repos onto the canvas. And this one is no different. In the new code panel, you're going to see that we've cloned it from our repo. We can see the branch we cloned from, the branch that we're on now. And we can even create a PR. Now, of course, we can't do that yet, because we haven't made any changes. But I can also push and pull the latest changes from my repo so that my teammates can see all of the work that we're doing and our playground stays up to date. Now, sometimes when you get a prototype, it's a bit hard to know what you're supposed to be looking at. You know, what's actually new in this thing or is that just some filler material so that it looks convincing? So I really like to use extract designs, which lets me pull out the current state or specific elements or like I've done already I can record this flow and it'll pull out all of this key screens into design layers so that I can edit and riff on those and this makes it really easy for other people to jump in with feedback your UX writer can come in and edit the copy and you can just jump in and riff as Sam was saying this delivery step over here feels pretty important you know you've just clicked by and it's looking for a courier and you've still got five steps to go in this checklist. Let's do better. So over here I have some more design layers but specifically for this step where I'm looking for courier. So I've asked the agent to animate these using motion. I'm gonna pull up the motion timeline and we can preview those by pressing spacebar. So in this one we're kind of like scanning the area looking for a courier. Let's see what this one has. In this one was like we've got the item why don't we turn the van into a box. And then over here we've got our success state and what's the success state without confetti? Now I want to incorporate these back into my prototype and because I pulled these out, extracted these from a code layer, we have this secondary toolbar down here. This design has been edited, you can update the code layer. So I'm going to click update code layer and it's going to pull all of my design changes including the animation that we defined in motion into our code layer now while it's going let's look at the full screen code editor so every code layer has one of these in order to get to it you're going to go into the header and then click on this full screen icon and once you're in here you can interact more deeply with the content of this single code layer so there's a few things to point out here that you don't always need, but they're nice to have when you want them. You can look at the actual files for the code and you can directly manipulate these right here, so you can edit the code inside of this view. In this review tab, you can view changes for any given commit, so you can actually see the diff view there. And then we also have a terminal, so you can interact directly with the sandbox that this code is running in for those who really like to get into the weeds now when I'm in a view like this I always maybe I'm working on a new feature we were implementing the motion but I always notice things that I didn't come in to do and I'm sure you've all noticed too that the notch is blocking our logo so sometimes I would have to wait for the agent to finish but now we have multiple chats so I can open the chat panel here I can create a new chat and ask the agent to do let's see what are we gonna do can you can you make sure we have the iOS status bar so that the logo isn't covered by the notch so I'm gonna send that off and now the agent can do one two three four things all at once I could happily spend the rest of the afternoon making refinements here, but apparently we have a keynote to get through, so I'm gonna hop back to this canvas and see how we're getting on. Alright, so over here you can see that there's been some onboarding explorations going on for this CTA here. Looks like we're adding this to get users to enter their address that they'd like to get things delivered to. I would love to show you one of my personal favorite code layers features, which is helpful in situations like this where you might have one team who's implemented something while another team was polishing something else up. In this case, we don't have Pete's latest polish to the delivery flow inside of this code layer with the CTA. What I'm going to do, I have a kind of pre-baked version of that animation going in here, so we don' have to wait for the agent to finish this. I'm gonna select the code layer with the animation as well as the one with this onboarding CTA and I'm just gonna dictate to the agent here can you add the get it delivered CTA from the marquee riff code layer to the code layer with the animation looks like the other generation finished up all right but what that's gonna go ahead and do now once I send it off is create a code layer with the things both of these teams are working on, so polished delivery flow and CTA. And a code layer like that is one that would be good for sending to more stakeholders, right? And sometimes you don't necessarily want to send your stakeholders your entire Figma file. Instead, you might want to just send them your completed experience. And so the way that you're going to do that is we'll select this code layer, and then And just like you would with a traditional Figma prototype, I'm going to click on the Present button up in the right here. And this is going to take us into our prototyping view. When I click on Share Prototype, this link now is just going to link people to this particular prototype where we have our CTA. We have our delivery flow. Those new animations should be in here. And the whole rest of that file is going to stay private. Now, there is so much to say about code layers. We've talked about ways to create them, ways to edit them, test them, and share them. But I am most excited to see what you all do with this new primitive. I am so confident that you are going to use these things in ways that we have not imagined yet. CodeLayers, like Dylan said, is starting to roll out to all users in open beta today. And we're looking forward to supporting increasingly complex code pieces with these in the coming months. Now, to tell you how design systems are behind everything we just demoed. It is my pleasure to introduce Tara. TARA BIRCHMAN- Good morning, everyone. It is such a pleasure to get to be with all of you. My name is Tara, and I'm a PM at Figma, where I get to work at the intersection of design systems and AI. Code layers are truly such an exciting tool. It's something that I use with my team every day. And we're so excited that you all get to try it out and keep helping us make it better and more powerful. But I know that looking back at what Sam and Pete just demoed, the question that you really have is whether that corner radius was using your variables. So today, I'm excited to talk about the role that Design Systems is playing with all of these agentic workflows. We'll show you how we're making improvements to bringing your code libraries into Figma, show you agent is using this design system context, and then at the end, we've got a little sneak preview for you. So let's jump in. All right, I am going to come on over to our pickup components. This is where all of our Figma libraries are defining our tokens and components. Outside of Figma, though, we have our code library. And what we want to do is create a link to that code source from our FIGMA file. So to do that, let's go ahead, come on over to the Assets panel. And right in here, we can go ahead and see that this is where we link our repos and connect our public and private NPM packages. So let's show you how we can set up a repo. We'll go ahead, make sure that our GitHub account is authenticated, pick our pickup app repo. We'll with our main branch, click Save. And now this will give the agent the ability to import your code components into code layers that you create when you attach this file to your prompt. Now, code is great context for your agents to build with, but you need a little bit more. you have rules for agent that'll help steer how your design system should be used, you can upload these guidelines as markdown files. Alright, so let's show you a few files that we've prepared. We can go ahead and click upload, select all of these and apply changes. Alright now let's jump into a file so we can see how agent actually uses all of this context that we've added so here we have some design layers that agent created and this one is well fine perhaps a bit generic I think we can do better so I'm gonna go ahead and come on over to an agent chat let's make sure that our library files attached this time and I'm going to record a question. Hey agent, can you help me make a list view to browse items from our local buy-sell marketplace with filters and sorting controls? All right, we'll let that run. Let's give ourselves a little bit of space and come and look at how it did with some code layers. So we've got a similar setup where we had the same prompt but on the left it didn't have a library attached and on the right it did. And this one certainly looks a little bit more like pickup but let's see if we can prove that. So I'm going to open it up in the full screen editor and I'm actually going to go and look at the chat. We can expand it and see that all right it is actually trying to use our our design system. And we can go ahead and take a look and see that in our libraries, it is importing it. And over here, we can see that it is actually calling out all of our components from our Figma repo. Excellent. So it worked. So guidelines are now available in an open beta, and CodeSources is starting early access today. And we're excited to be rolling out to more and more customers soon. We hope this helps you leverage more of your design system to support all the work that your teams are doing in code and in design across the canvas. But many of you aren't just working with one library. We know that your design is composed of multiple. So for all of you design system maintainers out there, we know that you love to plan. So we wanted to give you a sneak preview of a new workflow that we are just starting to work on. We are creating a single home for your entire design system, one place where all of your context across multiple sources and materials can come together as one. So follow me to the file browser, and let me show you. Here we're creating a dedicated platform in Figma to bundle multiple libraries and code sources that connect your design system. Let's take a look at this system map here. So understanding how your system is structured, what's in it, and how everything connects can be a little challenging. It takes up an entire chapter in welcome to your Figma design system. But that's where this dependency graph comes in. It gives you a visual overview of your system's architecture, showing you how all the sources are connected and what's in everything. So then we can come and take a look at what we're seeing here. So System Check is a feature that we're building that helps you identify where your system needs a little bit of support. Maybe there's some ambiguity. Maybe your design system can be streamlined. And so it scans all of the tokens, your styles, your variables, your components across all the libraries, and gives you a few opportunities. Let's take a look at what we can do with Pickup. Looks like we've got a hard-coded text style, some missing descriptions, ooh, some interactive states that might be missing. But this is really just the start. We've started with a small rule set, but we're excited to eventually let you customize and define the rules that you want to see here. And from there, it's not just about telling you what needs your attention, but I think we can make it a little bit easier for you to jump in and take action. So you can imagine a flow where you're in System Check, and then you're In a File. You've got a tool like Check Designs open. And with just a single click, you can go ahead and map all of those hard-coded values back to variables. So that's where we're starting. You bring the pieces of your system together once. And from there, we hope that this makes it easier to manage, faster to improve, and hopefully much simpler for everyone, you and your agents, to use. Now, before I'm excited, before we wrap up, let's go back and take a look at that generation that we are working on. All right, we'll exit this full screen. We'll come back over. All right, it finished. Live demos. It looks pretty good. Looks like pickup. But how can we prove it? Well, I'm going to use my favorite keyboard shortcut, Command-Y, and we're going to jump into outline mode. And all of those purple canvas decorations, those are actually your Figma components that it pulled. Today, we've explored how to bring rich context into Figma to create design system alignment across design and code workflows. But design context goes beyond design systems, so to share how we're capturing intent directly on the Figma Canvas, please welcome the engineer that merged Figma's 1 millionth PR while he and he was rehearsing, Johnny Dallas. JOHNNY DALLAS, Hello, everybody. My name is Johnny Dallas, and I'm today's token product engineer. All right. Can we get a quick show of hands? Who here has read or written a Markdown file in the last two weeks? All right, that's a lot of hands. Keep your hands up if you knew what Markdown was ten years ago. Not nearly as many. Did you all know Markdown has been around for more than 20 years? It was first invented in 2004 by John Gruber and the late Aaron Swartz as a way to write stylized text for the web. So why has Markdown gotten so much more popular recently? And why am I up here talking about it? Because Markdown is a great format for humans and agents to collaborate. Humans can read and write Markdown pretty well. It doesn't have too much fancy syntax. At the end of the day, it's just a text file. And agents love to generate markdown for anything that is needed to be human readable. It's very pretty. As humans and agents work together more and more, markdown has become the de facto container for context. Now, a lot of this context is ephemeral. It's all the agent chats that you've had or that plan that is probably never going to see the light of day, if we're being honest. But some context lasts. Some context becomes the key inputs that are going to drive everything else that you work on. This context needs collaboration from others. It needs refinement over time. And this is where Markdown starts to fall short. For all of the context that Markdown helps us share, it lacks, well, context. Markdown files don't have a way for built-in relationships to be represented. You don't know all the different files that are linked together or the projects that they come from. I cannot tell you how many times I found a plan.md file somewhere on my desktop, and I have no idea what the project was from. But Markdown has links. They look like this. I don't if any of you can understand what the milestone for this is supposed to be, but I totally cannot. Links are entirely opaque to humans. So we wanted to figure out how can we build a new native home for context that allows it to fully express itself and move into, out of, and all across Figma. We call it Figma Specs. Let's go take a look. All right. Let's take a first look here at Figma specs together. To start, I'm just going to drag a markdown file in off of my desktop onto the canvas. And this is a spec. This is Figma's newest material for context. It lives here on the canvas, but it's also a new file type that lives on its own. So let's open up this spec and see what we've got. Specs of course are in Figma, so they're multi-player, and we have all of the Markdown support that you know and expect. We've got to-do lists here, some callouts, beautiful tables copied from FigJam, to-dos, Code blocks and inline formatting like bold and links and strikethrough down here. Specs can be filled manually or via the MCP. You can pull in external context or use any of your favorite agents to fill specs on the canvas. Specs are also a place for collaboration. You can leave comments, hi, config. And we have some nice little goodies that make it easier to reason about, like sections that can collapse, or even be reordered. This makes it really easy to make the spec look like however you want it to. Additionally, we have some special goodies that are Figma-specific, like embeds. I can take any Figma file, whether that's a make or a set of slides or a design file, and embed it directly here into my spec and see a live preview that I can go and play with. Specs are super easy to create. You can drag in a markdown file like we saw just a second ago, or you can just press D here on your keyboard to create a new one. You can also have your agent pull in any data from MCP. Agent is very good at creating specs on the canvas, or click this new specs icon here in the toolbar in both Sigma Design and FigJam. So let's go back to what we've been building all day with this delivery feature in pickup. We're going to show how not all context is visual, and with specs, that context now has a home. We're gonna pull in some data via MCP, we're gonna make some choices about pickup, and we're going ship it. So let's roll over here where our product team has been putting together a PRD that now lives on the canvas describing some of the details that didn't have a place to be expressed visually before this. I'm noticing we have a big open question here about where we're actually going to launch. This is incredibly important if we're going to actually push this feature out. We need to know where we are starting. We also have a code layer here that shows a map. So far in a lot of our demos, we've been in different places. This is in Hyderabad, but I don't actually know if we have any customers in Hydeabad. I don''t know the launch city off the top of my head, but, I know where to go to find it out. We use a tool called hex for all of our data and usage analytics. It has a ton of information about where pickup is being used right now, and we have the hex connector set up with the agent in Figma. So I'm going to bring the agent up, add the hex connector, and see if agent can help us answer this question. Agent can you go find where we have the most usage of pickup and create a spec breaking that down? Also, if you can update this code layer to use some of the real data and the real location, that would be awesome. Agent is going to produce something like this. This is a rich spec that has a ton of detail about where our usage is the highest, which cities have the most usage and the most volume, and where different SKUs are performing better or worse. Where do we have the opportunity to ship delivery and make pickup better? It's also going to take that code layer and break it out for a couple of the top choices. I'm seeing both in the table here on the left and from the map density, Bangalore is where we have the most usage, so no shock here to anybody, Bangalore wins. Next we're going to take a bunch of context that our team has been working on throughout all the demos that you've seen today, we're gonna turn it into an implementation plan, and then we're to take that plan, give it to an agent, and ship the feature. So over here, our team has been putting together a ton of context to finalize all of the details of delivery. We've got an eng spec, a tech spec, over here that our eng team has put together. We've talked a lot about code already today, and we've shown a lot of code up here on the stage. But all of this has been prototype code. Prototype code is not production code. There's a tonne of work that engineers still need to do to take a prototype to production, whether it's the data model, figuring out how this is actually going to scale, the lifecycle of some of the new actors, and operational details, like how this is going to roll out and how we're going to observe it and make sure it works well. So all of these details are here in this spec, but I think we can make this a little bit better. This is a bit wall of texty for me, and context is rich. So I'm going to jump over to an Eng crit that we had recently in FigJam and pull in some more info. Specs work great in Figjam. This end crit was run entirely from the specs and stickies. Team was able to align on all of these deep decisions. And the end result was a FigJam diagram that describes the delivery lifecycle between seller, buyer, and now driver. So we're going to take this diagram and come back to our design file. Let's see if we can add it in here. With specs, anything that lives on the canvas can also live in a spec, whether that's a diagram like this, or some set of design frames, or even an instance of your DS system. All I have to do is take this and drag it right on in, and you'll see the diagram fits to the spec. Now, when we hand this off at the end to the agent, it's going to have this rich context that it will use to build us the feature the right way. We have a bunch more here that the team has been working on. So let's take a look through it. Here we have the final frames that our design team has put together for what this feature is going to look like when it's done. This was extracted out from a code layer, and the engineering team has gone through and added a bunch of annotations for key details. This is an excellent artifact of alignment. Both the design and engineering teams have checked this off. This is exactly what we want to ship. So now we just have to take it forward. Over here, we have a code layer properly showing Bangalore with a bunch of special interactions that have been meticulously crafted. There's a lot of details that go into a map like this, from when should they cluster together, what is the animation, the easing for things popping in when they scroll in and out. And we want to make sure that we capture all of the detail that our designers meticulously crafted when we ship this. Now, last but not least, we have a new design system component that our DS team has put together. They've put together a code layer so we can see what it looks like in action. But they've also written a tech spec to help us understand when should we use this component, when should use the existing component, and some of the other details that might not from the code alone. So we have a ton of context here. Everybody has signed off on this from design and engineers. I think it's time for us to codify all of this into an implementation plan that we can then hand off to an agent. So to do that, I'm just gonna select all of it here, bring up same agent that we saw earlier today, and ask it to use a build implementations plan skill that we set up beforehand. We'll fast forward because there's a ton of details here to crunch together to what this will look like when it's done. This implementation plan has all the details we've talked about today and is written for an agent so they can bring it all together and land the feature. But we're not just here to generate all the time. We're here to think. We're hear to design. So before I hand this off to my agent to go and implement, we should probably take a look at it and make sure that we stand by all the details and it's up to snuff. So I'm going to maximise the spec so I can focus in on it without worrying about everything else going on on the canvas. And okay, I'm already so glad that we're doing this. I'm noticing a couple of details that are off. So I am going to just call these out with comments. I don't think you want to see me edit a bunch of text right now, so comments will let me stay in my flow and review it all at once. So I'll leave a quick comment here, no, it's at checkout. All right. I'm seeing another detail here that's wrong, or at least I think it might be wrong. I know the team has had a ton of conversation about this recently, and I wasn't in all of those conversations, so I can't really say. The good thing is I know who can. I'm going to ping my good friend Mr. Jake, one of the best engineers I know, to come and take a look at this. So we'll send him a notification, and hopefully we'll see him in here in a moment. Thank you, Jake. I'm sure it will be very spec-ific. All right. Let's take a little look through the rest of what we've got here, and we can see it's using our design system. We have tests and observability called out and a rollout plan from the end spec. We've got a table breaking down all the implementation work we're going to need to do and references back to everything that came into this. Okay. I think this is looking pretty good. So I'll hop back to the canvas, and we can see Jake is already in here making a bunch of changes, collaborating on the spec in real time. I should probably go in and fix the comment that I left for myself as well. Got to be a good collaborator. But I'm on a stage right now in front of all of you people, and I, again, don't think you want to see me type a bunch, so we're going to use the agent instead. I'm just going to click this spec, summon the agent, and ask it, can you read my comment and suggest some changes in that thread to fix the issue? Thank you. I really love working with AI through comments. I think it's a really native way for you to collaborate with both humans and AI at the same time. You can just leave comments, anybody can come in and read them, respond to them, and all of the thread history is public to everybody, so we can all really collaborate on it together. You can also have multiple conversations on different parts of the spec at the same time. Highly, highly recommend. All right. It looks like Jake is saying this looks good to him, and we've got a response on our comment, so let's just take a second to review everything that we've done here together. We've taken a new design system pattern, a code layer with specific animation, spacing, and timings, we've taken annotated frames that our engineering team has signed off on as well as our design team, and we've take an engineering tech spec. We've turned all of this together into one implementation plan and got a sign off from another engineer on the quality of it. It's a ton of work that we've done. I think it's now time to ship this. So I'm just going to click this spec and copy a link to it, and hop on over to Codex. Now, we know many of you are already working with coding agents in your day-to-day. And we hear that you're often going and typing a prompt, implement this feature, excuse the typo, and pasting a bunch of links to all of the different Figma resources that are needed for the agent to understand what to ship. With specs, now you only need one link. Codex here is going to use our MCP to read not just the spec and all the detail we just put together, but all of the different frames and pieces that went into that spec so it has the fullness of the context. So to recap that on the MCP side, since we have frames that are ready for dev and have annotations, Codex is going to use Code Connect to pull in all of the specific design system components from our code base that we want to use and maintain adherence. And since we have the code layer with all the specific timings and spacings and physics that our design team fretted over, Codex is going to have it come out looking perfect. Codex going to use all of this context together to help us build and ship the delivery feature for pickup. In the meantime, while Codex works on that, I've got something very exciting to tell you all. Specs is going to start rolling out right now across web, desktop, and mobile. You'll see it in Figma live for everybody in the next few weeks. I don't know about you all, but I personally think this is pretty spec-tacular. No? Yeah, OK, cool. I promised my team I would make at least one good spec pun. So you're all welcome. Now, it doesn't matter if you are a designer working on a design crit, you are an engineer working on a tech spec, you're a PM working on a PRD, or, hey, maybe you're an agent trying to figure out what are those humans doing in the canvas. We all need tools to collaborate, and we all have context to share. Now, I'd like to welcome to the stage James to show us how we're going to take pickup to the market now that we've shipped. Hey everyone, I'm James. Isn't Johnny fantastic? My son is also named Johnny and if he grew up like that I'm good. Anyway, I've been sort of a hybrid designer engineer for most of my life. A little bit of branding, a little bit marketing here and there and then I built a company called payload that ties all of that together more on that soon let's pick up right where Johnny left off okay here are all the new flows for the delivery feature it's not quite swiggy but it's pretty legit his agent shipped it and here is the live app Let's buy a bird. Okay. Delivery. Cool. Here we go. Let's see what else we got. Okay. Hmm. I think there's still some work we got to do here. This homepage says literally nothing about this new delivery feature. Build it and they'll come? Nope, we all know that's fake and we have to start recruiting some delivery drivers because without the delivery drivers, this whole thing doesn't even get off the ground. It needs to be super easy to apply as a driver and I think it would be great if our launch city landing pages could do a little bit of the heavy lifting for us and recruit drivers and I also know that the marketing team has wanted to localize these pages for a while now. So the feature, that's shipped, but we're pretty clearly not done here. Shipped and launched are not the same thing. We still have to update this entire site to promote the delivery feature, revise the launch city landing pages, localize everything and build a driver onboarding funnel and we're gonna need to have an admin UI of some sort to manage all of this. All this focus on design and engineering, nobody ever thinks about the marketers. Good thing I've built my career around all of these. I've always tried to bring content into design and code. Some people build careers around their passions. Is content my passion? Maybe design. I don't know about that. But usually with a little bit of a struggle, we'd make all this happen. And this is usually where a CMS comes in. Ooh, this is the fun part. Everybody loves CMS, right? Trust me, I have felt the pain of trying to force my design into an old school CMS. The way you have to fight the system in order to get it to work the way you want to, some of the things I made PHP do back in the day are just straight-up unspeakable. But rather than keep committing all these code atrocities, we built a whole company called Payload. Thank you. Has anybody heard of it? Cool, yeah, all right. We focused really hard on the developer experience. It's strongly typed and it's It's all config-based. Everything is done with modern best practices. It started off as a side project, but it's now the fastest-growing open-source CMS on NPM. And Figma acquired Payload last year, and now we're here in India. Payload gives you a real back-end. It gives you database, content, and asset management, user login, and admin UI. It ties content to your design system so that anyone can create with branded instant building blocks. And today I am so excited to say that we're bringing Payload into Figma. Thank you. If you prompt make and our agent detects that you could use a back end, it'll now build Payload directly into your app. And this opens up a lot of new possibilities. The pickup team has actually made pretty good use of this already, so let me show you what they did. So we know Johnny's been out there slinging specs. Marketing fed some of them to make and prompted a whole new campaign around this feature. And voila, the home page actually talks about delivery now. And they've even got an entire admin panel. This is a completely new surface area for Figma. On this tab, I can manage all of Pickup's content. But first, let's actually launch. Just by clicking this Publish button here, we can ship the whole thing live. And this is a full-stack application with a database, file storage, and everything right on Figma Santa. He showed up in my presentation. But let's check out the launch cities. OK, Bangaluru. Here's Bangalururu. And it is localized. And that's hard. That's very hard for any of you that have done that. And it's got this driver application form. So let's sign up. But before we do that, I want to see, OK, that's getting a little excessive. Before we sign up, I wanna see what it looks like on the back end, behind the scenes. Even after this website is deployed, I can go to slash admin and log in. The UI of Payload is super extensible. And we've got a bunch of new custom components here that allows us to see at a glance what's going on in the driver dashboard. Let's go to New Applications. OK, now back to the form. And let's see how fast I can type. Okay. Test.com. A classic. Okay. Availability. Literally all the time. Okay? Submitting? Okay. So we've submitted. And the form is only the visible part. And there it is. One new application. mine landed in the database. Let's pop it open. It's got all the onboarding fields that the ops team is going to need to work through. Figma's agent created the data model that receives, stores, and tracks every driver application. This thing is firing off emails, notifications, it's a full-on app. But the agent didn't have to build all of this from scratch. It built it on Payload. And that means that in this same admin panel, marketers can edit pages, update copy, and maybe tweak some SEO, create new pages, manage assets. Payload is kind of unique because it handles both content and assets. It's sort of a unique content asset management hybrid. And this is great because the marketing team wants to build some stylized hero videos for each of these city landing pages. So we've built a Weave workflow that can generate assets and keep them consistent and branded over time. And so as we add more city landing page, we can generate an asset. this one Weave workflow has produced like 10 videos already. And they actually wired up Weave right inside Payload so that they can call their Weave tools to generate assets on the fly. Right here. I can choose a tool. Let's choose the Pickup City landing page video. And then I can fill out the prompt and I can generate with Weave. But let's see what one of these videos looks like on this landing page. Let's go here. All right. Looking good. Let's publish. Cool. Pickup can store and manage all of their assets at scale, photography, videos, PDFs, right here. Organize them in folders. We can add tags and add metadata to all these assets. of teams have a separate asset management platform and then a separate CMS and then what do you do the first step you have to wire them together but this is a one-stop shop okay so we remember everything that was missing here the home page now talks about delivery the launch cities are live Bengaluru is localized we are now recruiting drivers and ops has a tool to manage every application. That's product, content, and data all in the same app. We give you the framework, batteries included. And if you need to extend it, you can. It's fully open source. So that means, thank you, yes, very important. The open source part means that you can connect it to GitHub. You can work locally. You can deploy it wherever you want. You can take this thing out of Figma if you want to. It's up to you. Starting today, Payload is in Figma. And once you've got access, open up Make. Ask it to build you an app. And if you've feedback for us, our team is all over GitHub for sure. We have a Discord channel, Reddit. This is just the start, and you can expect a lot more here. but let's get Dylan back out here. Thank you. All right. Thank you, James. Payload is awesome. I hope you all saw that firsthand. But it's awesome not just because of all the things you just saw, but also because it allows you define structure for your content. And it lets you do that in code. That way, your CMS works exactly the way that you intend it to, because we've all worked with CMSes that don't. And like James said, we're committed to Payload being open source and to its open source community. So you can take Payload into Figma, out of Figma. You can bring it in, out, whatever you want. It's yours. We're not holding your CMS hostage. It's amazing to see also just everything the payload community is making. It's not just CMS. It's also internal tools. It's DAMS, more. This is a very versatile, flexible system. And we're so, so excited to be able to work with our team. So I think the NPM demos are speaking for themselves. but please do check it out and let us know what you think. So before we recap, please join me in thanking all of our speakers. Let's give them a big round of applause. Sam, Pete, Tara, Johnny, James, you crushed it. Today you saw workflows that become possible when design and code and content and data all come together in one place. So quick recap, today you saw code layers, which now allow you to work with code as a material in the Figma canvas. These are going to be rolling out in open beta over the next few weeks, starting today. Design systems. Guidelines are in open data. Code sources are in closed beta and coming to open beta soon. Specs. Now you can bring context into, out of Figma, and across our platform. These are now rolling out in open beta, also available over the next few weeks. And last but not least, Payload, live now. Go check it out in Figma Make. As you saw in all these demos today, Figma Agent took center stage. It's part of all these workflows. Figma Agent is an essential part of the story. It's right there on the canvas, wherever or however you want to use it. Or not use it, whatever. I want to tell you all very directly, we are not building the Figma agent to replace you. We are building the figma design agent to make it so that you are maximally empowered. And we're already seeing customers save just countless hours with Figma Agent. People are using it to automate repetitive tasks, generate basic screens that they would have otherwise had to toil on with their design systems, and so much more. The use cases are blowing me away. I can't wait to see what you do with it as well. You also saw how MCP powers so much. It makes it possible to move work in and out of Figma. If you have not tried the MCP recently, maybe you tried it six months ago and were like, oh, not quite there, Figma, try it again. It has improved so much, guys. It's amazing. Try it. And as of today, our MCP now has even more capabilities, like skill.md guidance, the ability to generate images, and, of course, you can use it to generate code layers and push a spec into Figma or pull it out. All right. We have one last announcement today. We have added 20 new MCP partners. And this is just the start. There are so many more partners coming soon. Some of the new partners available today, OpenCode, Dia, JetBrains, Metamuse, and Sarvam, first Indian MCP partner. With all of these MCP partners, whatever your workflow, you'll be able to connect it with your tools and collaboration in the Figma Canvas. To wrap up, it is, I think we all know, a wild time. For the world. And hey, also for your workflows. So at Figma, we're focused in we want to help you work at the speed of thought. We wanted to make it so that your ideas can move freely without any of the constraints of the past. Our vision for Figma is that we allow you to work your way. With the materials, the primitives, the tools, the capabilities that you need to make your dreams real. That's what it means, that's what is takes, to build by design. AI can help you build, but building something great requires your intention, it requires your craft, your care, and it requires your creativity. We're the dawn of what I believe to be a creative explosion. With new types of interfaces coming, digital surfaces, product experiences ahead, the possibilities are truly endless. I hope you all feel it because certainly I do. So on behalf of the Figma team, we can't wait, truly cannot wait to see everything that you create. And we cannot wait to see how all of you advance product design, product development, brand and marketing, creativity together. With that, thank you. all right y'all that is all for the keynote but before we end i want to tell you just a little bit about the day ahead i am so excited for the amazing talks that y' all have today i hope you enjoy them and i hope y' meet also some amazing new friends and make connections this is a incredible group and the folks that you meet in the hallway for a short conversation could become a key person in your life. Please welcome each other just like you're welcoming us. We're so grateful. And I really hope that you leave inspired. Take something from one of the talks today and bring it back with you. So, I'll see you again in a few hours and thank you again. Happy Config India! Thank you. We'll be right back. Thank you for watching.