Designing in code | Config 2026

[music] What's up friends? Welcome back to day two of deep dives. I'm Georgia Russ and I'm on the product team here at Figma.

And I'm Angelso and I'm on the research team here at Figma. Before we begin, just a gentle reminder to please turn your phones on silent if you haven't done so already. Also, let yourself be fully present on this stage. We have

some amazing friends who are going to come out here and share their hard work with you. All right, housekeeping notes

with you. All right, housekeeping notes out of the way. Let's get into our first deep dive. We've got a great one for you

deep dive. We've got a great one for you today. We're going to be bringing out

today. We're going to be bringing out the team to talk more about designing with code. So, please help me in

with code. So, please help me in welcoming our wonderful team, Iris L.

Ben, and our infamous Red Hat guy, Nico.

[music] What's up, Config?

Let's go. Let's go. Let's go.

Happy day, too. It's another foggy day.

I hope you brought your layers. Okay.

Jokes get better when you do them two or three times. My name is Nico. I'm Ben.

three times. My name is Nico. I'm Ben.

I'm L.

And I'm Iris.

Yeah, let's get into it.

Let's start this deep dive off with some real talk. This is kind of what

real talk. This is kind of what everyone's been talking about this whole week, but I'll just say it again. We're

building some amazing things now with AI. We're able to generate new concepts

AI. We're able to generate new concepts so quickly. to explain or show a

so quickly. to explain or show a concept. All you have to do is prompt in

concept. All you have to do is prompt in an AI coding tool like Figma make and you'll see it come to life. It's great.

It's changed our workflows and the tools we use to do our work. We have access to code now which is opens up entirely new

ways to express ideas and solutions. But

code is rarely enough by itself.

We get unprecedented speed with our new AI workflows. We can spin up prototypes

AI workflows. We can spin up prototypes quicker than ever. But speed itself isn't a solution. It optimizes the way we work.

So this new landscape presents some new challenges in the design process.

With the power of new tools, it can be easy to overlook the explorative process of design.

The solutions we vibe code look polished and convincing, but they may not always match our initial intent. We often don't have time to spend weeks questioning the solution and exploring other options,

which means we can skip the work of exploring the space, ideulating on different directions, or looking into other better solutions. We still need that time so we can choose the right

ideas to build. We also want what we make to look like it comes from within our own system. This ensures our work is durable and even shippable. If every

designer is working on their own prototypes in isolation, you can get into a state of divergence. People can

make choices that work well for them but aren't aligned with the rest of the design system.

And in an attempt to be as clear as possible in handoff, we usually end up doing more work manually rebuilding code prototypes and design layers to hand

off. We need tools that help us maintain

off. We need tools that help us maintain the design guard rails that keep things cohesive.

No one wants to feel alone in the design process. We're working alone in these

process. We're working alone in these tools for a lot more of our time. We

also have fragmentation out there where explorations and artifacts live in different places that creates barriers to the collaboration that's become such a critical part of the way we work. We

need to maintain those human connections throughout the design process. We need

the doors to stay open so that others can come in and continue the conversation.

All these new AI tools, they make it easy for non-designers to express their ideas. But as designers, we see

ideas. But as designers, we see ourselves getting pushed more and more into engineering tools. We all want to expand our skills, stay relevant, and push the boundaries. Code editors seem

like a natural next step for many of us.

But some of you may be thinking the ID is not for me and that living in a terminal is no way to live.

And as much as I love the speed at which we can work now, I miss being in a canvas where I can duplicate frames and iterate on an idea infinitely and then

bring in team members to help me build on my ideas.

Well, we've been really busy. We've been

working on a solution for all of the problems I just described. Here's what

we'll walk you through today, and we think this is going to empower you to do your best work.

Code is now in the Figma canvas. With

code layers, you don't have to decide between a coding tool or a design tool.

You can get both and the ability to move between them seamlessly, helping you explore multiple divergent ideas side by side in different modalities.

But production code can be part of the design process, too, with Make because Make now works as a production code editor. When prompting isn't

code editor. When prompting isn't enough, we're giving you more precise and visual control in make to keep your intention intact. Now, I'll hand it off

intention intact. Now, I'll hand it off to Ben and Nico to walk through our code layers workflows.

Thank you. Thank you. Thank you, Iris.

Thanks. [applause]

Yeah, welcome everyone. I Yeah, hope again you're having an amazing config.

