Config 2024: How we redesigned Figma (KC Oh, Ryhan Hassan, & Joel Miller, Figma)

Summary

Figma's design team introduces UI3, a significant evolution focusing on a more focused canvas and streamlined interface. They emphasize clarity, minimizing UI to prioritize user ideas, and AI-powered actions to automate routine tasks. UI3 also enhances the properties panel for better usability and introduces a design mode in Figma Slides for a seamless transition between design and presentation. The team reflects on the balance between innovation and honoring user muscle memory, aiming to provide the best editing experience for designers.

Takeaways

• 😀 Figma has maintained a consistent layout since its launch a decade ago, prioritizing user muscle memory by keeping new features in familiar places.
• 🚀 The UI3 update aims to simplify the interface and bring focus to the user's work, streamlining the experience for future functionalities.
• 🔍 An emphasis on clarity has been made in the new update, with improved affordances and labels in the properties panel for better usability.
• 📐 The properties panel has been reorganized to prioritize components and their properties, addressing the complexity that comes with rich design systems.
• 🛠️ Usability improvements have been integrated across the system, including enhancements to auto layout, templates, and other frequently used features.
• 💡 The future design tool by Figma will focus more on the user's ideas rather than the UI, with tools and controls that can be minimized for a full-screen experience.
• 🤖 AI-powered actions are introduced to automate mundane tasks, such as layer naming and prototype wiring, allowing users to concentrate on their creative ideas.
• 📑 The introduction of Figma Slides as part of the 'family of apps' allows for a consistent layout and design mode toggle, enhancing the presentation capabilities.
• 🔄 A significant reorganization of the information architecture was necessary to ensure the canvas remains the primary focus, with tools and controls repositioned for better workflow.
• 🔄 The 'minimize UI' feature was explored extensively, aiming to condense properties and bring them contextually next to the cursor, but stability and predictability were prioritized for the final release.
• 🔄 The redesign process involved numerous iterations and prototypes, emphasizing the need for stability and the gradual adjustment to new workflows and muscle memory.

Q & A

What is the main focus of the UI3 update for Figma?

The main focus of the UI3 update for Figma is to bring more focus to the user's work, organize the interface for the future, and ensure usability improvements that enhance the design workflow.

How has Figma maintained a consistent layout over the years?

Figma has maintained a consistent layout by keeping things in the same place as much as possible, even as new features like components, Auto layout, Dev mode, and variables were added, to avoid breaking users' muscle memory.

What is the significance of the 'minimize UI' feature in the new Figma update?

The 'minimize UI' feature in the new Figma update allows the interface to get out of the way, providing an immersive experience in the canvas and making it possible to further minimize the UI so users can focus on their ideas rather than the tool's interface.

What are the usability improvements made to the properties panel in UI3?

Usability improvements to the properties panel in UI3 include more transparent affordances, softer corner radius, the ability to see labels above controls, and a more stable panel design with persistent panel headers for better navigation.

How does the new layout panel in UI3 aim to improve the design process?

The new layout panel in UI3 merges dimensions with auto layout, provides a toggle button to switch between layout and auto layout modes, and groups position-related properties together to build stronger connections and make the design process more intuitive and responsive.

What is the 'design mode' in Figma Slides, and how does it work?

The 'design mode' in Figma Slides is a special toggle that brings in the familiar layer list and properties from the design tool, allowing designers to fine-tune their slides with the same level of control and precision as in Figma's design tool.

Why did the Figma team decide to keep the sidebars visible by default in UI3?

The Figma team decided to keep the sidebars visible by default in UI3 to prioritize stability and make the interface predictable for users, while still allowing the option to minimize the UI for a more immersive canvas experience.

What challenges did the Figma team face when redesigning the properties panel for UI3?

The Figma team faced challenges such as condensing the height of the panel, maintaining a balance between new design elements and existing muscle memory, and ensuring that the redesign would be impactful while still being stable and intuitive for users.

How did the Figma team approach the iterative process of designing UI3?

The Figma team approached the iterative process of designing UI3 by exploring hundreds of prototypes, testing them within the design team for real-world use, and adjusting the design based on feedback and the need for stability and predictability.

What is the importance of feedback in the development of UI3?

