Config 2026 Keynote with Dylan Field (CEO & Co-founder, Figma)

It's you. It's you. It's you. Heat. Hey.

Hey. Hey.

Hello.

Hello.

[applause] We grew up in a world that told us the future belonged to those who could code.

Knowing how something should look and feel wasn't enough. You had to [music] know how to build it, too. But now

everything's shifted.

Code is a material as shapable as texture or color.

And ideas no longer have to wait their turn. [music] So now the question isn't

turn. [music] So now the question isn't can it be made. It's what would you make if you could make anything. You'd

probably start by following your curiosity, going wide before going deep.

making and remaking until it feels right.

The point isn't just to make it faster.

It's to take it further together. The

future doesn't [music] just happen. It's

built by design.

Please welcome to the stage Figma [music] CEO and co-founder Dylan Fields.

[cheering] Hello, [cheering] welcome.

Welcome to Config 2026.

[cheering] [applause] I am so so excited to be here with all of you today. And this I don't have to

tell you, but this is an incredibly special group. Truly, we have some of

special group. Truly, we have some of the greatest design and creative minds in the world gathered here today.

[cheering] [applause] And I want to give a special shout out and thank you to everybody who flew in from far away. We are honored you're here. Thank you. [applause]

here. Thank you. [applause]

Also, for those remote, a huge thank you to you as well. Whether you're at a Friends of Figma watch party or you're tuning in remotely, thank you for joining us. We know you're here in

joining us. We know you're here in spirit.

[applause] This is our 10th Config.

and reflecting on how this community has grown, has evolved over the years, uh, honestly just makes me quite emotional.

Uh and it honestly feels like yesterday that we were introducing uh, hyperlinks to the canvas at our first config in

2020.

Things felt simpler back then because today technology is moving faster than ever and as designers we always question things from first

principles. It's how we work and this

principles. It's how we work and this moment of acceleration that's no different.

This is also though, it's also a time of exploration, new workflows, and let's be real, it's a time for some big existential questions

about design, about creativity, about the world.

In in a moment of such change, community is more important than ever.

[applause] So, here's my ask of all of you.

Go outside of your comfort zone today and tomorrow.

If you see someone standing alone, not knowing what to do at Config, just introduce yourself.

If you see someone that you really respect, that you know their work, you're a fan, go say hi. Ask them, "What are you thinking about?"

Don't just catch up with your old friends. Make some new ones as well.

friends. Make some new ones as well.

I like that you started the applause there, whoever did that. Thank you.

Config is a unique place, and it's a unique place for so many reasons, but one of them is because everyone here is

fundamentally kind. This is a community

fundamentally kind. This is a community defined by connection and curiosity and

care. And everyone here viscerally

care. And everyone here viscerally understands appreciates the value and the importance of design.

We're all in this together. And even if you see someone wearing a design is dead hat, like they get it too. Trust me.

A few years back, uh, I said, maybe some of you were there at config that AI will lower the floor and raise the ceiling.

And I think it's been true definitely that AI has lowered the floor.

Uh, not so sure about raising the ceiling yet.

So, how do we raise the ceiling? Uh, I

look out at all of you. You all raise the ceiling.

[applause] And I deeply believe that in the months, the years ahead, there will be an absolute explosion of creativity,

risk-taking, and bold expression.

Much of this creativity will come from all of us assembled here.

[applause] No tool, Figma included, should limit your ability to push your creativity

further and bring your ideas to life.

And here at Figma, we wake up every single day motivated to build the next generation of tools and workflows to

enable all of you to design, to create in a totally unbounded way.

And that brings us to some very exciting product updates [applause] for Config 2026.

We have focused on two things. First,

new materials to express anything you can imagine.

Second, new tools to shape these materials and to push them further than ever. So, what do you say? Let's get

ever. So, what do you say? Let's get

into it. Yeah. [cheering and applause] The first material, the fella.

We got this.

[cheering] The first material that we're going to discuss today is one that you all know very well. Code. One question

that has kept coming up throughout the history of Figma uh and I think across design community is when should you work

in code?

For years, the design industry has endlessly discussed this topic of design versus code. And I will just say it flat

versus code. And I will just say it flat out right now. This is a false debate.

Code is not the opposite of design.

Code is material for design.

For too long, tools have forced a choice and they shouldn't. Figma shouldn't anymore

shouldn't. Figma shouldn't anymore either.

So to share more about what we mean here, I'd like to please welcome Nico to the stage.

Thank you, Dylan. And holy [ __ ] Hello, Config.

[cheering] I'm so excited to be here. When I was in university in Germany, shout out to Say it with me.

No, just kidding. Just kidding. You

don't have to.

I studied interaction design and code was one of my favorite materials.

Like I had this one solo project that I really really fell in love with. I was

trying to visualize the gradients of sunrises and sunset. I stayed up multiple nights in a row writing thousands of lines of code to get these effects working.

code was wonderful to go deep into a rabbit hole with me.

Fast forward a few years. Who here

remembers this UI?

Let's go. Let's go. This was Figma when I joined as an intern eight years ago.

And a couple weeks after, Dylan took me for a walk out here in Yabuina actually and asked me to join full-time.

I called some old colleagues and they were like, design tool in the browser like and then on Reddit it said like oh that's like a

car with three steering wheels and so I was like I don't know but I actually already was sold because I had experienced a shift instead of working

alone I got to jam with amazing designers like Noah Brady Peter and show so so many side by side designing with vectors and graphics has

moved away from being done in isolation and became this beautiful collaborative activity.

I believe that we will be experiencing the same shift with code and it is a wonderful material but while

agents have made it so much easier to write thousands of lines of code the workflows around code are not built for exploring together at all.

We're working in silos. Each one of us is like hundreds of prompts deep with our own agents. And then like at some point we look up and we kind of like throw prototype recordings at each other

hoping that they'll inspire us only to realize that we're not working together anymore.

