Schema by Figma 2025: Keynote

Heat.

[Music]

[Music]

Hey Heat.

[Music]

Please welcome to the stage Figma's

chief design officer, Laurana Chrysam.

[Music]

Welcome to Schema and thank you so much

for waiting with us while we got

everyone in through the grueling SF

traffic. I'm Laura Donna Krishan,

Figma's chief design officer. And show

of hands, how many of you are new to

schema this year?

Wow, quite a few. And so am I. I joined

Figma a few weeks ago after nearly a

decade leading messaging and AI at Meta

because I believe design is entering its

most empowered stage yet. And we'll get

into that in a moment. But first,

Schema started four years ago with a

simple idea. Bring design systems people

together to share knowledge and expand

the craft. And that very much remains

our goal today.

But the world around us, well, that

definitely has changed.

It's a dizzying time to be a designer.

Every day brings about a new model, a

new buzzword, a new tool, and we're

expected to absorb it all, ship faster,

learn faster, redesign the whole app

before lunch.

And the problem is that the hype often

too often outruns the craft, leaving all

of us wondering, can this really be the

future of design?

And I believe that it can be, but only

if we step in and shape it ourselves.

We're in a moment of immense promise

where with just a few prompts, you could

design and build the app of your dreams.

This is mine. I built this AI outfit

generator in Figma make. It's inspired

by Clueless um in just a few days and I

am no coder. And this is why I joined

Figma because I saw an opportunity and

as a crafts person a responsibility

to elevate design as the most important

step between idea and finished product.

And I joined Figma

because as a company we see AI a bit

differently. Not as an assembly line for

pixels, but as a tool that makes you

creative, that speeds you up without

taking over. A multiplier that puts you

in control. And you could see this in

everything we build from Figma make to

simple things like removing backgrounds

and renaming layers. And so before we

get into the wonderful world of tokens

and variables today, I have an ask.

Designers, don't just adapt to this

moment. Shape it. Push your tools to not

only automate your possibilities, but

expand them. Because when we do, we will

enter design's most empowered stage yet,

where more builders can, yes, ship

faster. That's good, too. But most

importantly, imagine more. Because let's

face it,

there is nothing more human than the

drive to create and nothing more

powerful than the tools we build to

unlock it.

And with that, I would love to welcome

VP of product Paige Costello to the

stage to talk to you about the unsung

hero behind the world's best product

experiences. Yes, the design system.

Paige, come on over.

[Music]

What's up, schema? Hello. Hello.

Welcome. My name is Paige Costello. I'm

responsible for Figma Design and uh

before I joined Sche before I joined

schema and Figma. Uh I was responsible

for scaling design systems at ASA. Uh I

led their core product and their AI. I

also saw the impact of design systems at

intercom and into it. And now I'm

responsible for evolving the very

foundations of design systems

infrastructure here.

What I've learned is simple.

Design systems form the very backbone of

the world's best products. They create

coherence, consistency, and clarity for

the teams who build.

Design systems don't choose between

craft and scale. They build for both. No

matter how many teams, how many

products, how many platforms you're

supporting.

Now, many of you manage hundreds of

libraries across organizations and

products. You're juggling significant

complexity.

We've seen variant sets as large as

17,000 variants

and libraries with 1 million layers. Go

you.

uh you're shipping the components,

you're updating the documentation,

you're doing the bug bashes, you're

designing and redesigning those

contribution models,

you're answering the questions on Slack,

hosting the office hours, and yeah,

pulling some late nights when you need

to.

But in this moment, they're becoming

something more.

Today, design systems form that shared

language between engineering and design

that brings production into focus.

But tomorrow, they're going to power an

entirely new way to create.

With AI,

our workflows are changing. Suddenly, so

many more people can build. And as this

happens, our design systems gain more

leverage and reach more people than ever

before. It changes their role. So when

your system lives in Fig Figma, it's

connected to your repo and it's

interpreted by MCP. It stops being a

static library and it starts to becoming

to become a living system for how your

product looks, feels, and moves.

That's why it's a priority for us to

pull together all the context that

floats across your code, your

documentation, and Figma to make sure

that the context your teams need to

build is at their fingertips and that

they can get so much more from AI.

Our goal is clear. Design systems must

raise quality as more people join the

building frey. The future of design

systems is not about efficiency. It's

about building great products that are

high craft a lot faster.

I want to share three ways we're

evolving design systems to meet this

moment.

First, design systems need to be

adaptable. They need to make they need

to keep up and sprint ahead of the way

your teams explore ideas.

They need codebased context so that

design and engineering can finally move

as one. And they need to be built for

the whole team for everyone shaping

products, the PMs, the researchers,

built right into the tools they're

already using.

Many of the demos you're going to see

today are shipping this week, the rest

this month. Um, but we also heard from

you that a little heads up goes a long

way. So, we're going to be giving you

act insight into what's coming into

early access as well.

What you're going to see here isn't

everything we're working on. Some of

it's not ready for the main stage, but

we want you to see the pace and

direction. We hope you feel it, too.

Let's start with a look under the hood.

Please welcome engineers Naomi Jung and

Edward M to the stage.

Hello schema. How's everyone doing this

morning?

>> I'm I'm Naomi and I'm a software

engineer working on our design editor.