and Ben and I are going to talk about the magical feeling of designing with code. We're going to go a little deeper

code. We're going to go a little deeper than yesterday. How collaboration on the

than yesterday. How collaboration on the canvas is so much better than just sharing videos and when to use code for prototyping versus when to work directly

in production.

Whose files here look something like this? Come on. Come on. Come on. Come

this? Come on. Come on. Come on. Come

on. I know. I know they do. I know they do. I I think this is awesome. The

do. I I think this is awesome. The

design process is can be so messily beautiful and because you need to go broad and deep at the same time. And as

a design tool, we don't want to make you choose. We're basically just providing a

choose. We're basically just providing a workbench for you to do whatever you want to do in whatever material you need to express your ideas.

And coding with agents is quite a linear experience, right? Like you write a

experience, right? Like you write a single prompt, maybe you write a loop and you can go incredibly deep, but same as we said yesterday, the workflows around code are isolating and not built

for exploration.

We're making code a collaboratively explorable material so you can figure out where to go together.

And it's critical to prototype to understand what you're trying to do.

Like famously, Gaudi designed the Sakrata Familia that recently opened.

I'm not sure if you've seen this, right?

But it he designed it upside down in order to capture organic curves that he wouldn't be able to do as he were built was building them up from the ground.

And designers have been sharing prototypes, building and sharing prototypes in Figma for years.

Like I know, I know, right? Who here who here has built a prototype that kind of looks like this?

I know, I know, I know. So, I'm like partly sorry.

Uh like this is what I've worked on for for over seven years. And like sure, we kind of like made it better over time and it's and it's it's great. I I I think there's a lot of value in seeing all of the state side by side, but

there's often also just too much visible on the canvas for you. So, you do want to compress it and get more functionality in a denser space. And

these prototypes right now often also only feel kind of like this. They feel

like you're designing a backpack and you're rebuilding the entire backpack with cardboard. And I think that

with cardboard. And I think that actually it would be nicer if if it's more like this. Also, like thank you for AI generated images. That actually was really helpful. Um because think about

really helpful. Um because think about if you're prototyping like a holder for a backpack, right? The only thing you want to do is to attach something to an existing product. And so you want to

existing product. And so you want to take the existing product and then take a knife to it, right? And put some hot glue on it, put some cardboard on it or something. And then gives you like the

something. And then gives you like the feeling like you could imagine me wearing this. It gives you the feeling

wearing this. It gives you the feeling of like you playing with something real enough so you can evaluate this.

And more importantly, it's not just one idea. And this is the beauty of the

idea. And this is the beauty of the digital medium over working in the physical medium. Because if I have built

physical medium. Because if I have built a prototype, I can just duplicate this.

If I have cut open a backpack, I cannot duplicate the backpack. I have to cut it open again. So that's why I actually

open again. So that's why I actually really love the digital medium for creative open-ended exploration. And you

only understand how good one idea is by seeing many of them. And this is what we'll hope to for you to do with code layers. So you can explore to your

layers. So you can explore to your heart's content and start from existing code. So let's take a look.

code. So let's take a look.

Okay, so the first thing that we want to show here is the GitHub import we were talking about yesterday. I heard from a couple people that like just mentioning it and not kicking it off was like okay

is this working? Let let me show you how this works. So we here in a Figma file

this works. So we here in a Figma file um and I can just click on build with code and if I click on clone repository I will see a list of repositories that

are connected to this account. And so

let's click here and say clone. And just

like that, it's in the canvas. And now,

as you can see here, the agent is working on cloning this and making it work.

And in those moments, code layers, I'm not sure. I think they're more like

not sure. I think they're more like windows into your repository. You can

create many different windows. Different

people can also look into your repository from different places. This

is the beautiful thing about the code not being directly in the canvas but the repository being visualized in the canvas.

Well going to wait for set this up and let me show you another way to create it. I can here I have two designs. I'm

it. I can here I have two designs. I'm

going to just select both of them and I'm going to use the agent entry point here on the right. I'm going to say build this with code. And so we're sending off a prompt built an

interactive uh built interactive code from code layer from this design. And

the cool thing about this is that agent will now analyze what is on the design and will actually create a code layer and then send both of those uh both of

those Figma design layers and a specific prompt into it. So we're going to let this run. Um but you can see here that

this run. Um but you can see here that this is something that like I've created of course before. We'll get to the other one when it's once it's done. But you