At Figma, we know that there's a better way to design and build, one in which we can work side by side in whatever

material we choose, including code. So, let's take a look at

including code. So, let's take a look at what we've been working on.

So, over here, you're probably familiar with an editor like this, right? Like,

you have a prompt box, you have a preview, and you can go pretty deep.

It's it's amazing. I've lost hours in this, but you need more space to explore and to compare to get the bad ideas out so you can find the great ones. So,

we're very very very excited to announce that code now lives on the Figma canvas.

[cheering] [applause] Meet meet code layers. They bring the full power of code to the space you already love and it's incredibly easy to

interact with them. just zoom in as I'm in right here and like I could just drag around or over here I can like interact see a couple different weathers. Yeah,

of course Miami is nice and welcome to San Francisco. It was foggy this

San Francisco. It was foggy this morning. So don't forget to bring your

morning. So don't forget to bring your layers.

See see yeah there I get it. There I get it. Um and it's incredibly easy to

it. Um and it's incredibly easy to create code layers. Uh so here's I have a design file right a design layer right and what I can do is I can just click here and I can click this button and I

can say build this with code that's one way the other way is if you zoom down here you see there's a new button in the toolbar right it's the code tool and

it's going to create a code layer for you and just like that you can start prompting and it's easy but we know that many of you have existing code bases as

well like prototype typing playgrounds.

And if we zoom over here, select this layer, we can very excited to announce that we will allow you to import repositories

from GitHub or upload local folders directly onto the Figma canvas.

[cheering] [applause] I'm so excited about that one.

I am so excited. Anyway, anyway, but like how do you know that if you have something working that it's that it's good, right? You need to be able to

good, right? You need to be able to easily compare, see things side by side.

We've made that easy, too. So, over here have a couple different explorations.

And like if I wanted to to play them all, you can select one and hit play.

Select the next one. No, just kidding.

You can select them all and hit enter.

And instantly, you have multiple separate code bases running right in front of you. Let's interact with a couple of them. So over here we got this nice little little glitchy effect. Oh, I

like the 3D cube.

Drag some cards around.

I think my favorite actually is this S-curve. Actually, I'm curious now like

S-curve. Actually, I'm curious now like how how how did this S-curve was created? So when I go in here and I open

created? So when I go in here and I open this, the cool thing now is that because it's in the Figma canvas, the chat is shared. So for example, I can see oh

shared. So for example, I can see oh Pete was asking what's changed yesterday and oh yeah nice G explained this scurve to me. This is cool. So I can I can just

to me. This is cool. So I can I can just catch up too and I can understand how my colleagues use code and agents to create.

But I want to make a riff now. Okay,

let's go back here. Let me show you how you create a branch with code layers.

You just hold down the option key and drag the layer. That's it.

This is an interaction.

This is an interaction you all have done millions of times. And so now let's make the change. The thing I want to do here

the change. The thing I want to do here is actually let me just click here.

Yeah. What should I say now? When a card is in the center, make the background color fit to the focus card. Thank you.

I like talking today agents because it's just like it's like it's just so simple.

Um it'll it'll it'll it'll probably get it.

Okay. But last though while code layers while code layers can be so beautifully deep. We as humans think spatially right

deep. We as humans think spatially right we need to see things side by side. We

need to see the whole flow at a glance to make the right decisions about what our users should experience. So let's

take a look at how we can explode this layer.

So here I'm going to zoom in and turn the UI on again. And what we've done here is we've built this feature extract design and then I can click on record flow.

And now as I'm interacting with this I can just click over here go to the profile page and let's go to the events and let's click on biking. Oh there's no

events found. That's a good state. Let

events found. That's a good state. Let

me work on those. And when I click stop, we will extract all of the states and give you a bird's eye view.

[cheering] [applause] And so seeing this overview makes it easy for others to understand and help.

Oh, hi. [laughter] As if we planned this. Hi Tammy and Peter. [snorts]

this. Hi Tammy and Peter. [snorts]

What's up? Okay. Yeah. You want to help me make some riffs? Let's go. Okay.

Okay, I'm going to actually like work down here on this one because the cool thing is like it's just it's just design. It's just a design layer. So,

design. It's just a design layer. So,

what I can do now is like go to assets, click on created in this library. I kind

of like want to fix this empty state up.

So, let me drag in this one here. Let me

uh option H and V to align this. But I

don't know, I don't love this because it's a little sad like if there's no events, there should be happier that like I can find events, right? So, let

me change this to what did I say? I

think it was like, oh yeah, find events and let's change the smile. Turn the

smile frown upside down. [laughter]

But this is was was what what I created.

Let me see. Damn. Of course they created better things than me.

But okay, I'll select this one over here and I'll select this one. I like these updates. And so the cool thing is, as

updates. And so the cool thing is, as you can see down here, when we've broken something out from code to static design, we can now click update code layers. And what this is going to do is

layers. And what this is going to do is it's going to analyze what has changed.

So our coding agent has the least amount of work to do. And since code layers are connected to GitHub, you can push those updates back. And

once those updates in are in your repository, you can pull those updates from wherever you are.

Let me see. Damn, lots of people in here.

Nice. Okay. Because

code is now an intuitive material for you all to work with. We cannot wait to see what you'll create.

Personally, I I do really hope that you'll make a mess.

like a beautiful mess because because this right here really is what enables collaborative creativity. This feeling

collaborative creativity. This feeling that got me so excited about Figma in the first place.

And one more thing, these people here and many, many more behind the scenes have worked hard to make this a reality.

So, please give them a big round of applause. [applause and cheering]

applause. [applause and cheering] [applause] Every code layer you've seen is powered by make which we've been hard at work at improving as well. Just in

the last few months we have shipped plan mode, voicetoext, web search, npm packages and so much more. And just

recently, we shipped a massive update enabling you to locally on your machine work directly on your production codebase.

With this and code layers, we will allow you to go from exploration all the way to implementation.