Feedback is crucial in the development of UI3 as it helps the Figma team shape and influence the product, ensuring that the redesign meets the needs and expectations of the user community and that it provides an undeniably great editing experience for designers.

How can users get access to the UI3 beta and provide feedback?

Users can sign up for the UI3 beta by logging into their Figma account and clicking the relevant button. The Figma team encourages users to reach out with feedback, both in person at the conference and online, to help refine the UI3 experience.

Outlines

00:00

🚀 Figma UI3: Evolution and Focus on Design

The script introduces the Figma design team and sets the stage for a sneak peek into UI3, the next major evolution of Figma's user interface. The team reflects on Figma's consistent layout since its launch a decade ago and the challenges of maintaining simplicity as new features are added. The focus is on the importance of reevaluating and streamlining the interface to enhance user experience and workflow. The presentation promises insights into the design principles, iterations, and innovations in the properties panel and the introduction of AI-powered actions to automate routine tasks, highlighting the goal of creating a more immersive and organized workspace.

05:01

🛠️ Refining the Properties Panel and UI Minimization

This paragraph delves into the redesign of Figma's properties panel, aiming to enhance clarity and usability. The team discusses the evolution of design work, emphasizing the complexity of components and the need for a more prominent display of properties. They introduce usability improvements and a new feature called 'minimize UI,' which condenses the interface to allow for an expanded canvas. The challenges of positioning contextual actions and file controls are addressed, with solutions that include moving file and project names to the left sidebar and tools to the bottom, creating a more intuitive and less obstructive layout.

10:01

🔍 Deep Dive into UI3's Layout and Component Panel Innovations

The speaker, Joel, elaborates on the extensive changes made to the properties panel in UI3, focusing on improving clarity, component panels, and layout properties. The team's efforts to simplify the interface, resize the panel for better visibility, and address truncation issues are highlighted. The removal of the collapse feature due to user feedback and the decision to keep top-level component properties visible by default are discussed. Additionally, the paragraph covers the reorganization of layout properties to strengthen the connection between dimensions, auto layout, and resizing, aiming to provide a more intuitive and responsive design experience.

15:02

🌐 Balancing Structure and Creativity in UI3 Design

Casey, the product manager, reflects on the challenges of designing UI3, emphasizing the need to balance the structured aspects of design systems with the free-form creativity that Figma supports. The paragraph discusses the importance of maintaining a balance between honoring muscle memory from past design tools and embracing new technologies like AI. The team's approach to feedback, design explorations, and the iterative process of finding the right balance in the interface is highlighted, showcasing the complexity of building a product that meets the high expectations of its user base.

20:02

🤝 Embracing Feedback and the Journey of UI3 Development

The final paragraph wraps up the presentation by emphasizing the importance of feedback in shaping UI3. The team's commitment to rolling out the new interface as a beta to gather user insights is announced, with an invitation for users to sign up for early access. The paragraph reflects on the iterative and sometimes messy process of redesigning Figma, the challenges faced, and the team's dedication to creating an undeniably great editing experience for designers. The call to action for users to engage with the team at the conference or online to share thoughts on the redesign concludes the script on a collaborative and forward-looking note.

Keywords

💡UI3

UI3 refers to the third iteration of the user interface for the design tool Figma. It is a central theme of the video, representing the evolution of the platform to better serve designers by focusing on usability and immersion. The script discusses the redesign principles and changes implemented in UI3, such as minimizing the UI to reduce distractions and enhancing the properties panel for clarity and ease of use.

💡Figma

Figma is a cloud-based design tool used for creating user interfaces and design systems. In the context of the video, it is the platform undergoing a significant redesign with UI3. The script mentions Figma's history, its evolution over the years, and the introduction of new features like components and auto layout, which have contributed to its complexity and the need for the UI3 redesign.

💡Auto Layout

Auto Layout is a feature within Figma that allows designers to create responsive designs by defining constraints that determine how elements within a layout behave relative to each other and their container. The script discusses the usability improvements made to Auto Layout in UI3, such as moving controls closer to dimension properties to strengthen the connection between resizing and dimension properties.

💡Components