can see, okay, it did some it did some things. Okay, it's not like funny yet. I

things. Okay, it's not like funny yet. I

don't want to be like, [laughter] you know, you get me? Okay. Uh, let's

try out a couple things here. I think

one of the thing, let me just copy this prompt because no one wants to see me typing. Uh the other thing I can do with

typing. Uh the other thing I can do with agent is that I can just face this in here and it's saying create three variations of what happens after the

slider has been tracked. An expressive

one, right? An animated one or a very basic one. So let's do this. And now

basic one. So let's do this. And now

that the agent looks into the code essentially and decides what to do and it will duplicate this code layer creating separate branches of your codebase putting them side by side and

sending individual prompts to each making it much faster for you to explore the solution space ahead of you. This

two we prepared down here.

I'll I'll get back to some of them.

Let's play them all and like see what's happening. See if it got the like swoosh

happening. See if it got the like swoosh effect correct. Okay, let me just Oh,

effect correct. Okay, let me just Oh, hide the UI.

Show and hide UI. I'll get this back later. All right. And now we can see

later. All right. And now we can see here.

Well, let's see. Hey, now it's like the little confetti. There's a little

little confetti. There's a little swoosh. I think this one is a little

swoosh. I think this one is a little slower. Yeah. Okay. Some little more

slower. Yeah. Okay. Some little more subtle. I think this one was the instant

subtle. I think this one was the instant one. Yeah, it's just the instant one. I

one. Yeah, it's just the instant one. I

do really like the Yeah. Should we do it again? Okay. One

Yeah. Should we do it again? Okay. One

more time. [laughter]

Okay. Okay. Okay. The the next thing too is like so we've shown that like you can create code from designs through the agent. You can create multiple code

agent. You can create multiple code layers also through the agent and you can operate on multiple code layers at once through one agent as well. So for

example here you can see that like as I'm navigating between them. Okay. I'm

going to do it one more time. as I'm n having between them, they're kind of like jumping around a little bit. And

so, one thing I want to do is that for all of them, I want to say, what do I want to say? I want to say that the the bottom dragging handle

thingy, I actually don't know what it's called, should stay at the same position, right, between the first and the

unlocked state.

So, now I'm going to send this off, right? And so now the agent again

right? And so now the agent again analyzing what's what what I've asked and will send individual prompts to each code layer. Let me just show the UI

code layer. Let me just show the UI again. Cool. Let's go over here and

again. Cool. Let's go over here and let's check out. We see that the GitHub codebase is actually imported. So the

cool thing now is I can just play with this. It's kind of nice. We play with

this. It's kind of nice. We play with this. Um and there's a lot more that you

this. Um and there's a lot more that you can do. Let's see.

can do. Let's see.

I will there's a lot more they can do that we'll see with Iris uh and L as well within the code layer. So

definitely stay tuned. There's some cool updates there. But great ideas are never

updates there. But great ideas are never made alone. So Ben is going to show you

made alone. So Ben is going to show you how we can take this even further.

Wow. Thank you so much, Nico.

[applause] As an engineering manager, I'm always so impressed by what designers are able to create in Figma, and I'm so excited to see what all of you create with code

layers. But I think I might be even more

layers. But I think I might be even more excited to see all the ideas that didn't end up making it.

Because design is not just about the happy path. If you've worked with

happy path. If you've worked with engineers, you maybe have experienced how annoyingly good we can be at pointing out, well, what about this edge case? or oh actually that's going to be

case? or oh actually that's going to be kind of hard but maybe this other way will be easier. AI is really great at building stuff that looks polished but it's full of holes and that kind of feedback is so important to get early

on. The canvas makes it really easy to

on. The canvas makes it really easy to show your thought process and visualize the trade-off between multiple solutions.

Consider what it looks like today to share a prototype. You maybe post a message in Slack, you get some links, maybe you get a few emoji reactions, but it's really hard to manage that feedback

and make decisions.

A canvas lets you see and keep track of all of your ideas in one place. And

better yet, anyone on your team can directly prompt a change and pick up where you left off.

So, let's jump into a demo to show you how some of the collaborative parts of code layers work.

So, if we switch over to the demo here, great. Uh, I have here three prototypes

great. Uh, I have here three prototypes that my designer sent me. And, uh, you know, it's kind of hard to tell what the

difference is between them. So, what if, let's just restart these. What if I go here and could One second.

I wait for this little tool tip to go away.