>> And I'm Edward. I'm also an engineer

working on design systems. We are both

so excited to be here today.

So I started at Figma in 2019 and for

the majority of the last six years I've

been working on design systems features

and performance and we've really come a

long way since I first started. In 2019

we had components but we didn't have

varants component properties variables.

Heck we didn't even have auto layout.

It's really been an honor to be behind

the scenes for many of these launches,

and it's been really cool to see how

both Figma and design systems have

evolved over the past few years. I mean,

who here remembers when the instance

swap picker looked like this?

We sure have come a long way.

But as design systems have progressed,

our architecture has often struggled to

keep up. Much of what we built optimized

for the constraints we faced back then,

not for the challenges of today. And

this manifested itself in many different

ways like slow performance, bugs, and

even slower development cycles on our

end. We knew that in order to continue

evolving, we had to address this.

>> And so our team began an initiative that

we called the design systems remodel. a

huge rewrite of some of our core design

systems architecture.

Over the last year, we've rebuilt the

foundations behind components,

variables, and shared assets. And I'm

super proud to be standing here to tell

you a bit about it today.

In practice, our remodel came down to

three core things. First, making the

editor more responsive by implementing

smarter caching logic to improve

performance even in the biggest, most

complex files.

Second, making sure components,

variables, and styles all behave

consistently and share underlying

architecture and code wherever possible.

And third, we wanted to give teams

across the Figma ecosystem a unified

platform to build connected, dynamic

features similar to the ones that power

design systems. It's one of the biggest

refactors in Figma's history, and we're

already starting to see results in how

design systems perform today.

Basic editing into the design editor,

such as this mode switch behind me, is

up to 60% faster.

In prototyping, interactions like this

state switch is up to three times faster

now.

And finally, we've completely reworked

asset publishing so that it takes

seconds instead of minutes with fewer

failed publishes as well.

We hope that you're feeling the

difference when you do your daily work

in Figma, even in massive design systems

files.

But ultimately, this remodel wasn't just

about fixing what was slow. It was about

unlocking what comes next. In fact, the

features we'll be announcing today could

not have been built without this huge

underlying effort. So, with that, let's

get to what you all are waiting for, the

product updates.

First up, let's talk about variables.

We launched variables just over two

years ago, and it was a huge milestone

for design system management. I mean,

can you imagine life without them? I

certainly can't. But we know that

managing large design systems with

complex variable collections across

multibrand design systems has not been

easy. And we've talked to many of you

about these challenges. And I've seen a

lot of workarounds.

Some of you create maxed out collections

with 40 modes leading your modal to look

like this. And this isn't just a pain in

terms of UI. When you want to ba update

a base value in this in these

collections, you'll end up having to

update hundreds or even thousands of

values.

And then your consumption experience

looks like this, which is super

confusing.

So, as many of you may have guessed,

after an extended timeline, today

extended collections is coming to

variables.

So, let's dive into our demo.

All right. So, here I am in my design

file. And today we're working with a

design system for a fictional video

editing company called Astra.

Here we have a few different screens

that show the different products that we

have, which all have different brand

colors. And all of our products support

light and dark mode.

So, scrolling over here to the right, I

have a few frames. And these frames,

there's one for each of the products.

But, as you can see, we currently have

all the products using the Astra video

brand theme. So, let's go ahead and

change that. If I zoom in to Astra Board

here, I've actually already set up an

extended collection for the green theme

colors that we want to use. So, I can

click here

and all I need to do is go over here and

change the collection from Astro video

to Astra board. And it's that simple.

But what's great about this is I can

also independently change the modes. So,

I can change from light to dark mode.

Next, let's go down to Astra Audio. So

for Astra audio, I haven't created an

extended collection for this yet. So

let's go ahead and do that together.

Like me, you might have some muscle

memory of deselecting everything and

then going over to the properties panel

to find the variables entry point. But

today, I want to call your attention to

the new left nav, which is over here.

Here we have a few tools related to

assets and AI, and now they're

accessible with a single click.

So if I open my variables modal, it'll

now open in full screen by default. And

we see here the Astra video brand or

Astra video collection. This is going to

be the collection that we'll base our

extended collections off of. Here we

have a few variables that are specific

to the Astra brand. But then down here

we have several variables that are meant

to be shared across all the brands.

So to go ahead and create my extended

collection, what I'll do is I'll go to

the left panel, right click on Astra

video, the base collection, and then

extend collection.

I'll rename it to Astra audio.

And my extended collection has been

created. What you can see here is all of

the variables, the modes, and their

values have all been inherited from the

base collection.

The last part of my setup will be to add

overrides.

So the audio theme uses the orange

colors. So I'll use some primitives for

my library.

Overrides for extended collections are

going to work similarly to instance

overrides.

Anything that you override will be

retained even if the underlying value

ends up changing. So all of these orange

values will persist when we change the

video brand theme colors.

But all of these other values which do

not have overrides will be inherited. So

if the base collection changes, we'll

automatically get those updates.

So now I can dock this modal and go back

to the canvas and change the color of

this frame from Astra video to Astra

audio.

And again I can independently change the

modes from light to dark.

So now let's look at updating variables

in action. So if I go back to my

variables modal here and I'll zoom out

so that we can see all of the frames.

Let's see what happens when I change one