In the context of Figma, components are reusable design elements that help create consistent and coordinated design systems. The script highlights the importance of components in modern design practices and how UI3 prioritizes them in the properties panel to give prominence to the properties that designers have spent time creating.

💡Property Panel

The property panel in Figma is where designers can edit and adjust the attributes of selected elements. The script discusses significant changes made to the property panel in UI3 to improve clarity, such as adding transparent affordances, softening corner radii, and introducing the ability to see labels above controls for better navigation.

💡Usability Improvements

Usability improvements refer to the enhancements made to the design tool to make it more user-friendly and efficient. The script details various usability improvements in UI3, including changes to the property panel, auto layout, and the introduction of AI-powered actions to automate routine tasks, allowing designers to focus more on their creative ideas.

💡AI-Powered Actions

AI-powered actions are intelligent features within Figma that use artificial intelligence to automate repetitive tasks. The script mentions these actions as a new set of features in UI3 that can help with tasks like naming layers, filling in sample content, and wiring up prototypes, thus freeing up designers to concentrate on their core ideas.

💡Minimize UI

Minimize UI is a feature in UI3 that allows designers to condense the interface, bringing it contextually next to the cursor and further minimizing the UI to focus on the work itself. The script describes the exploration of this feature, the challenges faced in positioning, and the decision to provide a stable and predictable experience by default.

💡Design Mode

Design mode is a special toggle in Figma's new Slides feature that turns on the familiar layer list and properties from the design tool, allowing designers to fine-tune their work without disturbing others. The script introduces this as a 'superpower' that adds a new dimension to Figma Slides, enhancing the editing experience for designers.

💡Information Architecture

Information architecture in the context of UI3 refers to the organization of the design tool's interface elements to prioritize the canvas and defer to the user's work. The script discusses the challenges of organizing information architecture, such as handling controls at the top of the view and moving contextual actions into the property panel for a more coherent system.

💡Iterative Design Process

The iterative design process is a cycle of refining and improving a design through multiple stages of feedback and testing. The script reflects on the iterative nature of the UI3 project, including the exploration of hundreds of prototypes, testing with real builds, and the importance of giving the team space to figure out the best solutions for the redesign.

Highlights

Figma has maintained a consistent layout over the years to preserve user muscle memory.

The evolution of Figma's UI3 aims to focus on user work and organize the interface for the future.

Figma's UI3 introduces usability improvements and a more focused canvas.

AI-powered actions in Figma UI3 automate tasks like naming layers and wiring prototypes.

Figma Slides is introduced as part of a family of apps designed to work together.

Figma Slides includes a design mode for a more familiar and powerful experience.

UI3 organizes information architecture to defer to the canvas and improve workflow.

The properties panel in UI3 has been redesigned for clarity and usability.

Component panels in UI3 prioritize components and allow for resizing to avoid truncation.

Layout properties in UI3 have been reorganized for better understanding and connection.

Figma's redesign process involved exploring various prototypes and heuristics for stability.

The 'minimize UI' feature in UI3 aims to get the interface out of the way while remaining stable and predictable.

Figma's property panel changes represent a significant departure from the current design, prioritizing usability.

The redesign process required balancing the structured and freeform aspects of Figma's tool.

Feedback from beta testers has been crucial in shaping Figma's UI3.

Figma's team emphasizes the importance of trying the hard thing and embracing challenges in the redesign process.

The rollout of UI3 will be gradual, allowing users to adjust and providing an opportunity for further feedback.

Figma's team will be available for further discussion and feedback on the redesign at the conference.

Transcripts

[Music]

hi everyone thank you so much for coming

I'm Ryan from the figma design team I'm

Joel product designer on the design team

hi Casey product manager here figma and

today we're so excited to give you a

behindth scenes look at

ui3 before we get started though I want

to go a little bit back in

time figma launched almost a decade ago

now and we've kept a remarkably

consistent layout over the years doesn't

that look pretty familiar this isn't by

accident even as we've added lots of

functionality this was before components

Auto layout Dev mode variables and so

much more we've tried to keep things in

the same place as much as possible to

avoid breaking your muscle

memory but as we look to the future if

we only keep adding new features what

once felt really simple will gradually

start to feel more complex and

intimidating we think it's really

important to carve out time every so

often to take a step back and really

prioritize what's most important in the