Code layers are launching in a closed beta. You can sign up for the wait list

beta. You can sign up for the wait list and will start onboarding users in July.

It'll be available on full seat on all plans. Full seat users on all plans.

plans. Full seat users on all plans.

Exploring code spatially isn't the only workflow that is coming to the canvas today. to tell you about the next one. I

today. to tell you about the next one. I

am incredibly excited to introduce Itai Chef. Thank you so much.

Chef. Thank you so much.

[music] [applause] Hello, Config. [cheering]

Hello, Config. [cheering] Wow.

I'm one of the co-founders of Weii, now Figma Weave. We've joined We've joined

Figma Weave. We've joined We've joined Figma last fall, so it's my first time at Config.

I'm so excited. Before Weave, I've spent 25 years in post-prouction. First as a VFX artist and then as a creative director. I became obviously obsessed

director. I became obviously obsessed with AI the moment that it could generate my face.

Well, I was generating like crazy and I kept running into the same problem. You

know it. Making something interesting was easy. Making something usable for

was easy. Making something usable for real projects was hard. That's because

creative work isn't about single prompting. It needs references,

prompting. It needs references, iterations, consistency, feedback. And

that's why we build Weave, a platform where professionals can build their own creative workflows, their own tools.

And now it's becoming integrated into the Figma platform. [cheering]

[applause] Let me show you.

So this is uh what creative workflows usually look like. Wait uh who here worked with nodebased interfaces before?

Raise a hand. Whoa, quite a few. That's

nice. Okay. Um, for those of you who didn't, um, nodes in Weave can either hold information like images, videos, 3D

models, or perform an action through AI models, uh, but also through more manual controls like color grading, timelines, etc. Let's dive into some examples. This

simple use case uh is for generating 360 product videos. We start with uh back

product videos. We start with uh back and front images of our product. We go

through a sequence to provide consistency and we get a smooth 360 video. The interesting part I think

360 video. The interesting part I think about it is that once you build a workflow like this, you can run it once across all your product and get consistent results.

Let's look at some another one of my favorites. It's a it's a fast rendering

favorites. It's a it's a fast rendering engine, right? Um sometimes you want to

engine, right? Um sometimes you want to examine concepts without going through the laborious shading and rendering processes. So you add your loi animation

processes. So you add your loi animation here, maybe your logo mark animation and the style reference. This is the style

reference and quickly you get a stylized render. Same animation, new style.

render. Same animation, new style.

[applause] And if you change the style reference over here and run the flow, you'll get a

newly stylized render. Right? So you can iterate on ideas really, really fast.

Let's look at uh one last workflow.

Imagine a scenario where you get product photos from different vendors. You know

it, different lighting, different quality. It's a mess. Normally, you'd

quality. It's a mess. Normally, you'd

make them black and white and try not to think about it, right? But with weave, you can build a workflow, something that looks about like this. Uh,

you can build a workflow for style transfer that analyzes each product and applies the same visual language. This

is the outcome. Look at this. The hat,

the shoes, the shirt, they now look like they belong together, right? Finally.

And if you change your reference image, you'll get the same set but rendered with a different style, obviously.

And I have great news.

Today, we're bringing these weave workflows as tools to the Figma canvas.

[applause] Yes. Yes.

Okay. Let's see how it looks. Um, so in this is the exact style transfer workflow we just saw. Let's go to the tools and select the bulk trans style

transfer. We click on the images we want

transfer. We click on the images we want to input into the style transfer. We

select the style we want to use and we click generate up.

Shift a K. Okay, let's just put this in place while they render.

uh we can examine other workflows or maybe let me tell you that we took the most popular weave workflows and exposed the inputs and the outputs only. Right? So

the same workflow runs in the background. You don't have to worry

background. You don't have to worry about the noodles anymore. [snorts] You

can use them right here on the tools list. Oh, this got updated. We can see

list. Oh, this got updated. We can see we have our cohesive bunch uh rendered.

Let's go quickly over some other tools we have. This is the sticker pack. It's

we have. This is the sticker pack. It's

here.

You just upload my image. You select

kawaii render and generate and you'll get my stickers. This will work only with my image. Don't try it with your own. All right [applause]

own. All right [applause] guys, some other tools. We have the replace background which performs amazingly. You just uh upload an image,

amazingly. You just uh upload an image, select whatever you want for the background, it renders it immediately.

The texturize, one of my favorites.

Anything you upload, write whatever texture you want implemented to it and you get it. Um, add logo to product. You

have your logo, you can get it rendered on a product. Simple tools to do simple tasks or generate mockups uh from whatever design asset you have.

But the best workflows obviously are the one you build yourself. tailored exactly

to your team's unique creative vision.

For me, this is the most exciting. You

aren't limited to just the tools we ship. Soon, you'll be able to package

ship. Soon, you'll be able to package your own creative workflows as tools and share them with your team right here in the tools panel.

To help you get started, all config attendees will see some extra weave credits when you sign up. Uh, now some of you may have noticed, yes, it is fun.

Some of you may have noticed other tools in the list beside weaves. That's

interesting. To tell you more about them, please welcome Georgia and Rajie.

[cheering] [music] Hello, Config.

Let's make some noise. [cheering]

Yeah.

[applause] It's super cool being on stage with this queen today. This is Georgia Rust. No,

queen today. This is Georgia Rust. No,

not the Rust programming language, but equally as badass. She's a product leader at Figma and an amazing friend.

But this king next to me literally is a king. This is Rajie King. He is an

king. This is Rajie King. He is an incredible designer and one of my favorite people to build with.

Georgia, let's not leave these folks on a cliffhanger too long and let's show them what other tools are in this panel.

Let's do it. If I come over to this tools panel, you'll see some of those new tools that it was talking about.

You'll see weave tools here and you'll see a few other tools in here like plugins. It has been so amazing to see

plugins. It has been so amazing to see the plugins that our community has made over the years. But sometimes it can be hard to find the plugin that you need in the moment when you need it. I just wish