of the colors such as this color surface

background which is used in all the

frames. Edward, do you have a suggestion

for what we might want to use here?

>> I'm a big fan of aqua.

>> All right, let's try aqua.

Oops. I actually changed the um extended

collection. So that only updated here.

Let me go ahead and change that back to

white or sorry, let me actually extend

this mode a little bit and revert that

override. So it's very easy to revert

overrides as well.

What I meant to do is change this to I

guess aqua. I'll

>> Yeah,

>> I'll choose that for you, Edward. Um,

and there we see that all of the frames

have automatically inherited that update

because I'm changing the base collection

here. Um, I don't think our designer Tom

will love that color. So, let me go

ahead and change it back. And again, it

updates across all the frames.

Meanwhile, I can also change one of the

inherited variable or sorry, one of the

brand colors. So, if I go here, I can

change perhaps this blural 600 to

something a bit darker. And what we see

is that just the Astra video frame is

getting updates, but the other frames

are not getting updates because these

frames have overridden that brand color.

So again, I'll change that back. And

great, that's extended collections in a

nutshell. And we're really excited for

how this will improve the design system

management experience for multibrand

design systems. But I'm excited to say

that for you design system managers out

there, our updates don't stop there. So,

Edward, do you want to tell them about

what else we've got cooking up?

>> Let's do it.

>> Yeah.

>> So, part of the goal of extended

collections was making it so brands like

Astra Board and Astra Audio don't have

to split off from the parent design

system. And this next update also makes

it even easier to stay connected to your

source of truth. So let's dive in.

You can see here I have a few things set

up which we'll go through real quickly.

To the left I have a few components set

up. Here I have a conversation component

with a few chat bubbles. And below it I

have this chat pane component.

To the right I have this Astra video

mock that we were working with in the

last section. And if I click into here

you can see that I've inserted an

instance of the chat pane component.

Now, this chat pane is looking a little

empty. So, one thing I might want to do

is insert some chat bubbles into here.

So, I'll go ahead and make an instance

of that component and drag it in.

>> H I don't really think that's going to

work. Don't you have to detach before

you can insert it?

>> You're right. But I don't think my

designer Tom would like it very much if

I detached.

Luckily, we don't have to because today

we're announcing slots for components.

Slots are configurable regions within

components that can then be freely

edited by consumers of that component.

They're sort of like React children

properties, but for Figma components.

So, let's set one up here and see how it

works. I'm going to go back to my main

component and click into this chat area

frame within it. From there, I'm going

to rightclick

and click this new option, convert to

slot.

Cool. Now that that's a slot, um, I can

add some configuration.

So, you can see there's a name already.

I'll add a description. Uh, add chats

here. And below that, there's also an

interface for me to add preferred

values. Now, preferred values are a way

for component authors to suggest things

that might work well in the slot. For

me, I'll select the conversation

component as a preferred value for this

slot.

I'll close that out and go back to my

mock and click into the instance.

You'll see now that the slot is

highlighted in pink and in the middle

there's this plus button which I'll

click on

which reveals an instance picker that

allows me to easily insert those

preferred values that I set up. So I'll

go ahead and do that.

I can also edit this slot freely. So say

I wanted to add more chat bubbles to

this. It's as easy as clicking in. Uh I

can command D to duplicate. And I can

even, this is my favorite, uh, click on

the slot, drag this magic handle, and

command enter to replace content with

AI.

>> That's super awesome. Does it work with

extended collections, too?

>> That's a good question. Let's give it a

try.

So, I'll zoom out so we can see

everything. And I'll click on this

frame.

And I'll pick, let's say, audio. And you

can see that everything in the slot

respects both the collection and the

mode that we select.

Slots can be a lot more free form as

well. So, to show that off, I'll zoom

out a little bit. go into my new assets

entry point in the leftnav and insert an

instance of this Astra editor template

that my designer Thomas has set up for

me. Now, many of you have used

components like these before. And to use

them, you typically have to detach to

start editing, but Tom has set this up

with a slot. So, I can just take my

content, which is a bunch of frames, and

drag it in.

I can also freely edit it once it's in

here. So, for example, say I wanted to

change around the order of these cards.

I can just click in and do that all

while staying connected to my main

component.

That's it for the demo.

All right. Can we give it up one more

time for the teams behind slots and

extended collections?

>> So at Figma, we've already started using

both extended collections and slots

internally, and we've seen a huge

simplification to our own multi-product

design system.

With extended collections, we've gone

from over 32,000 unique values to just

under 6,000.

And with slots, we are reducing our

component footprint and are excited

about better results from Figma make as

slots map more cleanly to code.

Extended collections is a really

powerful feature and we wanted to make

sure we got all the details right. We

know it took a minute, so we want to

thank you for your patience as we work

through all of these important details.

And now the wait is almost over.

Extended collections will begin rolling

out next month and will be available to

everyone on our enterprise plan.

And for slots, we are now opening early

access signups. Slots will be available

on all plans.

But wait, there's more.

We're also excited to share some quality

of life updates with you.

So, first, we're adding import and

export to variables.

Yeah.

Next, we're also simplifying the

variables authoring experience. You'll

now see all of your subscribe

collections directly in the authoring

modal.

You can now create new variables in

line.

And as Naomi showed off earlier, the