There we go. Uh, what if I could just click through the application and just walk through it like I normally would? And this is a prototype. So,

would? And this is a prototype. So,

we're just going to go through it.

And there we go. I'm going to hit stop.

And there we've extracted all the screens which make it really, really easy for anyone to look at everything that's going on in this application. And

the best part is there's no AI here.

It's deterministic, free, and fast.

I'm going to do another one here.

Well, all right. Let's do the bottom one first. We'll come back to the middle

first. We'll come back to the middle one.

And maybe you can spot what some of the differences are.

All right, hit stop. There we go. All

the screens are extracted. We'll do the middle one if it will cooperate with me. There we

go.

All right.

[snorts] I'm gonna click through these pretty quick.

Great stop. So, did you notice what the differences are? Well, in this version,

differences are? Well, in this version, we have the verify email step up in the middle and later we moved it on to the end because why get in the way of your onboarding? And here we've added a

onboarding? And here we've added a couple um single sign on options and [snorts] change the card view. Uh so you can you know maybe compare if you want to go through cards or more of a grid

view. And if I'm an engineer here and

view. And if I'm an engineer here and I'm looking at this I can look at things like well you know should we have a password field

or I can look over here and say well what happens if I type the wrong code.

These sort of discussions are much easier to have in a static spec format because the canvas is not just for doing your own work. It's for presenting it

and bringing your team in.

Let me for a moment put on my growth PM hat. So let's say Nico ended up sharing

hat. So let's say Nico ended up sharing this version with me. And yeah, okay, it's a little bit more dialed back, but it feels pretty good. But I really

really want people to click on this button. Uh, my bonus is going to depend

button. Uh, my bonus is going to depend on the clickthrough rate here. So, I can just easily say copy that layer and say

make the button shimmer.

I'm going let that go in the background.

Uh, here's two examples that I created on the side. And here you can see this one is shimmering the little button over here, whereas this one is shimmering the whole slider. And both of these, you

whole slider. And both of these, you know, share the same commonality as the ones I copied.

If I don't think that's enough, I can go in here, maybe make the the the item bounce or play with the uh finished effect.

So, everything we kind of showed here with code layers, they're kind of simple. Maybe you're wondering like

simple. Maybe you're wondering like what's like a real product? What's

something a little bit more complicated?

Uh what about Figma design? So, I have here uh a canvas and I can move elements around. you know, I can interact with

around. you know, I can interact with the elements panel. I could even go in here and uh change the color. And that's

not great contrast, but you get the idea. Um, but if I, let's say, wanted to

idea. Um, but if I, let's say, wanted to work with my agent to build a new feature like uh something where I can connect my components with my code, well, all right, I'm going to go ahead

and boot up the terminal and then I'm going to start up my dev server. No, I'm

just kidding. This is a code layer just like all these other code layers. You

can run all of these side by side. These

are working interactive code layers that don't require you to spin up a dev box or understand how to use git or open up a terminal. It's just easy to go ahead

a terminal. It's just easy to go ahead and copy and prompt.

So, um I want to go back to the slides now and I'll talk a little bit more about why we took this approach.

So production [clears throat] code really requires you to bring in a lot of stuff you don't really need for prototyping. Uh yeah, you want the

prototyping. Uh yeah, you want the screens, you want components, you want realistic looking data, but you don't actually need a back end. You don't want to care about deployment.

Many [snorts] companies including Figma have been building prototyping playgrounds. And these can be built with

playgrounds. And these can be built with your real front-end components, but they're free from all the baggage that you don't need. And a huge advantage of this is that LMS can work so much faster

on these code bases, saving you both time and tokens.

The way you design with code will ultimately depend on your use cases.

When you're doing exploration, prototyping code lets you test ideas quickly and get feedback from your team.

When doing implementation, working directly on production code lets you deploy changes faster and nail all the UI details yourself. I've been

incredibly impressed with all the designers who have been using AI lately to ship major changes directly to production. They're able to add a level

production. They're able to add a level of craft that takes a product from good to great. So, I'm going to hand it over

to great. So, I'm going to hand it over to L and Iris to talk to us about how to use make with your production code.

[applause] Thank you, Ben. So now we're going to dig into what happens when you have direction and what it means to build on production code.

We'll cover how you can ideulate within the constraints of production, design on production code directly in a Figma native way, share seamlessly with your

colleagues, and leverage design systems to build things correctly, not approximated.