it was a little bit easier for me to build the plugin that I need right now.

So starting today, you can generate plugins with the Figma agent. Now we all have our own unique workflows and we wanted to make it possible for anyone to

build the tool they need in the moment.

No coding required. All right, friends, let's hop on board the Agent Express.

First destination, plug-in town.

So George and I are working on an audio app design. Georgia, what are you up to?

app design. Georgia, what are you up to?

Yeah, so I've been working on this design and you can see I have some cool rectangles here that I've been drawing, but I really want them to have that organic look and feel. Right now,

they're just a little bit flat. So, I'm

going to ask the agent to create a plugin to randomize the height of all frame content so it looks like a real audio waveform. And I'm on stage at

audio waveform. And I'm on stage at config, so I don't want it to ask me any questions. I just want it to send it and

questions. I just want it to send it and see what it makes.

I'll send the agent off on its journey.

And while I do that, I want to tell you a little bit about these plugins.

Generative plugins are a little bit different than the plugins that you know and love. They don't require the desktop

and love. They don't require the desktop app. You don't have to write a single

app. You don't have to write a single line of code, and they can be made with just a few prompts. And they live in your file in the properties panel that you can see here.

You can discover, use, and share these plugins directly in the file. No

publishing required. Some of you see some of the ones you see here were built by me, but some of them were built by my friends. A lot of us have our favorite

friends. A lot of us have our favorite plugins that really help us with our day-to-day productivity. And generative

day-to-day productivity. And generative plugins are perfect to build for your specific workflows. Let's see an

specific workflows. Let's see an example.

My friend Miggy, who maybe some of you know, shout out.

He is an amazing designer and a lover of all things layouts. and he's building dozens of bentos every day for his specific style. To recreate it, he

specific style. To recreate it, he normally has to make a bunch of manual adjustments, tweaking grids, colors, spacing, and making sure he's adding the right content. So, to do this over and

right content. So, to do this over and over again, he built a new plugin. Migy

built this Bento grid builder plugin so that if he selects these layers, he can instantly generate a bento that looks just like the Miggy look and feel.

Thank you. Shout out Mickey.

He can randomize the layout, reshuffle the images until he gets something that he's happy with. Plugins can also be built for your personal needs for your brand, your workflows, or the data sets

that you're using day and day.

Our friends at Athletics Agency built a plugin for their client Alba Racing to create real looking real looking uh racetracks all around the world. If

you're a big F1 fan, this one's for you.

Okay, they created this plugin using real data that charts out racetracks around the world. I can update the racetrack. Let's

world. I can update the racetrack. Let's

go to Monaco.

Change some of the controls. Maybe I

don't want to have those turns on there.

And I can adjust the aesthetic to be a bit more of the vibe that I'm looking for. Again, this is all built with real

for. Again, this is all built with real data under the hood. So those visuals are staying true to the actual layouts.

And when this project is handed off, the plugin will go with it. Their client

gets not only the design file, but the tools they use to build it. Let's check

in on our agent. It looks like it has something for us. If I'm going to go grab my waveform and open my new plugin, let's see what it made. It made me this

little waveform random randomizer. Let's

just send it and see what it does.

Okay, smash that button.

I love that. It's a little bit bigger than I'd like. So, maybe I'll try this on another layer and adjust the height a bit. Let's do 50 50. I'll send it one

bit. Let's do 50 50. I'll send it one more time. All right, that's looking way

more time. All right, that's looking way better than what I could do on my own.

And now I don't have to go and update all of those rectangles by myself.

There's something here that I love, but I feel like I could take it a little bit further now that I have my first draft.

So, if I wanted to, I could edit this plugin and go back to the agent and continue to rev. Let's say I wanted to do something like maybe have a real song that powers this so I could update this

to take a real MP3 and make this even more lifelike.

A lot of us have ideas like this that we would love to have, but we talk ourselves out of building the plugins because it just feels like too much work. Building generative plugins makes

work. Building generative plugins makes it possible for you all to say yes to building the tools that you wish existed in Figma. That random idea that's

in Figma. That random idea that's specific to only your workflow, you can build it. That workflow that might help

build it. That workflow that might help your co-worker spend five le minutes less doing something in their week, just build it. Or that idea that sounds too

build it. Or that idea that sounds too silly to actually create, just try it out. See what happens. I want to show

out. See what happens. I want to show you one more that's one of my favorites.

I work with this woman, Lauren, who is an incredible engineer. She's somewhere

here in the audience today, and she is an engineer on our team, but is also obsessed with her nail design. So, for

config, she built a nail design plugin that can generate different nails in the config aesthetic. Let's check it out.

config aesthetic. Let's check it out.

I can update the style of the nails in this tool. Oo, I like that spiral. But I

this tool. Oo, I like that spiral. But I

think I want more of like a oval shape.

I like that. And yeah, I can't do long.

So, let's just generate the medium size.

All right.

I can play around with this. Maybe take

it to my artist and get something amazing that's on brand for config.

The other thing is if I want to understand how Lauren built this plugin, I can go back into the agent chat and find the conversation she had to learn how she built this tool. I can get an

understanding of how she got to the control she wanted and I could take it from here to either make it my own.

The best part about these is that you can build these with any idea that you have on the top of your head. It can be something unique to you or it can be something that helps out a friend.

Uh, this is so rad. It's actually one of the coolest ones I've seen, but I get so jazzed when I see my friends making cool stuff with this.

I love it, too. And we have had a wild ride building together the last few months. We have had so much fun building

months. We have had so much fun building generative plugins. It's been amazing to

generative plugins. It's been amazing to see what our team has done with this.

But we didn't want to stop here.

Yeah. Uh, we've been building something else. Um, something that I've wanted in

else. Um, something that I've wanted in Figma for ages, y'all. I can't even Oh, yeah. Give it

y'all. I can't even Oh, yeah. Give it

up. [laughter]