authoring modal will now open full

screen by default.

In addition, the new left navbar is

going to roll out starting next week.

>> Yeah, you can clap. You can clap.

>> And last but not least, we know that for

professional and organizational plans,

four modes just isn't enough for your

design system.

So starting today, professional plans

will now have 10 modes and organization

plans will have 20 modes.

So overall, we are super super stoked

about how your design systems will

evolve with these changes. But creating

a nimble system requires more than just

flexible building blocks. It actually

requires folks to adhere to them. And

that's been enough session for the

person I'd like to call to the stage

next. Please give a really warm welcome

to product manager Tara Nadella.

[Applause]

Hello everyone. I am so so excited to

get to be here with all of you today. As

a PM that gets to sit at the

intersection of design systems and AI, I

get a front row seat to how the way we

build is so rapidly changing with the

pace of innovation. It's something we

most certainly feel here at Figma.

Every designer, every engineer, and

every team is producing more artifacts

and moving faster than ever before. And

that momentum is thrilling for sure. But

when output outpaces understanding,

that's when things can start to fall

apart. When an engineer opens up a file

and they can't tell whether a design

system deviation is intentional or

accidental, they're left guessing and

chasing context.

Although you and I both know that this

perfectly concentric corner radius was

no accident.

Designers, meanwhile, are spending

really precious time tidying up instead

of exploring new ideas, and timelines

slow.

And all of this points to the same

challenge. Speed without direction leads

to divergence. So then the question

becomes, what anchors our work? What

connects our momentum with our

craftsmanship?

And that's why we're introducing Check

Designs, our native design ler right in

Figma, built to help teams move quickly

while staying true to their standards.

And with that, I want to show you where

we're starting.

All right.

So, I'm going to come over here and

let's say I've been exploring this for a

while and I'm feeling pretty good about

where it's landed. But before I go ahead

and share with my partners, I want to

give everything one last check. So,

let's figure out how we can quickly take

all of our maybe magic values that we

lean on when we're trying to just move

quickly and turn those into proper

design system variables. All right,

let's give ourselves a little bit of

space here. Nice. So, the first thing

I'm going to do is select the frame and

I'm going to mark this as ready for dev.

And then I get a little nudge to check

my designs. So, I'm going to go ahead

and click that. And this model pops up

and in just a few seconds it's scanned

my frame and is giving me a few

different places where I can better

align this with my design system.

All right, let's get oriented so we

understand what we're looking at. So

over here on the left, you've got our

handy dandy little navigation panel

where it groups things that have similar

patterns so you can go through the

design in these bite-sized chunks and

edit pretty quickly.

And it also will group repeating

elements together so that you can go one

by one and apply things in detail or you

can go ahead and just select the main

thumbnail in this carousel and apply in

bulk. And over here in my suggestions

view, you can see what I currently have

on the canvas. It's offering some

replacements of tokens from my design

system. And then this preview is going

to update live so that I can see how

everything would look if I went ahead

and applied these suggestions.

All right. And behind the scenes, just

to share how these suggestions are

working, Shuck Designs is powered by a

customtrained ML model tuned to your own

design system data. And it weighs a few

key factors. Things like how similar a

suggested value is to what's currently

on the canvas, how frequently a variable

is used in the file, how recently it was

used, and overall team usage across

files. And the best part is it's going

to get better over time. So the more

your team uses it and adopts this

process, the smarter and more

personalized these suggestions will

become.

All right, so let's go through this. The

first thing it's calling out is that I

may have used my favorite close but

never pure black and it wants me to

switch it to color secondary. Fair

enough, we can do that. And here it

looks like I've got some hardcoded

hard-coded corner radius values of four

and it found an exact match in my design

system.

All right, this all looks good. So, I'm

going to go ahead and apply changes down

here. And it's going to apply all of

these to every instance here.

Nice. Okay. So, now it seems to have

found where this PM may have detached a

text style and it's giving me a quick

replacement. Excellent. Okay. And that

looks fine. Pretty similar. Excellent.

And here it's calling out that I had a

padding of 19 and but I only have 16 and

24 in my design system. So it picked a

closer match of 16. And I'm going to go

ahead and accept this because I really

can't be showing a value that's not

divisible by eight to a room full of

designers.

All right. And now we have a text

contrast one. So let's go ahead and zoom

in on what this is covering on. All

right. So it's looking at this time

badge here. And let's just pull this up

so that we can see them side by side.

All right. So, looks like I may have

used a shade I thought looked cool, but

doesn't actually exist in my design

system. And I can see how it actually

does make this harder to read. All

right. So, it's giving me this color

brand tertiary to replace it with. And

that looks good, but let me go ahead and

click on this. And here I get a flyyou

of all the values in my design system

that have been scoped for this property.

And I can see which ones are accessible,

which ones don't meet that contrast

requirement right at a glance. And now

that I'm looking at it, this color on

brand actually might be better. I like

it. All right, so let's go ahead and

apply these changes. All right, just

like that, we made 44 changes in just a

few moments. And they were pretty

subtle, but it's exciting to see how a

little bit of time here can save us

quite a bit of downstream effort. So to

recap, check designs today helps your

Figma file stay consistent with your

system and saves you from those

repetitive one by one cleanups. And as

we saw, it flags hard-coded values that