But as Ben mentioned, sometimes a prototype playground meets your design needs, but there's also times when you're at the last leg of a project.

You're thinking about refining where the small details are often the ones that get left behind. And that's when working on production makes a lot of sense.

This is a time when we want to start from reality, work within realistic constraints so that we can test actual behavior and ultimately get the power to

ship with confidence.

So let me set the scene for our demo.

Let's say I'm a product manager. I am

working for a company called Offtrail.

And Offtrail is an outdoor meetup platform. This helps people discover

platform. This helps people discover outdoor activities in their area, meet like-minded people to do outdoor activities with, and hang out and enjoy

their community. But we need to make

their community. But we need to make some money. So, we're partnering with a

some money. So, we're partnering with a bunch of sports brands to deliver some brand sponsors events.

We're going to pilot this out with two different customers, Cadence and Drift.

We're going to meet Chad in a moment.

Chad is the CEO of Cadence. I just got off a pretty stressful call with him, so I'm just gonna play back what he had to say.

Hey Chad, thanks so much for your time.

I heard you had some feedback about Offtrails website, so I've pulled it up and I'm hoping to hear what you have to say.

Yeah, for sure. We're super excited to be sponsoring some of the events on OffTrails, but it wasn't obvious to me that these were cadence sponsored events and we really want the attendees to know that they're coming to one of our

events. Is that something you guys can

events. Is that something you guys can work on?

Ah, okay. Got it. Yep. I can take this back to the team.

Perfect. Thank you.

Cool. Bye.

Great. So, it wasn't actually that stressful, but in the moment when you're talking to a CEO, it can feel a little intense. Um, what I'm going to do is use

intense. Um, what I'm going to do is use our new tools in Make. So, for those of you who aren't familiar with running Make on your local code, the nice thing

is we have access to the entire production codebase. We did this by

production codebase. We did this by cloning the repository through our connected GitHub account and saving that code directly on my computer.

This enables me to prototype and build directly on production code. Meaning

that the code that is produced will reflect the patterns of my codebase and it will feel safe to make changes because it's all local to my machine. In

this case, I'm about to leverage the context of the codebase to map out and understand the product. So, moving to our demo.

I have our website pulled up here. It's

fully interactive. It's what our proto our website looks like. Here is one of the events that Cadence is sponsoring, the Canyon Crew meetup. And I have asked

the agent to basically map out our website so that I can understand all of the different interaction points where maybe we want to highlight a sponsorship. Um, and here I can go and

sponsorship. Um, and here I can go and navigate to that FIG jam that was created.

So, we have a Fig Jam here. Uh, you can see the different web pages. So, we have the event detail page, the profile page, the map page, and then finally the homepage. I'm thinking that we'll focus

homepage. I'm thinking that we'll focus on the featured event card because that's the one on the homepage that everyone's going to see. And I have a feeling that Chad might give us a little more money if I put him right in the

front and center. So, navigating back to my website, I have it loaded here. And

the first thing that I am going to do is create a prompt u sorry create a branch.

And the reason why I'm going to do that is so that my work is completely protected and I'm able to idate without being worried about being that one product manager who brought down prod.

So, let's get started creating L's sponsor.

Um, and I am going to check that out.

You'll notice that I'm checking out the latest from main, meaning if there were any code changes created and added to the repository since I last used it, I'll have access to all of that information and data. And you'll see I'm

now on that branch.

And the first thing I'm going to do is use our new annotation tool. And I'm

thinking that a good place to put this sponsored badge is on this image right here. So, I'm just going to leave a

here. So, I'm just going to leave a comment and say to the agent, add a badge saying sponsored.

And I will pass that off to the agent to get to work.

I'm going to go back to the slides just for a little bit while the agent is doing its job.

So, I want to briefly just touch on some things that we're thinking about to make it so that we can work with agents, but do a little less prompting.

For me, I really like annotating.

Annotating is a more visual way to prompt and give context. Sometimes I

find it pretty tricky to guide an agent to make the exact change that I'm trying to make. But using annotations, I can

to make. But using annotations, I can point exactly at what I want and hand it over to the agent. No more really annoying long prompts where I have to write make a change in the top right on that image that looks like this and make

sure you get it right and don't change anything else. I can just point type the

anything else. I can just point type the prompt and send it over to the agent.

You hear that ding? It means it's done with its work. Uh we also know that git workflows might be a new way of working for many of you. Uh especially if you've