Yeah. Oh, yeah.

I can't even tell you all how long Rajie has been talking about this. I swear I have been hearing it for months.

Uh years.

Okay. I'm sorry. Years.

I actually clocked it at about 4 and a half years. Uh and we finally get to

half years. Uh and we finally get to talk about it today.

Does anybody know what it is?

Nobody. Perfect. Okay, friends. The next

stop on our little journey is shader time. Yeah.

shader time. Yeah.

Starting today, shaders are in Figma.

Now, if you've never heard the word shader before, don't freak out.

Well, you've definitely seen them.

Like, this might seem like a simple gradient, but guess how it's made?

Shaders.

Progressive blur. That's a shader. Our

glass effect shaders. I think you're getting the picture here. They're wildly

powerful at bending pixels to your will, if you know how to wield them. And

shaders have existed in Figma, living in the shadows of our core canvas rendering. Are the shaders in the room

rendering. Are the shaders in the room with us?

The catch is that they've been kind of difficult to make.

Yeah, like geek out on math for four years difficult. I would know. If only

years difficult. I would know. If only

there was a way to make them yourself.

Starting today, you can create your own shaders with the Figma agent.

[applause] All right, let's go. Okay, this is an image. Um, all right. So, I had this

image. Um, all right. So, I had this idea for um like an effect that I want to put on this image in this composition, but I don't really know the

words to describe it, but I kind of know what it looks like. I've seen pictures of it on the internet. So, I'm going to go ahead and go to my agent, click plus, and I'm going to add images and files,

and I'm going to grab this here. Um,

whoop, not that one. Um, this one here.

This is kind of the style I'm hoping for. So, I'm going to add this into the

for. So, I'm going to add this into the agent. And I think agents are pretty

agent. And I think agents are pretty good at picking up on these kinds of things. All right. And now I'm going to

things. All right. And now I'm going to prompt live on stage. So, wish me well.

All right. So, I'm gonna say, oh, yep.

create me a I just want a static effect that looks like the effect in this image. I know you love it when I talk

image. I know you love it when I talk out loud like this. It's so cool. Um I'm

a bit I'm a bit busy right now.

Yeah. Um so don't ask me any questions.

Be nice agents, guys.

All right. Our UI will ask you questions and I've actually found it to be amazing. like it'll it'll ask you and

amazing. like it'll it'll ask you and teach you things about shaders and so I love it but you know for now for now.

All right so we're gonna kick this off.

We'll come back to it. All right so let's talk about the two different kinds of shaders. Um there's shader fills and

of shaders. Um there's shader fills and fills are uh like the material. They're

the actual source coloring and things like that. And just think of fills in

like that. And just think of fills in the same way that you think of fills in Figma. Solid colors, gradients, images,

Figma. Solid colors, gradients, images, stuff like that. That's a shader fill.

Now they're shaders, so a little bit different. So we're going to come into

different. So we're going to come into this fill panel here. And I've already added one. This water costic by Ellie

added one. This water costic by Ellie Lynn.

Now if I open it up, we're going to see that we have a bunch of different handles to play with. And I do love to slide a slider. So what I'm going to do is just slide away. And I can see uh

different phases of this. Not only that, you may have noticed this little thing in the middle. And that's our new onvas handles. So I can move it around. So you

handles. So I can move it around. So you

can directly manipulate and play with this stuff. We're designers. We want to

this stuff. We're designers. We want to touch it. So what I'm going to do is I'm

touch it. So what I'm going to do is I'm going to bring up the scale a little bit. That was a little that was a little

bit. That was a little that was a little much, you know, and I want to do this.

Maybe bring the intensity down. Yeah, a

little moody here. And of course, it's a fill. So I can add every designer's

fill. So I can add every designer's favorite blend mode plus lighter. There

we go. And onto the next. Now, this may look like just in an image to you, but I'm I'm guessing you're smart and you know it's a shader. Um, now this is a mesh gradient. So when I open this,

mesh gradient. So when I open this, you'll see all of these color points.

These are also another kind of on canvas handle. And so if I move this around,

handle. And so if I move this around, it's using 3D math and geometry to create this thing that is not just your grandma shader. It's pretty cool. So,

grandma shader. It's pretty cool. So,

what I love about this is uh when I worked on the draw team, we used to get a lot of requests for uh mesh gradients and we wanted to build it, but we just kept pushing it out. We're like, we got to get to it. We got to get to it. What

I love about this workstream is that we're building the tools to help you make whatever you want and have your own tools. All right, let's talk about

tools. All right, let's talk about effects. Now, effects sit on top of the

effects. Now, effects sit on top of the materials and they pull the colors out of it and they transform them. They can

bend them, shape them, morph them. And

I'll give you an example of this. Let's

say I'm working on this carousel. I've

already added a shader effect here on top of these real Figma layers. This isn't an image. And

Figma layers. This isn't an image. And

you'll notice as I play with the sliders, I can actually warp this. And

you can actually ask agent to do whatever you want. So I can change the perspective. I can also change handle

perspective. I can also change handle slide this over and over. And I ju I could do this all day. All right, moving

on. Let's move on to the next one. Let's

on. Let's move on to the next one. Let's

say I've got this hero card and I'm using a lens distortion shader effect.

Now, what's cool about this is it kind of creates that sci-fi feel. I'm like in a bubble looking through glass. Um, and

maybe I just want to take it and really amp it. And then I want to take

amp it. And then I want to take aberration because I will aberrate the world. And so, oh, woo. All right. But

world. And so, oh, woo. All right. But

you may have noticed that this is a video layer. So, let's click play. And

video layer. So, let's click play. And

I'm going to open this effect again. And

as an on canvas handle and as Oh, no. This is better. Look at

this.

Pretty pretty rad. All right. Now,

Georgia is heading to Shader City and this is her boarding pass. Wait, but

Rajie, can I have a first class?

Oh. Oh, yeah. I mean, it's easy. It's a