interface that's why we can't wait for

you to try the next major step in figma

evolution really bringing Focus to your

work and organizing the interface for

the

future today would love to share some

some of the insights and principles that

shaped this work the iterations we went

through to create a more focused canvas

a much closer look at our properties

panel and finally some Reflections and

learnings from this

project so first some

principles when we look back at the last

10 years the way we design has actually

really evolved we're no longer just

drawing simple rectangles with colors

but working with powerful Concepts like

components that have Rich properties

built right in we want to highlight

these right at the top so that the

properties you and your team have spent

time creating get the prominence they

deserve we've baked in a wide range of

usability improvements like these across

the system from working with auto layout

to getting started with templates to

really improve workflows we all go

through hundreds of times a

day second we believe the design tool of

the future will place a lot more focus

on your ideas rather than our

UI all the tools and controls you expect

will still be there but we're making it

possible to further minimize our UI so

you can really stretch out and make use

of your entire

screen this works really well with a

powerful new set of actions we're

introducing powered by AI that can help

automate grunt work like naming layers

filling in Sample content or even wiring

up your prototype so you can really

focus on your

idea finally as we to introduce slides

we want to make sure we're building a

family of apps that are designed to work

together this means you can take your

mocks and interactive prototypes from

figma design and easily create a

beautiful deck using a very familiar

consistent

layout of course we've included all the

tools you need to create a great deck

but for designers we've included a

special new toggle that turns on design

mode this feels like a superpower that

adds a whole new dimension to figma

slides this instantly brings in your

familiar layer list and properties from

the design tool so you can really dial

things in just the way you want without

disturbing anyone you're working

with this combination of core usability

improvements based on how we all work

today a really deep sense of focus and

immersion in the canvas and

interoperability with new products

really add up to the best editing

experience we've ever shipped for

designers and we think we set an

exciting foundation for the years to

come

one really challenging aspect of this

project was organizing our information

architecture so that we can really defer

to the

canvas one problem we immediately had

was figuring out how to handle controls

that lived at the top of the view like

our file actions and contextual actions

we actually had this problem in our old

design where because we had limited

space we could only show one of these at

a time which meant that sometimes

controls you were looking for could be

hidden While others were far away from

where your next step might

be we found it really helpful to move

these contextual actions into the

property panel where they live alongside

all the other actions you can take on a

given object we really like how this

works as a system because it gives your

eye one place to look to be able to find

all the things you can do to a given

object similarly we moved file and

project name into the left sidebar this

allows us to have persistent controls

and creates a nice linear hierarchy

where you can always understand what

file you're looking at where it lives

and what's

inside finally we moved our tools to the

bottom of the view because our eyes read

from top to bottom this allows your eyes

to really focus on the work that can now

go to the very top edge of the

screen we've also given it a lighter

fill so it Blends in more with the

canvas rather than taking up the full

width of the view we've made use of this

floating style that allows us to to

Really cinch things in and only occupy

the space we need so you have more

working space back on the

canvas of course there were so many

ideas we cut along the way throughout

the process as a team we often found

ourselves trying to do the hard thing

first starting from a point of view and

working backwards this really helped us

understand constraints and make sure

we're pushing the product forward in a

responsible

way one of those was with a feature

we're calling minimize

UI from the very beginning of this

project we we had this vision of getting

the editor to be as close as possible to

being just your

work but we imagined a future where

properties could be condensed and

brought contextually next to your cursor

where it would be even closer to where

you were

working but one challenge was figuring

out the specifics around positioning we

we wanted to position this as close as

possible to your cursor without covering

the thing you're were trying to select

we explored lots of iterations of

heuristics here but this really lacks

stability and as played with it we felt

like it made it difficult to anticipate

where your controls would appear

next we explored hundreds of different

prototypes from control styles to heris

and we actually built many of these and

used them ourselves in real builds

within the design team for our

day-to-day work we've tested these for

months but we found ourselves really

craving stability by

default and so in the version we're

shipping today when you go into a new

file you'll see both sidebars by default

with all the controls you

expect when you want to focus you can

click this icon to minimize our UI or

use a shortcut and you'll feel really

immersed in the

canvas and then when you select

something and go to edit it will show

you the full height sidebar with