never worked in a codebase before. So,

we have spent a lot of time getting to know our users and making sure that we designed this in a way that felt very intuitive to get started because we want to make sure that we're giving you the power of source control workflows and

then also make sure that you're starting to learn about the benefits so that when you do contribute to code, you're doing it in a safe way.

For example, similar to Infigma design, branching is a way to work without ever having to worry about anyone else. Using

branches, we've made it easy to check out other people's work. Maybe you could just paste a link or use the drop down to switch and see what they're up to.

We've also know that when you're using Figma, one of the greatest benefits it brought 10 years ago, to me at least, was it saved for me. So, you don't have to worry about saving. And we brought

that benefit directly into Make by autocommitting the changes after each prompt. So, you don't have to worry

prompt. So, you don't have to worry about whether your work is saved. It

just is. You'll be able to go back to previous commits, revert them, just like version history in a Figma file.

Switching back over to our demo since we know that our agent did what it was supposed to.

You can see over here a really tiny sponsored badge got added. I don't feel very good about that. I again I'm trying to impress Chad, show him that we're doing a lot of good work here. So, I'm

just going to leave one more comment to the agent and just mention make this a little bigger and bolder.

I'm gonna pass that off to the agent.

And as I mentioned, the nice thing about annotations is if you look at this nice little shimmer effect, we know the agent is working on the right thing. And it

helps me at least have confidence that it's not going to go mess up the whole codebase at least. And that ding is my evidence that it did what it was supposed to.

Okay, it looks a little bigger. Not as

big as I wanted it. That's okay. I feel

pretty good about what I've done so far.

So, I'm going to hand this over to Iris, my designer, to let her see the work that I've done so far. Much like sharing in Figma, there's a share button. U and

what's nice is I have an easy way to push my changes so that everyone can have access to the code if they want to check out the work that I'm working on.

Just making the push. I will add Iris invite her to my file. And now over to you Iris.

Great. So L shared her branch with me.

This is super helpful because nothing gets lost in translation. I can see exactly what where her head's at.

Okay. So, uh Whoops. Sorry.

Okay. Let's pretend this is the branch I opened. What is this? A badge for ants.

opened. What is this? A badge for ants.

I think Chad's gonna want more of his branding here. So,

branding here. So, let's explore that for him. Um,

so here's the diagram that L made earlier using that MCP tool. And it's

great because do you ever get a moment where you're wondering, is this actually implemented? You have to go into the

implemented? You have to go into the app, you have to create a test user, you get lost and you don't find the right state. Well, design files, they can now

state. Well, design files, they can now represent more of what's in production.

A lot of this time, I have to do this manual work to find out. But with this diagram, I can quickly understand all the surfaces where this badge needs to show up and it's visibility into

production code that I never had before.

And I can make sure that the design solution I come up with covers everything. And so L helpfully uh tagged

everything. And so L helpfully uh tagged some of these as P 0. And I have a couple sponsored badges here that I was playing around with

because I didn't really know what I wanted yet, but I knew I didn't want what L gave me. So I drafted up a few ideas for badges in the design file here. Sometimes you want to work with a

here. Sometimes you want to work with a blank canvas and not be constrained to prompting for changes. And I also explored what they could look like in the page.

So let's use make to test out how it looks in the app.

I'm going to copy the link to this.

I'm going to go back to make.

I'm going to select this area that I know I want it to be in. And I'm just going to prompt

in. And I'm just going to prompt add this sponsored badge according to my Figma design

and then all I have to do is apply those changes.

So while that's happening, let's switch back to some slides.

The beautiful thing about make is that the Figma MCP server is built directly into make, which means you don't have to set it up manually. It'll just work and it has all the benefits of the MCP server you've been using with your AI

coding tools already.

All the same tools are available, including the ones that helped L go from code to design.

And there are tools that help keep your design system connected between design and code as well.

So, I already did this with the magic of AI. I already did this. I

AI. I already did this. I

noticed that the agent built it for me.

It looks pretty good. It's really close to what I had designed, but it's not quite perfect. But, do you see this

quite perfect. But, do you see this here? Are you noticing something here?

here? Are you noticing something here?

Something kind of cool on this right side. Um, all I have to do to make this

side. Um, all I have to do to make this more to my spec is move things around. I

see that that date. I can just like drag and drop it and it's there.