real Figma layer. So, but first of all, no middle seats. Got to go window. Hey.

Um, all right. So, you'll notice this inconspicuous effect here that you would have no idea what it's doing, but when I open it, it's called page curl. And you

can see and actually Oh, yeah. But let's just spin it.

Oh, yeah. But let's just spin it.

But not only that, you can bake in the kinds of things where ask agent to do what you want. So what if I did texture bleed and I could see the back side of it.

All right. Wait, I think I'm going back to my agent and let's see. All right, we get it.

So Oh, all right. It's asking me for it's already I've already got it. So

let's find it. All right.

I think it's looking for another one.

So, we'll see if we can just add another one here and we'll apply it.

All right. And so, we've got a new effect here. This one's a little bit

effect here. This one's a little bit different, but it's great. Now, the cool thing about this, you know, one routing is a little bit difficult. Sometimes you

don't have the right words. And you can always click this here, go back and edit, and just create this edit loop and keep updating your shaders and your shader effects. Now, I've got one last

shader effects. Now, I've got one last one for you before we're done.

Uh we've got uh a bunch of different effects on this brand asset and we can see here that they're stacked and so I'm going to turn off one of them and we've got this one called gooey merge and I

know how much designers love this. We

can take these characters and we can blend them together and gooey merge them. So we'll do a little bit here. But

them. So we'll do a little bit here. But

also we've thrown another lens distortion on there because apparently I'm addicted to that. And then one last one here. Notice uh effects can be

one here. Notice uh effects can be restackable. So if I put the gooey merge

restackable. So if I put the gooey merge on top, it's actually gooey merging the uh the lens distortion effect. And so

effects are stackable and you can create incredible different combinations just by reordering. Now let's turn on this

by reordering. Now let's turn on this other one. Interactive particles. I

other one. Interactive particles. I

wonder what this is.

So this is tracking your mouse interactions. And it's incredible. I

interactions. And it's incredible. I

love it so very much. And if your mind do love it [applause] well, if your mind is melted, you're not alone. This is just scratching the

alone. This is just scratching the surface.

The best shaders are going to be the ones that you dream up on your own. And

apparently, I've loved shaders for years.

I can't wait to see what you all do with what we built for you and how far you're going to push it and how you're going to inspire us with your own creative genius and ideas. So whether you've been shader

and ideas. So whether you've been shader maxing like Rajie for years or this is the first day you heard the word shaders, you can now build the visual effects and fills you've always wanted

in Figma.

[applause] And rolling out today, you can now build plugins and shader effects and shader fills with the agent. They're available

on full seats and all paid plans. the

interactive shaders like the one that I was like that was fun. Um, those are coming soon. So, we're going to take the

coming soon. So, we're going to take the time to get the performance right on those.

Also coming soon, we'll have publishing to your org and the Figma community.

And we've made a handful of these for you to try out and they're going to be available in that tools panel.

But the most powerful experiences, they aren't just seen, they're felt, they move people. That's what drew us to the

move people. That's what drew us to the team at Modify, a brilliant group of folks who have a deep creative passion and technical ambition. To share what

they've been up to since joining Figma, please help us welcome Piers and Dave.

Hey, Config. I'm Pierers.

And I'm Dave.

We are really excited to be here.

It is exciting. And when not one but two British people tell you they're excited, it means it's really rather exciting.

It is.

Today, we get to show you something that we've been working on since we joined Figma from Modify a year ago.

At Modify, we were a small group of creatives and engineers coming from backgrounds like visual design, music and sound, and real-time graphics. And

we believe that the future of creative tools could look different.

A collaborative but highly visual canvas capable of a whole new level of expression, one that didn't quite exist anywhere else.

We were obsessed with putting the fun back into design tools real time and in the browser. And that belief drove

the browser. And that belief drove everything we built.

It's been a while since we joined Figma and we've seen a few people on X wondering what's been happening. I think

we owe them an update.

I mean, it's about time.

Oh, wait. It actually is about time. I

mean quite literally. As we were easing our way into our first few months, we were trying to figure out what the key

framing of our focus at Figma should be.

But then we realized the canvas needed a new dimension.

Today we're introducing Figma Motion.

[cheering] [applause] Over [applause] the past year, we've worked with an incredible set of people to build motion

directly into Figma. The timeline is a new design primitive. Key frames,

presets, and much more are right at your fingertips, and they flow right through design systems. Let's jump into a demo.

Thank you.

Right, here we are in Figma design and all I have to do to get into motion mode is come down here, toggle,

and when I hit space, our design spring into life.

[cheering] [applause] Each animation you're seeing here has been made with Figma Motion and it's

available to you in beta today.

[cheering] From key frames and easing controls to styles, variables, and components. All

the stuff you already love about Figma now has motion.

Let me show you how easy it is to add animation.

All I have to do is click the object I want to animate. Hit shift and K to activate auto key.

Drag my object.

Oh, after I've set my timeline, drag my object.

I can put a little bit of rotation, perhaps a little bit of scale.

And then just put this back. When I hit play, it plays.

[applause] You're gonna find some really familiar controls on the canvas.

And I can even adjust easing controls as the object is playing.

And this is really important because animation is one of those things that you really have to feel your way through. The timing, the sequencing, the

through. The timing, the sequencing, the finessing. Being able to duplicate and

finessing. Being able to duplicate and iterate and compare visually right on the canvas really makes all the difference.

We spent a lot of time getting things like snapping, zooming, panning, drag to multi select, and transform, all behaving exactly as

you would expect.

But we know that building up animations laboriously on the timeline can get kind of tedious sometimes. So here you can also lean on agent to help.

I can just drag Whoops. [laughter]

Let's say I'm working on animations for these three designs. I can just drag to select all of the designs at the same time. Jump into agent and say something

time. Jump into agent and say something like fade in all images. Uh slide and fade in text

concurrently. Nice. Try and spell that