can be swapped for design system

variables, things like text styles,

color variables, corner radius, padding,

and spacing.

It also checks for low fill color

contrast. And it's here to surface

issues before they spread. helps

designers stay in the flow and gives

engineers precise production ready

files. At its core, it's about

strengthening the connection between

your design vision and your engineering

implementation. Making sure that what's

imagined in design is what actually

ships.

By bridging that gap, check designs

helps designers articulate and capture

more of their rationale, becoming part

of that really rich context layer that

can enable Figma AI and our MCP server

to generate cleaner, more accurate

results, reducing ambiguity in design

and ensuring that every handoff, whether

to a developer or an AI agent, carries

the intent behind every pixel. And with

that, I'll hand it back to you, Paige.

[Applause]

Thanks, Tara. Thanks, Tara.

Very nice. Okay. What a great way to

make sure that the details ship, but we

don't have to do the dreary TDM, right?

Um, I know that Tara is already thinking

about how this might evolve to include

the more enforce more standards um, even

beyond uh, doing doing even more with

accessibility supporting effects and uh,

style coverage. We want to hear from you

about what you'd like to see. This is

going into early access. So, please sign

up. Please give us your feedback. And

when it does roll out, it'll be going

out to organization and enterprise

plans.

We know a goal for you is better

aligning design and development. Closer.

Closer. Come on. They won't bite. No,

really. This is how we get design intent

all the way into production. And it's

something we've been focused on for

years. Design systems need codebase

context. And Figma needs to pull this in

and understand it. We've been working on

it for a long time. But the specificity

matters more than ever. When AI has

specificity, you get higher quality

outputs. And at the end of the day, that

means quality. And we've been telling

you and you know in your hearts that

design is the differentiator. So you've

really got to make sure that code and

design talk. Okay. So we're going to

show you some stuff that we've changed

for the endto-end workflow for

engineers. I'd love for you to hear from

a pro today on this. Please welcome

developer advocate Jake Albo to the

stage.

>> Thank you. What's up schema?

This is great.

So many friendly faces some I recognize.

Hello everybody watching at home and

around the world. Uh I'm Jake. I'm a

developer advocate here at Figma. And

advocates are practitioners that work to

create value for the people that use our

products. And as a software engineer, I

couldn't be more excited than to be here

today to talk to you about how we see

design systems as a key part of modern

product development AI enabled

workflows.

In my time here over the past four

years, we have been working hard to

ensure that codebased context is

associated with your design systems

inside of Figma. Whether this is through

loosely inferred conventions like named

conventions on variables and components

or more tightly bound context through

features like code connect and variables

code syntax, the impact of those efforts

to stay aligned has never been greater

than in AI enabled engineering

workflows.

And a key part of this alignment is in

ensuring that the very specific code

conventions and patterns that teams have

in the codebase is connected to the

components and variables that you have

inside of Figma. This codebase context

has been huge for improving developer

handoff inside of dev mode, but is also

crucial when we compile potent codebased

context for AI tools.

Now, our position in these AI workflows

is really unique. Authoring code is one

of the most compelling applications of

AI today. LLMs are trained on vast

corpuses of text, which allows them to

write code exceptionally well and in

many different ways.

But teams need these tools to write code

the way they write code. And the only

way these tools can do that is if they

have an awareness of the codebase, which

is how you write code. Agentic coding

tools provide access to code bases,

which enables LLM to write code that's

aligned to the codebase. But this is all

about code that's already been written.

What about new ideas?

Well, we all know that new ideas are

best explored, refined, and defined on

Figma's platform. Figma can provide the

relevant context that AI tools need in

order to author the correct

implementation of those explorations.

The model context protocol or MCP is the

standard that enables the delivery of

this context to those tools. And Figma's

MCP server is how this context can be

accessed by AI tools. Today we have a

dedicated local server provided by the

native app and a remote server which

extends this access to more users as

well as to other MCP clients beyond ids.

Design systems though are a critical

piece in making all of this magic

happen. So let's see how this looks with

a little bit of a demo.

All right. So, here we are with the

latest Astra board design and we see

that designer Tom uh as well as designer

Tara with the help of check designs have

been adopting our system for this new

side panel that we're going to be

implementing today. Now, when we come

down here and click, we can see that the

right variables have been bound to the

gap and padding values. But most

importantly, we can see that the code

form of these variables in the form of

code syntax is surfaced on the canvas.

Now, this ensures that the developers

that are inspecting this and their AI

tools as they consume this context are

seeing the relevant codebase form of

these tokens.

Now, let's talk about components for a

second. And here we can see that we have

a new use case for components that's

been enabled by slots. So something like

a field set component can help us govern

this layout and this auto layout kind of

gap and padding without us having to

detach and put a bunch of instances

inside of that.

Now also in the side panel we can see

that code connect has been published to

these components. Code connect for the

past year and a half now has been the

best way to bring detailed rich codebase

informed representation of this context

into Figma. So we see the react forms of

these fields and this field set right in

line. Now this has been great to see for

developers inside of Figma so they can

make sure that they know which

components are being utilized. But now

this is the sort of context that we can

provide AI tools via MCP.

All right. So I'm going to select this

annotation here to select this parent

panel. And we can see that there's a

component in here that hasn't been

connected to the codebase yet. So we're

