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 felt this entire time. Thank you for welcoming me. Thank you 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.
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 got to 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 going to give him some shout outs. For example, VJ.
It would appear I'm not the only fanboy here. VJ has been making the most amazing, intricate illustrations in Figma for years. When I see VJ's work, I usually just stare at it and go, 'Wow.' And then that follows with a 'how so good' or the team at Goat 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 Goat 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 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. And 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 think, it is fast. It's loose. It's 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 to ship. Building to 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, into what you're making. And that care is so critical.
So today we're going to show you some new ways we're going 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 IDE as a non-developer, it does not feel like home.
You'll deal with it. You want to be current. You want to be 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 for your agents. It's 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 code layers 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.
And I'm Pete. I'm a product designer. 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 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 coworkers 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 a 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 codebase 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 code into a code layer. Let's jump into a demo.
Okay, normally when Sam and I are designing, we're designing Figma in Figma. And I'm not going to 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 going to 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're going to use this new feature called capture code. And 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/ds. 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. 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 going to 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 going to 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.