concurrently. Nice. Try and spell that in front of 10,000 people. And then uh

fade out again to create a perfect loop.

and just kick that off. I ran this same oneshot earlier, so I'll just pan over to the results that we got and take a look.

Nice. That's already looking good.

[applause] Okay, but something about it isn't quite right. The transition out animation is a bit slow, especially in comparison to the transition in. But

that's okay because everything that the agent generates for me is completely editable. So I can jump into the

editable. So I can jump into the timeline.

[laughter] Yeah, jump into the timeline.

Uh drag to select my key frames. Just

adjust that timing and then take a look at my animation.

Nice. That's looking a lot snappier.

As you first as you were watching a minute ago, agent can also help you build plugins and these are also fully compatible with Figma motion. One of the things I find myself doing all the time

is dragging objects on the timeline to adjust uh timing to bring things in one at a time. When you bring everything in at once, it just looks really boring.

But this is really tedious, you know, trying to line all of the blocks up. So,

I prompted a tool to help me with this.

Let's take a look.

So, I can open the timeline key frame stagger plugin.

Hit uh shift command A to select all of my objects and then I'll just choose a couple of options and click apply stagger.

And just like that, all of my objects are coming in one at a time.

[applause] I can flip the the order maybe to have things come in from the other direction.

But if I want to get really fancy, I can also drag to create a shape with a bezier curve and then apply that to the objects on the timeline. So now I have everything coming in following a nice

curve. I honestly couldn't kind of

curve. I honestly couldn't kind of believe it when I first got this working. I think it took maybe four or

working. I think it took maybe four or five prompts to get this tool there. Uh

so hype that it worked. You can create whatever you need to automate processes that you find yourself doing frequently.

And once a tool is created, those workflows become fast and repeatable.

So, we've seen how to build motion from scratch and how agents can help along the way. But what if I wanted my design

the way. But what if I wanted my design to really, you know, stand out?

We're building 3D transforms in Figma.

[cheering] [applause] X, Y, and Zed properties can all be animated.

Our awesome vectors team, the same team that bought you Figma Draw last year, are hard at work at this. This is just a preview, but it was far too cool not to

share with you. This is so much fun to play with. Look at these controls.

play with. Look at these controls.

So much fun.

[applause] Okay, what you've seen so far today is pretty powerful by itself,

but what makes this really cool is what's underpinning it. That's the rest of Figma's platform. because you know it really does make it feel like a new way

of working.

Let me show you.

This is a file from our team.

You can see that there's already some comments here on the canvas and of course they now appear on the timeline too.

There's also components with animation and these are nested inside this frame here. It looks like we've got a couple

here. It looks like we've got a couple of collaborators here. I can see Tom.

Well, yeah. Good, Tom. And as edits are made in those components, they filter through into the scene in real time.

Now, let's see what happens if we spotlight Miggy.

I now see Miggy's position on the timeline, which is invaluable if he's trying to walk me through his motion.

Thank you. Yeah,

[applause] this level of real time creative control, collaboration, and flexibility hasn't existed in motion design before.

Another really exciting thing about building all of these capabilities on top of the rest of Figma is what it means for the combination of motion and effects. Earlier we showed you shader

effects. Earlier we showed you shader effects which hugely expand the expressive range of Figma. Every effect

and fill provides a set of properties that you can tweak and all of those can also be animated. So let's take a look at creating a design which combines

motion and shaders. Here I have a design which animates these three objects. I'm

quite happy with the motion, but I want to kind of elevate it a bit. So, I'm

going to jump in and just turn on the outlines effect here.

As soon as I turn that on, it's applied in real time on top of the animation in my canvas and dynamically respects the motion of the objects underneath. So,

this is the same shader effects you saw earlier, but applied on top of animated content.

[applause] There are properties that I can tweak which I can do while it's playing. But

let's say that I want to animate one of those properties. I'll go back to the

those properties. I'll go back to the beginning of the timeline and let's just update uh spacing. I'll set an initial value. Then I'll jump to the middle of

value. Then I'll jump to the middle of the timeline. Set a time a value for the

the timeline. Set a time a value for the middle. And then I'll actually copy and

middle. And then I'll actually copy and paste that key frame from the start to the end just to create a perfect loop.

And just like that, the spacing is animated. And you can even see the

animated. And you can even see the slider moving in real time as the animation plays.

[applause] You haven't we haven't got to the really cool bit yet.

Yeah.

All right.

As Rody was showing you earlier, it's by stacking and combining effects that you can create really next level results.

So, let's take a look at a couple of designs that take things a bit further.

This animation makes use of path trimming and Figma draw textured brush stroke brush strokes to create this type animation. It looks pretty great

animation. It looks pretty great already, but again, let's try and turn it up a bit. So, I'll go into this container and just turn on a couple of effects.

The noise displacement effect first gives it a bit of wobble. Makes it feel a bit more organic. And then if I turn on this chromatic aberration effect, we'll get some nice color bleed at the

start and end of the timeline.

So just by turning on those two effects, I've really elevated this design and given it a whole new feel. What do you think?

That is dope.

It is dope. It is dope. I agree. All

right. Now, let's take a look at something a bit more product designoriented for this goal. reach screen. We want to reinforce the feeling of really having

unlocked this reward. So, we've combined motion and shaders to make it feel really compelling. If I scrub the

really compelling. If I scrub the timeline slowly, you'll be able to get an idea of what's going on. The effect

can actually distort parts of the design or while Figma Motion is animating other parts of the design. And this is not a video. If I jump in and make changes to

video. If I jump in and make changes to the text, for example, then everything just updates in real time as it's playing.

[applause] Each of these takes a base design that is built with Figma motion and combines effects on top which are also animated with motion to create expressive and

differentiated results. I've honestly

differentiated results. I've honestly been losing days just playing with this combination of features. It is genuinely hard to believe I'm in Figma sometimes and often the results that I end up with after spending a lot of time getting

deep into exploration are really different from what I first had in mind.