[applause] And yeah, maybe maybe some of the colors weren't quite right. Maybe um, you know, the alignment of this isn't right. I all

I have to do is use the tool here to fix it.

This really helps me get fine grain control over the result. And it feels more native to me to be able to do it this way than having to prompt to do it this way.

So, there's also something super cool about this design panel that I'm about to show you. Remember how I said that design systems in this new workflow, it's hard? Well, we have a solve for

it's hard? Well, we have a solve for that.

Let's say I click on this. And I think our friend Chad might want his company's name to be a bit bigger, don't you?

Yeah. I mean, I'd like more money for sure.

Yeah. Okay. Well, wait. What? Wait.

What's this? What's What's this? What is

this?

Oh my god. What is that? Um, if I click on that, my variables are there.

So, [applause] I can also change the color here and use the variables

there as well. You might be asking yourself, well, how does make know about my variables? Let me explain how we have

my variables? Let me explain how we have this and I'm going to switch back to a slide.

Make can detect your components and automatically generate the right properties for them so you can edit them in the editor. So you'll see in this slide that there's this little button called generate properties at the bottom

of this component section of the edit panel. We do the same thing with

panel. We do the same thing with variables from your codebase. The same

way we detect component properties, we can also detect variables and show you the ones that are relevant for the element you've selected. You'll be able to choose from color and spacing

variables from your codebase as well as your text styles.

So, let's actually select a component so you can see this in action.

I'm going to select this big register button here.

And I can play around with the properties of that. I can add that icon.

I can change the size. And I can do all of that without prompting. And I can see it in real time.

[applause] So, Sometimes you get really far down the path of prompting

and maybe your design system has diverged a bit. Like you went to

town on a component here. Like look, I I got the logo to show up. I I got it centered in here, but you know, my

design system component in my design library file hasn't been updated. Well,

all I have to do to make that happen to keep my design system in Figma in sync with code

is prompt the agent. I can ask, can you update the sponsored badge component in

the offtrail design library to reflect the changes I made here?

And I could do that, but this is the result.

So, what's great about being able to update the Figma design library is that my team members can also benefit from the updates I make in code and potentially they can use it in their

design files as well.

So, let's say I get really deep.

It's It's been a while since this um feature's been launched and we did something for Chad that we thought would be really nice for him. We

created an event detail page just for his brand. Um

his brand. Um but we created this entirely through prompting which means there isn't a Figma design for it.

So, here's this page lists all of Cadence's events that they've sponsored.

Let's say I wanted to make some changes to it or I wanted to have my team take a look at this and and help give me some better ideas or maybe explore entirely

an entirely new way to design this page.

Well, there is this tool here called copy designs. So if I click on that,

copy designs. So if I click on that, I can send the design layers back to the canvas right there.

[applause] So if I made some changes to this, let's say we just got rid of that section there.

If I can see my UI.

You can see that we detect the changes you've made and we can send those back to make to implement them.

[applause] But let's say I'm happy with this as it is.

To get this implemented, I just have to click create PR and that's going to create a pull request to the repository so that my

engineers can review my code and all the details are ready to go and all I have to do is hit create pull request.

[applause] So that's how you use make to ship changes directly to production and I'll hand it back to L to CLOSE US OUT.

[applause] THANK YOU, IRIS. SUPER EXCITING. I love

all the design systems integrations, especially as a non-designer. That way,

I know I'm not messing things up when I'm, you know, ideating.

So, we wanted to share some of our guiding principles in building these solutions. Remember when we talked about

solutions. Remember when we talked about exploration from the opening?

By bringing code closer to design, we now have the access to the same iterative design process that you've been used to for many years by having

multiple solutions on the canvas.

We also know that collaboration is at the heart of design and it's important that every design medium that we build is collaborative.

Instead of waiting to share your work through a pull request, you're actually able to work in the open by easily sharing files or playing together with code on the canvas in real time.

You're also now able to work collaboratively at scale by using design systems that are in sync with the code that you're working on.

And finally, shipping ties it all together. Now within Figma, you have the

together. Now within Figma, you have the tools available to ship your changes.

You can use make directly to push those changes back to production.

And ultimately, we're doing all of this for you so that you can push the envelope and take ideas further than ever before.

If you're interested in trying either of the products that we talked about today, you can follow these QR codes. And as

the owner of this weight list, I will make sure to prioritize you all for attending the talk. So, thank you.

[applause] [applause]