properties and get it out of the way the

minute you no longer need

it we think this strikes the right

balance where it helps achieve our goals

of really allowing the interface to get

out of the way while still remaining

Rock Solid and predictable for for Tool

you use every single

day this project goes way deeper than

what first meets the eye one of the most

complex parts of our product is our

property panel and to tell you more

about it here's

Joel thanks

Ryan hi everyone how are you all feeling

good

awesome so we've made a lot of changes

to our properties panel and today I'm

going to talk you through the usability

improvements that we've made focusing in

these three areas so let's get started

with

Clarity so over time we've heard a lot

about figma's UI feeling pretty unclear

when it comes to affordances if you look

at the panel it's pretty hard to

distinguish an input from a drop down to

a button and a lot of the controls that

we have in the panel are really unique

to figma so if you're not familiar with

the iconography it can feel pretty

intimidating and

unapproachable and just to add to the

confusion when you're working with

Styles we do things like hide the panel

headers so it can be pretty difficult to

T these controls apart if you're not

looking closely well in ui3 we've made a

lot of improvements to try and add more

clarity to the properties

panel so we've moved away from the

minimal treatment of the past and added

much much more transparent affordances

and we' softened the corner radius so

that it just feels a bit more modern and

approachable and to help figma feel more

accessible we've added add a new ability

to see labels above controls and this is

a view setting that you can turn on or

off via the settings menu in the top

right it just makes the panel a lot

easier to navigate especially when

learning the new uh

IIA and we've also made the panel feel

much more stable by default so when

you're working with Styles you'll now

see the panel headers it's a small

change but it's nice

Improvement so next up are some changes

that we've made to component panels as

Ryan mentioned earlier the way that

we've worked is now evolved you know

we're really working with components

instead of rectangles and these

components have become really really

complex over the years because we've

added more capabilities to design system

features but if you look at the panel

it's not really optimized for this all

that complexity in fact we often run

into issues where the labels trink uh

trink quite

often so in ui3 we've reprioritized it

so that components are at the Forefront

and now you'll see them at the top of

the panel with the component name and

component actions and perhaps the best

feature or my favorite feature is that

you can now resize the panel so that you

don't no longer have that truncation

issue and you can see more of the

component labels and the component

description now components can get

pretty complex and sometimes you can

have so many properties that it takes up

the whole height of the panel and one

thing that we explored was trying to

collapse these so that you could still

access other controls below so you

wouldn't have to scroll so often when we

tried this out in the customer beta we

found that actually it didn't really

work very well so we got a lot of

feedback saying it was kind of

frustrating to use it was a little bit

annoying and so we just backtracked it

and we've made sure that all the top

level component properties are visible

by by default so that even if you have

to scroll you can still see them

all so the final improvements I want to

focus on today are some changes that

we've made to use uh layout properties

now being a designer on the editor team

layout is something that I think about a

lot and one of the first projects that I

worked on at figma was some changes to

Auto layout so hands up who remember

remembers a layout when it looked like

this okay quite a few people nice well

one thing that we found with this

feature was that uh the resizing UI was

quite confusing and we made this change

to move these controls to be dropdowns

placing them much closer to Dimension

properties and our theory was that by

moving these closer to two Dimension

properties you would get a better

understanding of how it relates to

resizing uh sorry how dimensions and

resizing relate to each other and one

thing that kind of bugged me over the

years is that we've never really solved

this problem of making a stronger

connection between the dimension

properties at the top and aluto layout

panel below they're all kind of far

apart from each other and if you look

closer at the properties panel you

actually notice this in other areas

too so if you're working with text

layers you might have noticed that width

and height are disabled and the reason

for that is because there's this tiny

control in the text panel that's really

far down that actually controls these

inputs that are much higher up so if you

don't know that you can have a pretty

hard time trying to do layout with text

layers and actually an even harder time

with text Styles because it's even more

hidden but wait there's also

more so did you know that alignment

position and constraint are all related

in fact you might not know but if you

change the Align of the layer it also

updates the constraints but we don't

really do much to show that all these

properties are connected so with the3

we've made some improvements to try and

build stronger connections and make this

much easier to

understand and we started off by

exploring the concept of a layout panel

so this had all the layout properties