Now you're probably wondering how do we get this motion into production?

When you're ready to build, switch to dev mode. extract that code directly or

dev mode. extract that code directly or send it via the Figma MCP to your LLM or of course Figma make.

Here's Oh yeah, [applause] here's a design guide site that we've been able to create with some of the tools you've seen here today and the

Figma MCP. And just to be clear, the

Figma MCP. And just to be clear, the animations here have been shipped in code.

[applause] But if shipping to code isn't quite your cup of tea, you can export as MP4, webm, animated SVG or GIF.

[cheering] Got to love those GIFs.

[applause] And we're already working on delivering more formats and export types.

All right, so Motion is rolling out today in beta on all plans and full seats. We

seats. We obligatory phrase, we cannot wait to see what you do with it. And before the end, we wanted to show you what's possible

and uh just give you all a little bit of inspiration. So, we uh gave our

inspiration. So, we uh gave our incredibly talented brand team the combination of shaders and Figma motion and they used them to animate the entire launch film. What you're seeing on

launch film. What you're seeing on screen at the moment is kind of the behind the scenes like the, you know, inside the Figma file. And we kind of couldn't believe it when we started looking inside this file and seeing what

they' created. It's so cool to uh start

they' created. It's so cool to uh start to see these features being used in practice.

Making motion a reality has brought together a huge number of people from many different parts of Figma. And we

are so proud not only to be able to share all of this with you today, but also to see what our internal teams have been able to start doing with it. Next

up, you'll see the finished film. Before

Dylan comes back to the stage, we would love for you to watch it. Thank you.

Thank you.

Happy.

[music] [music] [music] [music] Hey.

Heat. Heat. N.

Heat.

[music] Heat.

[music] Wow, that was awesome.

Motion designers are just so talented.

Uh, I have always had the deepest respect for motion designers. They are

able to create things that others cannot even articulate or explain, let alone replicate. And so many of us have always

replicate. And so many of us have always wanted to be able to also make that kind of magic, yet it's felt out of reach.

I've been amazed as we've developed Figma Motion, how intuitive it feels and also how it feels intuitive despite how

powerful it is. So, I really hope that Figma Motion can inspire all of you and I cannot wait to see what all of you

make with Figma Motion.

[applause] So, throughout all the demos, uh, you may have noticed once or twice Figma agent at work.

Yesterday it rolled out to everyone and it's evolving really fast. The Figma

agent also supports attachments and uh connectors as well as attachments. Now

connectors let you pull in context from all sorts of other tools and we've launched them with notion, Slack, Granola, Hex, GitHub, and Atlassian. So

now you can pull data from all those surfaces right into your designs.

Custom skills are also now a part of the agent. And yes, I am so excited about

agent. And yes, I am so excited about skills.

Honestly, uh I think we could have done an entire keynote just on skills.

With skills, you can turn the prompts that you keep coming back on back to into reusable slash commands.

And whether that's checking for compliance or creating a synthetic user test or capturing a workflow that you're doing all the time and you want to automate for your team, this is such a

booster and we've been using them all over Figma in our process. I'm really

excited for you all to try them out.

But of course, we're not going to stop there. Uh, what if the Figma agent

there. Uh, what if the Figma agent wasn't just for Figma design?

What if it could translate your codebase into structured diagrams? That'd be

cool. Distill loose ideas uh into prioritization and next steps, timelines even. Or turn customer briefs into

even. Or turn customer briefs into onbrand pitch decks or more. So yes, coming soon we will

or more. So yes, coming soon we will have the Fig Jam agent and the slide agent. Uh and I'm really really excited

agent. Uh and I'm really really excited to share more about this with you at a later date.

[applause] All right, today we introduced new materials and new tools to the Figma canvas.

To recap, Figma Motion, generative plugins, shaders, and weave tools are now in open beta. Go try them out. Check

them out. Give us all the feedback in the world. None of these updates will

the world. None of these updates will consume AI credits while in beta.

Coming soon, code layers, the Fig Jam agent, the slides agent. These are all coming soon in closed beta. So, if

you're wanting to be first in line to try these out, uh, go sign up for early access. Figma.com/configas

access. Figma.com/configas

with an S.

Just give you all a second.

All right, you got it.

There's so so much more to all the launches. Uh we could have gone

launches. Uh we could have gone endlessly deep on each one of them and so I hope you'll have a chance to talk more of the team. Stop by the product

studio. Uh it's right outside that way

studio. Uh it's right outside that way to talk with the Figmates who built these features. They would love to chat

these features. They would love to chat with y'all and get your thoughts, your feedback, your reactions. It's what we live for is user feedback. but also

check out the deep dives if you have something that you're really interested in checking out and learning more about and you can go deeper on everything we've covered. We've got a bunch of them

we've covered. We've got a bunch of them in the agenda.

Everything you saw today, code, motion, your own tools, your own materials, it all lives together in the canvas. For

the first time, it's in one place.

All of these materials, they compose together and that allows you to riff and to play at the speed at which you think.

[applause] So now the canvas is more than where your work lives. It's also where it all connects. Like I said earlier, AI it can

connects. Like I said earlier, AI it can lower the floor. It's up to all of you to raise the ceiling. And our goal is to give you all the power you need to push

that ceiling right to the stratosphere.

[cheering and applause] So go make something that only you can make.

And please join me also in thanking all the Figmates who made today's launches possible. And also config possible.

possible. And also config possible.

[applause] I have so much gratitude for our amazing team and yes, we're hiring.

We also have so so so much incredible programming to come over the next today and tomorrow. Uh really look forward to

and tomorrow. Uh really look forward to meeting many of you and I can't wait to hear what you think of all the talks.

Uh, one last thing.

I talked about how this is our 10th config.

We're excited to go on the road later this year for our 11th config.

So, if you want to join us on October 15th, come to Bangalore, India.

All right y'all, that's a wrap. Thank

you again and happy config.

[applause]