going to click connect components. And

this is the new code connect uh library

UI that we just recently released. And

we could see here that this icon button

has not yet been connected out of all of

the other components that are in the

selection. When I connect when I click

on this gear here, we can see that we've

actually authenticated uh GitHub to

access the repository uh that has the

definition of all of our components,

which means that Figma can actually

intelligently suggest the right file and

the right component inside of that file.

So there can be more than one and we can

connect this in just a few clicks

directly from the codebase. Now once

this connection is made, we can come

through to this details view and Figma

is able to intelligently generate

codebase snippets based on that files

context. So we're going to see here that

we have an icon button representation in

React. Now, this is using some of that

code definition, but also is using

Figma's metadata about these properties

to kind of put together this snippet.

Now, I know a lot of teams end up I'm

going to select this text node here. A

lot of teams have very custom specific

shapes of their configuration for their

components and their component APIs. And

so, to bring that context in, we

actually have the ability to paste in

rules. So in this case, I'm going to

indicate to Figma that I want that icon

to not be a slot property, but our team

uses the composed syntax with the

instance as a descendant of the of of

the parent icon button. And we can also

provide instructions about how to be

specific about the ARA label when we're

describing the action.

Now, in addition to this, we can come in

here and click change properties in the

component inspector in the playground

here. And I could switch this over to

primary. And those instructions are

going to be critical in Figma being able

to generate the right representation.

Now, this is really exciting. I'm so

stoked that this is a feature. Now, this

is just an example of how we're making

this easier for teams to bring into

Figma, especially for components like

this. All right. Now, we know that we've

uh connected all of our components here.

We know that our variables are bound and

that this panel that we're going to

implement today is ready for the

codebase. Before we switch over, I'm

going to call out here that we're going

to be running the MCP server locally

using the native app. In this settings

panel, here's the indicator that we've

enabled it. And we also have some

options for how we want to serve images.

Sometimes you're using placeholders

inside of Figma and so you don't really

care about that image data. Sometimes

those are media assets. We have the

ability to kind of indicate to the

server how we want to handle content

like that.

In addition to that, Figma is able to

anticipate roughly how many tokens,

which you can almost think of as a

character count for LLMs, uh, are going

to be required in order to convey this

panel to the AI tools that we're going

to implement this with in a second.

All right. So, before we hit the uh

before we hit the codebase, we're going

to stop in the browser. And we can see

that our Astra board, we've already

developed the left two/irds of this.

Right? Now, this is using real data

behind the scenes. So when we click on

these different shots, content is

updating. So when we implement this

right hand side panel, we want to make

sure that we're actually interacting

with the data model. We don't want to

just represent statically these these

components. Now, how many dark mode fans

do we have out there? Dark mode. All

right, it's a handful. Dozens of us. Um,

okay. So we're going to switch over to

dark mode. Now, this might seem not that

big of a deal to a lot of you, but

actually for engineers,

when you're trying to convert a design

to code, uh, when you're trying to match

hex codes, there's this you have to

switch to the thing that the design's in

and all this, but because we're using

systems because everything's hooked up,

we can actually keep our appearance

preferences on our machine while

simultaneously implementing the light

mode of this. It's really exciting.

Okay,

we're going to switch over to VS Code

here. I'm going to be using GitHub

C-Pilot with VS Code and I've already

preceded a prompt that says implement my

Figma selection in these two files. Be

sure to use my design system. So, we

have the React file right here for the

React code and then a CSS file right

here where we're going to want to see

those tokens showing up for auto layout

and stuff like that. Now, because we're

working with AI tools, I've indicated to

the tool that, hey, I'm going to be

doing a demo schema and we want to show

all of the features of the MCP server.

Now, your developers are going to be the

experts in knowing which combination of

these tools or you can think of them as

endpoints uh based on whatever task

they're doing. The tools that we're

calling out right now and later today in

the deep dive I'm going to get into the

contents of all of these if you're

interested. We have git metadata which

returns a highle skeleton allowing the

agent to understand at a high level

what's going on and then optionally make

further requests to dig in and get more

details. We have get screenshot which

returns image data and we can see that's

that's going to come back as light mode

image data because right now Figma is in

live mode. Then we have code connect map

which returns all of that react context

that we were talking about. Variable

dash returns the variables that are

relevant in the file just the names that

you need to know to make sure you're

using the right ones. Um, in addition to

the text styles that we're using, um,

all of this information is critical

because your engineers can write rules

in the codebase for how to interpret

this stuff and how to implement it

properly. Um, and then last but not

least, there's get design context, which

puts all of that together, including

those annotations. It preserves the

annotation categories. So, if your

product designers want to uh add

additional context for LLMs, they can.

Now, Figma's job has been done for a

while. These checks have been green for

a bit. And we can see that Copilot has

finished implementing this. Before we

actually look at the code, if you've

used these tools before, you will

commonly see them searching the

codebase, wildcard searches, trying to

find the right components, making sure

it's using the right things in the right

way. But because Figma is able to say,

"These are the pieces that are relevant.

Here's where they're located." We don't

see any of that. We are literally

eliminating search steps, alleviating

co-pilot of this need to do all of that

discovery. This increases the

efficiency. It reduces the LLM costs

that we have. Uh and it also ensures