merged together in one big panel and we

explored different variations of this

with different uh layouts and different

controls some moving far away from what

we have today and some much closer

and within this we also knew that we had

to try and condense some height as well

because this panel's pretty big so one

of the explorations that we tried was

this idea of an alignment grid pop out

control so when you click on a button it

would open up underneath your cursor and

then it would reposition itself and it

looked really cool in a prototype but

when you build it and actually test it

you realize that it's a little bit

unpredictable and just Hawking back to

that point that Ryan made before we kind

of want to predict uh prioritize

stability by default

so we shifted away from this and instead

just grouped all of the controls that

are related together in separate panels

focused on position and layout now this

is a pretty controversial change because

it's a big departure from what we have

today and it breaks with muscle memory

so it's going to be a bit of adjustment

and we were kind of worried about this

change but we realized that we have to

try the hard thing it's really necessary

to do this if we're actually going to

make impactful usability changes so let

me walk through those changes that we've

made so first of all we've grouped all

the position related properties together

so we've moved alignment controls we've

uh placed those to both X and Y and

we've added new rotation controls so

it's a lot easier to flip or rotate a

layer and we've moved constraints as

well into uh closer proximity with X and

Y so it really helps you to understand

how all these controls are

related we've also created a new layout

panel which merges Dimensions with auto

layout so you'll see that there's

actually no more separate Auto layout

section instead there is now a toggle

button which transforms the layout panel

into the auto layout panel and doing

this allows us to have the added

advantage of merging dimensions and

resize modes together so now you

understand exactly how those relate with

auto

layout and it gives you more of a

responsive mindset and actually more

closely aligns to how things are built

in

code now one thing we tried when we uh

tested this out out in the customer basa

uh we got some feedback on this and we

found that we were actually missing some

really core designer workflows you now

being designers they want to be Pixel

Perfect and they actually like to te to

check the pixel values even if something

set to fill or hug so learning this

helps us to make even further

improvements so now you can see small

details like the pixel values when you

have a resize mode set on a layer when

clicking on canvas and you can also see

them when you're hovering on controls

and my favorite feature resizing the

panel as well

we've also fixed that text resizing

issue so we've moved the segmented

control underneath width and height so

it's just way easier to work with text

layers now if you look back this is some

of the most significant changes that

we've ever made to our properties panel

and there's going to be an adjustment

period you know muscle memory is going

to have to be relearned but I really

hope that this demonstrates that we've

tried to take a really thoughtful

approach to making usability

improvements but also prioritizing

stability and honoring muscle

memory the properties and the canvas are

just two of the challenging areas that

we've had to face during this project

project and to talk more about the

challenges that we' face as the team is

Casey thanks

everyone

nice hi everyone uh my name is Casey I'm

a product manager here at figma um this

is easily the hardest product product

I've ever worked on it's incredibly

challenging and there's a very demanding

audience that holds a high bar for

Quality um you know today I want to

share with you some of the reflections

we've had over the last 12 months in

building this new interface um you know

figma is a really unique tool in that

it's this free form design tool that

gives you the ability to you know turn

your ideas and Imagination explore those

ideas and express them within a creative

tool you know but also like we've been

talking about it's a tool for Design

Systems to give you components that act

as building blocks to help turn your

ideas into working products and the

challenge at figma is making space for

both of these things at the same time

you know in my opinion this is one of

figma's superpowers is how it can make

space for both of these things equally

in the same product and you know while

designing ui3 we've even thought about

you know how can the structured aspects

influence the free form aspects like

making components more playful um

putting to them the top so they feel

like building blocks you can play with

and explore and also improving the

affordances and the free form tool to

improve the structure and

Clarity another really challenging

Balancing Act is how do we uphold the

history of design tools and honor the

motor memory that all of you have built

up over many years um I know a lot about

shortcuts and if you move those around

it can really

hurt but as technology evolves our tools

also need to evolve and so with

breakthroughs like AI we need to

progress into the new and unfamiliar and

this is another tricky Balancing Act to

figure out how do we sit in the past and

the future and if you move too slowly

you risk being left behind and missing

out on New capabilities and new tools to

help us build greater things but if you

move too quickly you risk leaving our

communities

behind and these are just two examples