that we can have more confidence in

these outcomes. Okay. So I'm going to go

ahead and hit keep here. And we can see

that the right React components have

been brought in. Uh we also see, you

know, here's our field set. And this is

using real data. We can already indicate

some of that right here. And then in the

CSS, we see that we're using the right

variables with the right syntax and

everything here. All right. Hold your

breath. Oh, would you look at that? So,

I this is so cool. Like this is the

future.

Um, now this is mapped to are, you know,

this is actually modifying our data

model under the hood, right? So, every

time we change these shots, uh, it's

actually updating to the settings that

we have in the database.

Big cheers for all the teams that have

been working hard on this. DevTools,

MCP, Code Connect, we've been working on

this for a while.

All right. So, because we've aligned our

design system between Figma and the

codebase, that's the work we've been

doing forever, right? And because we've

provided codebased context for Figma to

deliver to deliver strategically to

LLMs, we're in a position where our

engineers can deeply benefit. Design

systems don't only increase the quality

of our output, they save us time and

compute, which increases our confidence

in these tools for production UI

generation.

So many partners have eagerly supported

us as we've gone our MCP server to this

point and we're so grateful to have the

opportunity to work so closely with them

as we actively improve our tools

together to future the uh the future to

further the future of product

development. All right, Paige, back to

you.

[Applause]

>> Thank you, Jake.

Sweet. Woo! Code connect, we're changing

it. We're making it better. I'm so

excited that now you've got better

component mapping with those

suggestions. You've also got MCP

instructions and those code snippet

previews to make your code gen higher

quality. These things are just really

going to help improve the precision of

AI so that your teams can pay less for

it and obviously ship a better product.

This is all coming to organization and

professional or organization and

enterprise plans this week. Okay. You

also heard about MCP. We're taking that

out of beta 2. Um we are working on it

quite a bit still. So please give us

your feedback about what you need, what

you like, what you want to see more of.

Okay. So what we just talked about was

bringing that design context into the

places where developers are working and

to that straight into their coding

environments. Uh but what about everyone

else? Design systems could meet so many

more members of your team where they're

already working.

Design systems need to be built for the

whole team woven into the tools they

already use. your PMs, your researchers,

everyone you partner with to shape the

product needs the same context to build

it right?

Earlier this year at Config, we launched

Figma Make. It's a tool that helps you

create a prototype. You just describe

your idea, boom, prototype. You can

maybe persuade someone with it. You can

test it with customers. It was a great

start, but we're not going to start.

We're not gonna stop with a generic

prompt to app experience because good

enough is not good enough. Craft is the

differentiator and you need something

that's professional grade. That's why

we're focused on how your teams actually

design, how they actually build. And

we've been focusing on a few things

since. One of those things is

capitalizing on the multiplayer goodness

and the precision you expect from Figma

design. Now you can copy and make

straight into Figma design, see your

design layers and riff and revise with

your team.

We also are making it so that you can

ship to production. We are connecting

makes now with the MCP server you just

heard about coming to G and also with

dev tools like GitHub.

And of course, we're making sure it

talks to your design systems. you need

higher quality, more predictable outputs

that actually use your design systems

building blocks. So, let's talk about

that. Uh, this is just one of the AI

features that needs to use your design

system. We're excited to share progress

against how makes leverage your design

system. And to do that, I want to

introduce product designer Ethan M to

the stage.

[Applause]

[Music]

Hello schema. I'm Ethan. I'm one of the

product designers here working on design

systems here today at Figma. I'm very,

very excited to be sharing some updates

with you today.

So, we launched when we launched Make a

Config, the number one thing that you

all asked for was the ability to import

your design systems. Our first attempt

focused on bringing visual details from

your libraries such as color,

typography, and spacing. So, generation

started looking like your design system,

but it didn't quite feel like your

product. So, how do we solve that? When

you asked us to bring your design system

into make, we realized you were actually

asking us for several different things.

So, for some teams, it's to bring the

full fidelity and nuance of your Figma

design libraries into Make.

For others, bringing a design system

means directly consuming your production

components to make. And sometimes it's

actually a bit of both. Today, I'm

excited to share some updates. We want

to enable you to bring in your design

systems no matter where they are, either

in Figma design libraries or in code.

So, I want to talk a bit about the first

feature that we're launching, which is

something that we call make kits. Make

kits is a new way for you to export your

libraries in Figma design and convert

them to React components. Let's go ahead

and see the demo.

So here we have a library of an existing

design system and we have a couple of

components such as selectors, buttons,

avatars that are essentially just the

accumulation of this Astro video player.

And so we want to use these components

in make. How do we do that? Here in

quick actions, we see an option to

export a library to Figma make. And so

what this will do is it'll take the

design system and turn it into React

code components and CSS files. So let's

go ahead and export this library, but

because it's going to take a few

minutes. I did it ahead of time. So

let's just jump into make and check it

out.

So, the first thing that you'll notice

is a view we're calling the component

showcase, which is an overview of the

components that we've generated for you.

By default, make will do its best to

preserve the visual fidelity of your

design system as it converts it to code.

So, if you want interactivity to these

components, you can create it by

prompting. As as you can see, I've done

a bunch of manual work here. So, for

example, I can type into this prompt

box. I can have the search component

animate with a typewriter effect or I