of some of the challenges we faced while

building products at figma and you know

it's become apparent to me working over

uh on this over the last year that these

aren't two things that are at odds with

each other but rather the the important

thing is to step back and realize

they're intertwined and it's one one

thing you're handling together uh and to

see them as a whole and how they

influence each

other and so looking back one of the

first things I want to reflect on is the

the need for balance and finding the

right balance you and everything you're

doing and finding that right

perspective and you know the the team is

all over the place so we had a Tim in in

Belgium Joel was in London for a little

bit Ryan was in San Francisco I'm based

in New York and so there were a lot of

fig jams over the last 12 months where

we needed to figure out you know what

exactly it was we were doing and they

had interesting shapes that emerged

unintentionally sometimes we would have

conversations that were very grounding

to help us understand like what do we

need to do other conversations kind of

literally went up and helped us see what

was possible and paint a picture of the

future we also needed to understand what

is good look like what exactly are we

solving

for and we also did hundreds of design

Explorations and so our entire design

team you put together uh looking at the

entirety of the design Eder to

understand how do we update this uh in

for

ui3 and also there were a lot of icons I

think hundreds of icons shout out to Tim

vanam who's I think watching at home

right now um for for his work across the

product and also for those of you

interested in more behind the scenes on

Craft um online today Stanley and Wayne

will be giving a talk on collaborative

Precision you know but not only was it

important to do the work but we had to

talk about the work and make sure we

were all on the same page and so we

needed crit formats to make sure all the

designers knew what was going on that we

we get everyone's feedback we also need

to understand what exactly it was we

were building what's in scope what's not

in scope and for a project like this we

needed to put together High Lev pictures

that communicated quickly but

effectively here's all the things that

we're doing and it was really important

as a team to make space to reflect along

the way on the various milestones and

take times to celebrate while also

looking forward to what's

next and the journey was really messy um

we hit a lot of dead ends in this

journey there were points we didn't

think we would figure things out or uh

know how we would land things you but

looking back the most important thing we

did for ourselves was to give as give

ourselves as much space as possible um

you know sometimes it took weeks for us

to feel out some of these changes like

Joel and Ryan were describing and since

they're not these snap judgments we

needed to give ourselves some Runway to

figure out the answers

and so looking back the second second

theme that emerged is making sure we

maximize and make as much space as for

ourselves as possible to give us the

best chance of finding something really

great you and here you've heard this

from Ryan and Joel uh it's been a theme

for us look working on this and that's

to try the hard thing um you know we

found that the most interesting aspects

of the redesign were HD in by the most

scary and daunting challenges you know

like how do we redesign figma to put

components in Auto layout first if we

had those and we're building around them

how do we reorient all of the tools to

put your content first and really

immerse you in the infinite

canvas and in a lot of re design stories

this would be the end where we'd walk

off stage and say thank you very much

but we know that change takes time and

you know the last thing I think any of

us want is getting the new design 30

minutes before a product review and

needing to figure out how everything

works and so we're going to roll this

out slowly um so you can sign up for the

wait list today if you log into your

account there's a button uh if you're

interested in getting access we're going

to be releasing this to all of you in

the coming

weeks you know but um we're releasing

this as a beta and we really want to

hear from you um you while today we've

heard a lot of stories about how

feedback has shaped and influenced the

product we know we're not

done um that feedback throughout this

process from fig mates our beta testers

has been invaluable and many of you know

that feedback Is Like Oxygen to the

product process and it's a necessary

component for building great

things you know and looking back uh the

easiest way for us to define success was

to figure out how do we build something

that's undeniably great for designers

and so the bar we set for ourselves is

how do we build the best editing

experience for designers and to do that

we need your help um so we're going to

be at the research tank uh downstairs

later today from 12 45 to 1:45 we'd love

to talk to you uh today and tomorrow if

you have questions or thoughts about the

redesign we'll also be wandering on the

conference Hall please say hi we'd love

to talk to you and hear your thoughts uh

also for those of you watching at home

or or after the conference please reach

out to us

online um we're really proud of what we

built and today we're really glad to

share these stories of how we built ui3

but I'm really excited for the next

chapter

involving all of you where we build ui3

together so thank you very much

[Music]