can make my video controls interactive,

which I think is pretty cool.

So now let's add in an interaction

together. I'm going to click into this

button component and view all the

imported variants. If I hover over the

button, there's no change to the cursor.

So let's change the cursor

to a pointer on hover.

make will generate that interaction and

I'm just going to pray that the

conference Wi-Fi holds up. And so while

we watch that go, let's talk a little

bit about this new screen. We designed

it with a split view to show both the

component preview as well as the working

code side by side. We've also added a

small tag as a filter. So make knows to

only make changes to this component. So

now that we've prompted the interaction

and it's finished rendering, let's test

our interaction. And it's looking pretty

good.

All right. So, we've run through the

design system and looks pretty good to

me. Let's go ahead and update this and

publish it to the team so it's available

for everybody for my team to use.

So, we're going to let it publish and

it's finished. And now that we've made

the update, let's try it out. So,

remember when we were trying to create

UI for this video player? Let's try

making an interactive prototype for

this. So I'm going to copy this frame,

come into make,

select the make kit that I just

published so that generations will use

the component interactions that we just

made together. Um I'm going to write

recreate

this screen that I attached. Um and what

this should do is it'll turn our example

screen into the interactive prototype

that I want.

We're just going to let make keep going

and going, but

all right. And now it's done.

So make is going to take a few minutes.

So because we have a lot to demo, I'm

just going to jump to an output that I

prompted ahead of time.

And so here we have our final prototype

built with our make kit. Components used

in this generation come with the

interactivity that we saw earlier. So,

for example, typing, "Help me make this

video," adding in an attachment, as well

as submitting a prompt are all

interactions that are that now come with

the input box. I can also extend my

design system components to work with

other elements on the screen. So, if you

remember my video control component,

I've wired it up to work with the

editing tools below.

And that's the demo.

We've now unlocked the ability to not

only use your design systems in make,

but also build on top of it. And it'll

be as easier as ever to accelerate the

way that you build products.

We're still in active development for

make kits. Building design systems is

incredibly complex in nature and we

still have a little bit to iron out. But

today you can sign up if you're

interested in early access and we plan

to open up this feature to some

customers later this year.

So earlier I talked about the fact that

we want to enable you to bring in your

design systems no matter where they are

either in Figma design or from code.

Make kits gives you the ability to bring

in design systems from Figma design. Now

let's take a look at how you can bring

in your design systems from code.

I'm excited to announce that we're also

introducing the ability to directly

import MPM packages into Figma Make.

Yeah, pretty cool.

And so this means that you can bring

your production code right into Figma

make using either public or private MPM

packages. Personally, I'm excited for

the ability to pred to bring in

productionready React components into

make because we I can take advantage of

all the fine-tuning and interactions

that I've already built. The ability to

import public npm packages will be

available on all plans and private npm

imports will be available on Pro Plus.

This will be available starting next

month. All right, back to you, Paige.

Thank you, Ethan. I can't wait to see

what you all make with me. Okay, right

about now, you might be wondering, when

are we going to bring prompting straight

into Figma design? Don't worry, it's

coming. We actually already launched a

limited alpha a couple weeks ago um to

explore how this works and to make sure

that we get it right. And of course, the

biggest burning question is when will it

work with my design systems? We're

working on it. We've got styles and and

components working. Next is variables.

So, please stay tuned. We're doing it.

Okay. Now seems like a great time for a

recap. So, let's play it all back. This

week you're going to get more variable

modes, all those changes to code

connect, the new suggestions, MCP

instructions, the code snippets, and

you're going to get MCP server in G.

Next month, you're going to get extended

collections, variables, import and

export, and all of those authoring

improvements you saw. You'll also get

npm packages, both private and public.

Now, this list might be thrilling and

you might be like, "Hell yeah, I got

everything I wanted." And you might also

be thinking that was there was the am I

getting and so please tell us what you

need. Tell us what you're looking for

because we are all in on the design

systems and we are all ears. Truly, the

team is here. Talk to them, tweet at

them like we are building. This is very

much a focus for us. So, thank you so

much for joining us, for getting excited

about what's shipping this week and next

month and for signing up for what's on

early access because we've got check

design slots and make kits coming to

early access. There are going to be

stations outside where you can sign up

and talk to the people behind these

solutions. Later today, there are going

to be deep dives where you can learn

more about MCP, code connect and

extended collections and slots in the

next level of detail so that you can

really apply them.

Okay,

design systems have always been about

scaling craft.

From the Swiss grid, which changed how

we consume and read information to human

to Apple's human interface guidelines to

frameworks like

um sorry to to frameworks like material

design and bootstrap.

These design systems and every

generation of design systems has changed

how we build our products, elevated them

and really scaled them so that people

can touch every day something that's a

little bit better, something that's a

little bit tighter. But with AI, design

systems are so much more than that. They

are the way we make sure that as more

people build, quality doesn't just hold,

it rises.

Design systems are expanding. Their role

is changing. They are going to be the

context by which your design by which

your whole brand unfolds and is

experienced. And they are the context by

which your team is going to be able to

differentiate and ship better products

faster. This is the future and it's

clear that the future of building is

bright. Thank you so much for being with

us today. We're We're going to take a

quick break and we'll be back at 11.

Thanks folks.

[Music]