Download "Config 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen"

Please wait. We're preparing links for easy ad-free video watching and downloading.

Previous video: Как создавать лендинги стоимостью от 150 000 (часть 2)Next video: How to Improve Your Underwater Dolphin Kicking with Olympian Chloe Sutton

12:03

4 types of variables

12:30

Variable scoping

22:44

Set variable action

23:50

Inline viewer

24:33

On-canvas editor

33:23

Compare changes

36:52

Unit customization

37:34

Variables inspection

38:22

Component playground

40:06

Plugins for Dev Mode

43:11

Figma for VS Code

How to Improve Your Underwater Dolphin Kicking with Olympian Chloe Sutton

How to Improve Your Underwater Dolphin Kicking with Olympian Chloe Sutton

Channel: Chloe Sutton

Как создавать лендинги стоимостью от 150 000 (часть 2)

Как создавать лендинги стоимостью от 150 000 (часть 2)

Channel: UPROCK

Use THIS Move for BIG DAMAGE - Devil Jin TEKKEN 8 Annihilation Beam Guide

Use THIS Move for BIG DAMAGE - Devil Jin TEKKEN 8 Annihilation Beam Guide

Channel: Daitooka

figma

design

product design

tips

tricks

UI design

ux design

app design

figma design

design for figma

FigJam tutorial

prototyping

collaboration

UX tutorial

Design tips

Figma tutorial

Config

design system

tutorial

product:multiple

audience:other

language:english

format:standard

produced_by:other

theme:other

event:config

series:other

type:other

level:none

config

figjam

nothinggreatismadealone

designsystems

config2023

00:00:00

foreign

00:00:05

[Music]

00:00:17

good morning everyone my name is Yuki

00:00:21

yamashira and I'm figma's Chief product

00:00:23

officer and on behalf of the entire

00:00:26

figma team from around the world welcome

00:00:29

to config 2023.

00:00:36

thank you so much for joining us today

00:00:39

we feel incredibly lucky to be supported

00:00:41

by so many of you

00:00:43

this is actually the first time our

00:00:45

community has gotten together in person

00:00:47

for config since our very first

00:00:49

conference back in 2020. so to the 8 500

00:00:54

people here in San Francisco

00:00:57

it's so good to see all of you

00:01:03

we also have

00:01:05

hundreds of thousands of attendees

00:01:07

tuning in virtually that's right

00:01:08

hundreds of thousands that's as many

00:01:11

active users that were on the platform

00:01:13

when I joined stigma a little over four

00:01:15

years ago

00:01:16

which this boggles my mind

00:01:19

and I want to give a special shout out

00:01:21

to the config watch parties that are

00:01:23

happening around the world there are 55

00:01:25

of them from places like Chennai to

00:01:27

Bogota from Cincinnati to Singapore

00:01:30

which I was just at last month

00:01:32

so thank you for celebrating this very

00:01:35

special day with us

00:01:37

now I can't wait to show you what we

00:01:39

have in store today and I'm sure neither

00:01:41

can you so let's kick things off the way

00:01:43

we always have by showing you what our

00:01:46

team has been building and for that

00:01:48

please join me in welcoming figma CEO

00:01:52

Dylan field

00:01:53

[Applause]

00:01:56

wow

00:01:57

[Applause]

00:02:04

good morning everybody

00:02:06

welcome to config 2023

00:02:12

this is amazing to

00:02:17

the things that you're coming from thank

00:02:19

you for being here with us

00:02:21

so as Yuki mentioned the last in-person

00:02:24

config was February 6 2020 which you

00:02:28

might note that date was just a few

00:02:30

weeks before covid started uh and we

00:02:33

thought that going into that it you know

00:02:35

config would be the biggest event of the

00:02:36

year but of course the world had some

00:02:39

other plans

00:02:40

and it was about 800 people in the

00:02:42

Midway which was uh in the dog patch in

00:02:45

SF and just to bring you back to that

00:02:48

moment we launched selection colors

00:02:51

hyperlinks and auto layout with stretch

00:02:53

some good features

00:02:59

so today

00:03:01

we have over 8 000 people here

00:03:08

hundreds of thousands tuned in remotely

00:03:10

and we were just completely humbled by

00:03:13

all of us being together so thank you so

00:03:16

much for being part of this journey with

00:03:17

us

00:03:19

uh the products so a lot has changed

00:03:21

especially in the last year and that's

00:03:23

not just the product it's also the

00:03:25

community uh if we see everybody here

00:03:27

the company and the world but first in

00:03:31

the product was take a look at some of

00:03:32

the highlights of what is shipped

00:03:35

[Music]

00:03:47

[Music]

00:03:51

foreign

00:03:53

[Music]

00:04:28

thank you

00:04:30

[Music]

00:04:38

[Music]

00:04:49

and of course those are just some

00:04:51

highlights the team has been working

00:04:52

super hard to get all sorts of stuff out

00:04:55

second though our community has also

00:04:59

grown and we introduced the ability to

00:05:02

publish paid resources most recently so

00:05:04

I'm going to highlight a few creators uh

00:05:07

first Molly Molly published the UI prep

00:05:10

style guide uh I see some Applause and

00:05:13

Molly also teaches DS bootcamp uh Design

00:05:17

Systems boot camps using her figma UI

00:05:19

kits

00:05:20

div riots uh is a team behind HTML to

00:05:24

design

00:05:25

maybe some of you are users of this

00:05:26

plugin if you haven't checked it out

00:05:28

please do it lets you convert a website

00:05:31

into figma and this is our most

00:05:33

purchased plugin

00:05:34

but it's not just individual creators

00:05:37

we also have companies

00:05:41

such as Apple you might have heard of

00:05:42

them and they publish their first

00:05:45

official design kits on the figma

00:05:47

community platform I also want to give a

00:05:49

shout out to Joey Banks I don't know

00:05:51

where you are Joey

00:05:55

Joey for years has built and maintained

00:05:58

just Immaculate kits and we just

00:06:02

appreciate all the work you've done so

00:06:04

much Joey

00:06:05

uh another really core part of our

00:06:08

community are our students and Educators

00:06:11

and we've been invested in education

00:06:14

since the beginning of figma

00:06:16

so all of our products since we launched

00:06:18

figma in GA in 2016 have been free for

00:06:22

students and Educators and we're

00:06:23

committed to being free forever for them

00:06:25

as well

00:06:27

so last year Google Chromebooks beta was

00:06:31

launched for figma and fig Jam to

00:06:33

students and this was us working with 50

00:06:36

50 schools and about 10 000 students

00:06:39

around the United States today we're

00:06:43

announcing the ga of our partnership

00:06:45

with Chromebook

00:06:46

and any classroom in the United States

00:06:48

will now have access to the highest

00:06:51

Enterprise grade of figma

00:06:59

also new we're able to now expand to

00:07:02

students under 13 in the United States

00:07:04

and we're expanding our education

00:07:06

offering to Japan as well

00:07:11

third figma as a company is also going

00:07:14

through changes uh back in the fall of

00:07:19

last year we entered into an acquisition

00:07:21

agreement with Adobe and like many of

00:07:24

you I grew up using Adobe tools so I

00:07:27

believe we can do so much more for you

00:07:29

with access to adobe's deep Tech and

00:07:31

expertise and I know that our distinct

00:07:33

strengths can come together in amazing

00:07:35

ways for product design creativity and

00:07:38

productivity I couldn't be more excited

00:07:47

lastly the world is Shifting too uh it's

00:07:50

2023 and so is someone in technology in

00:07:54

San Francisco I can't do this keynote

00:07:56

without mentioning AI

00:07:59

I think it's on all of our minds though

00:08:01

really how is this going to impact

00:08:03

design

00:08:05

uh AI will redesign how we work that's

00:08:08

clear and I think that for many of us

00:08:10

that's scary but also fascinating

00:08:12

my point of view is that AI will enable

00:08:15

anyone to get to a good first draft

00:08:19

but a good first draft is not a

00:08:23

world-class product

00:08:24

going from a good first draft to a

00:08:27

world-class product still requires all

00:08:29

of you and it still requires your teams

00:08:36

when I think about figma's efforts I

00:08:38

often draw out three stages of the

00:08:40

product building process

00:08:43

brainstorming ideation design and

00:08:46

building and production

00:08:48

if you can think it

00:08:50

figma wants to help you build it

00:08:54

but there's still so much more we can

00:08:56

improve when it comes to going from

00:08:58

design to build

00:09:01

so that's what today's keynote is going

00:09:03

to focus on those late stages of the

00:09:05

design process and those earlier stages

00:09:08

of the building process

00:09:10

we're going to dive into three areas

00:09:13

Design Systems

00:09:15

prototyping and production

00:09:18

so

00:09:19

let's get started

00:09:21

[Applause]

00:09:25

oh boy so

00:09:32

a lot of you have speculated online that

00:09:35

we're going to launch tokens at config

00:09:37

this year

00:09:40

and I'm so sorry to say

00:09:43

we're not launching tokens

00:09:46

but we are launching variables

00:09:53

language is pretty important and I know

00:09:55

that many of us have been using the

00:09:57

words tokens as a community

00:09:59

and we're not trying to kill the word uh

00:10:02

we're calling in variables because we're

00:10:04

taking a more holistic approach Beyond

00:10:07

just immutable values in your design

00:10:08

system uh and so I think as we go

00:10:11

through the keynote today you'll

00:10:13

understand why we're calling it

00:10:14

variables not tokens but let's dive in

00:10:18

and just check it out

00:10:20

[Applause]

00:10:25

okay

00:10:26

so here I am

00:10:28

uh and you can see here that uh I am in

00:10:33

a design uh and we're going to be

00:10:37

working in this file which is uh for a

00:10:40

Marketplace called World peas uh it has

00:10:44

locally sourced fruits and vegetables

00:10:46

apparently from a Dylan Fields field

00:10:50

uh nice

00:10:52

and uh if you're like me when you're

00:10:56

modifying these designs you might want

00:10:58

to uh you know experiment by putting in

00:11:01

different values

00:11:03

um and and changing them so the first

00:11:07

thing I'm going to show you is that now

00:11:08

these variables uh can actually be

00:11:11

surfaced

00:11:12

has these values

00:11:14

so for example if I want to change to a

00:11:16

larger border radius I can just do that

00:11:18

you can see there's this little button

00:11:20

here and I can switch

00:11:24

I can also modify my auto layout spacing

00:11:27

here as well

00:11:28

so I want to go from small to large

00:11:32

trivial

00:11:34

okay so you're probably wondering where

00:11:36

are these magical variables defined

00:11:39

and if you go to the right hand side

00:11:41

you can see that if I click this button

00:11:43

I'll open the variables UI

00:11:48

so this variables UI lets you define all

00:11:50

sorts of different variables on the top

00:11:52

we have spacing variables which are

00:11:55

integers

00:11:56

we also have our border radius variables

00:11:58

we just use

00:11:59

we also can Define string variables

00:12:01

color variables and even Boolean

00:12:04

variables now

00:12:06

you might be wondering though

00:12:09

because many of us have in our minds

00:12:11

this link between the word tokens or

00:12:13

variables and theming where is the

00:12:16

theming

00:12:17

so let's go check that out now I'm

00:12:19

already in a collection of variables oh

00:12:22

sorry one more thing I want to show you

00:12:23

first

00:12:25

if you click here you can also scope

00:12:28

your variables so for example for Border

00:12:30

radius I can scope it to just show up

00:12:33

for Corner radius or for spacing I can

00:12:37

make it just show up for auto layout

00:12:39

which is really powerful when you're

00:12:41

creating a design system and you want to

00:12:42

make sure it's consumed a certain way

00:12:45

okay now if I switch collections to

00:12:47

color modes you can see that my rows are

00:12:51

variables and my columns are different

00:12:54

modes

00:12:55

and so on the bottom I've got hex colors

00:12:58

defined and on top I've got variables

00:13:01

that are referenced as an alias this is

00:13:04

also super useful because when you are

00:13:07

able to define something one place and

00:13:09

use it everywhere it makes your design

00:13:12

system so much more easy to maintain

00:13:14

so you can see we've got a light mode

00:13:16

and a dark mode defined here so let's

00:13:18

check out how this shows up

00:13:20

if I click this Frame

00:13:23

I can go to my layer properties

00:13:26

and you'll see that I have a little

00:13:28

option here

00:13:31

and if I switch to dark mode

00:13:35

it just works

00:13:41

now

00:13:43

I can actually have more than just two

00:13:45

modes

00:13:46

for example how about you go to config

00:13:49

2023 mode

00:13:52

[Music] [Applause]

00:13:54

so as powerful as that is there's more

00:13:58

and you can Define modes that are not

00:14:00

just colors and themes but you can also

00:14:04

do it with other types of variables as

00:14:05

well

00:14:06

for example

00:14:07

here I have my densities mode and I've

00:14:11

got densities defined as compact

00:14:14

but what if I want to switch it to

00:14:16

something that has more space

00:14:18

now I can click comfortable

00:14:22

or spacious

00:14:26

and you'll notice that as I went from

00:14:29

spacious comfortable those actually the

00:14:32

thumbnails appear in Superior and so I

00:14:34

can also tie spacing to Boolean

00:14:37

attributes like do I want to have an

00:14:40

image appear or not

00:14:43

now let's say that world peace wants to

00:14:45

go global

00:14:47

and we want to start to localize our

00:14:49

content more

00:14:50

I can Define modes with string variables

00:14:53

so I can go from English to Japanese

00:15:03

and if I want to test out some long

00:15:05

strings in German

00:15:06

I can do that too

00:15:10

now one thing that we're aware of is

00:15:13

that a lot of times you want to combine

00:15:15

these modes to test things together so

00:15:17

for example what if I want to test

00:15:19

Japanese mobile and dark as a combo

00:15:22

I can just copy this into this Frame

00:15:25

and it'll all just work automatically

00:15:29

[Applause]

00:15:31

okay what about German and config

00:15:37

now okay let's try something a little

00:15:40

bit harder

00:15:41

what if we went to from Mobile to tablet

00:15:44

and also did English and white

00:15:48

ready

00:15:55

thank you

00:15:58

so just to recap

00:16:01

we're launching color number string and

00:16:04

Boolean variables we've added

00:16:06

collections aliasing modes scoping and

00:16:09

inheritance

00:16:10

if you're on prone org you'll get four

00:16:12

modes Enterprise gets 40 modes as well

00:16:15

as a rest API that you can ping in order

00:16:18

to keep design and development in sync

00:16:21

all right let's get back to demo

00:16:27

now this is a really cool tablet UI that

00:16:30

I got just magically just now but

00:16:33

you might notice that these uh these

00:16:36

rows are not great uh if I go here you

00:16:40

can see that they're pretty long and I

00:16:42

just don't love the way they look

00:16:45

um this is an auto layout frame

00:16:47

and it'd be nice if I can kind of make

00:16:49

like a Max uh width here as well as a

00:16:51

minimum width

00:16:53

and today we're announcing that you can

00:16:55

do just that

00:16:57

so

00:17:00

if I go in here to my width you'll see

00:17:03

that there's now a little drop down

00:17:04

arrow I can add my Min width I'll choose

00:17:07

300.

00:17:09

and a Max width which I'll make 600.

00:17:14

and you can see

00:17:16

it's adjusted

00:17:17

so now we have a little bit of a better

00:17:20

design but

00:17:22

uh I I personally feel like it looked

00:17:25

better

00:17:26

if you had them on maybe like two per

00:17:29

row instead of one per row anyone agree

00:17:32

okay cool

00:17:36

so what if with auto layout I could just

00:17:39

make it wrap that'd be nice right

00:17:42

well today we're announcing you can do

00:17:45

just that

00:17:51

[Music]

00:17:54

and

00:17:57

check this out if I design this

00:17:59

responsively

00:18:02

it will just flow the way I want it to

00:18:04

[Applause]

00:18:07

all right

00:18:08

so with auto layout improvements today

00:18:10

we're announcing wrapped Min width and

00:18:13

height Max width and height and it was a

00:18:16

little bit of a long demo so we

00:18:18

truncated it we're also announcing

00:18:20

truncation as well for text

00:18:23

[Applause]

00:18:26

okay you might think that's a wrap but

00:18:30

don't worry we got more

00:18:33

prototyping

00:18:34

[Applause]

00:18:36

next up we're going to dive into

00:18:38

prototyping now prototyping and figma as

00:18:41

we all know is essential because it

00:18:43

helps you use your tests and get the

00:18:45

right feedback

00:18:46

but it's way too complex

00:18:49

so complex that sometimes we get

00:18:51

screenshots like these

00:18:54

and no this isn't Spider-Man into the

00:18:55

spider-verse so that was a great movie

00:18:58

uh this is a figma prototype and it has

00:19:01

so many noodles

00:19:03

internally we actually have a name for

00:19:06

this we call these pasta pictures and we

00:19:09

collect them in a slack Channel at figma

00:19:11

and these prototypes can be super

00:19:13

impressive but they're also very scary

00:19:16

very scary to maintain so scary in fact

00:19:19

that one of our users Tyler actually

00:19:22

when is the pasta fixture for the last

00:19:24

Halloween

00:19:25

now uh with all due respect to Tyler we

00:19:28

think there has to be a better way so we

00:19:31

set off on a quest

00:19:33

to make prototyping better using

00:19:35

variables let's go back to demo and take

00:19:37

a look

00:19:42

all right

00:19:44

so

00:19:45

I'm going to go to my prototyping file

00:19:46

here

00:19:47

and just to orient ourselves we have

00:19:50

really three states

00:19:52

the first state for our world peas app

00:19:55

is this product page where you can see

00:19:57

the produce we have a watermelon we have

00:20:00

pears and we got some cherries

00:20:02

the second state is a product detail

00:20:05

page if I tap on or click on the

00:20:08

watermelon I should see a watermelon

00:20:10

pear pear cherry cherry

00:20:13

the third state is this cart

00:20:15

if the cart has items in it I should see

00:20:18

the cart view that's on the left

00:20:20

with whatever items are in my cart and

00:20:22

if it has no items in it I should see an

00:20:24

empty State on the right

00:20:26

so this should be pretty simple to build

00:20:28

right

00:20:29

well today in figma it's not uh you

00:20:32

would have to basically imagine all the

00:20:34

different permutations of how you go

00:20:36

from adding watermelons and pears and

00:20:39

cherries and each time you wanted to

00:20:42

make it so you could add one more it

00:20:43

would expand in a kind of combinatorial

00:20:45

explosion of possibilities in addition

00:20:48

the conditional of

00:20:50

am I going to see items in the cart or

00:20:52

not uh really makes things hard to see

00:20:55

and makes it so that you have even more

00:20:58

options at that uh in that explosion of

00:21:00

possibilities and we actually just to

00:21:02

show you what those look like this is an

00:21:04

example

00:21:06

um of what a project looks like if you

00:21:08

can just add like a few different items

00:21:10

and it doesn't even work if you try to

00:21:12

add more items because I think we're all

00:21:13

used to making these happy paths in our

00:21:16

prototype where the user has to do

00:21:18

something in a very specific way and if

00:21:20

they don't the Prototype breaks and and

00:21:22

this works but doesn't get the realistic

00:21:24

feedback that we all want and need

00:21:26

so let's see how we can do this better

00:21:28

with variables

00:21:30

now

00:21:31

uh the first thing I want to show you

00:21:34

are the variables that I've defined for

00:21:36

this prototype

00:21:37

if I go to my general collection you'll

00:21:40

see the sort of global state for this

00:21:42

app we've got three items in our cart which

00:21:44

is reflected here

00:21:46

we have a selected product watermelon

00:21:49

reflected there

00:21:50

and we've got our total

00:21:52

which is reflected in our cart view here

00:21:55

now one thing we can do is we can use

00:21:58

modes to basically create almost like a

00:22:01

small database for our products so each

00:22:06

row here are our variables and each

00:22:09

column are our products

00:22:11

and we have a product for watermelon

00:22:13

pears and cherries and you can almost

00:22:15

think of these like objects in

00:22:17

programming so they have properties like

00:22:19

a price in this case 3.99 for the

00:22:22

watermelon location and account for how

00:22:25

many are in your cart

00:22:27

okay so let's see what it'd look like to

00:22:30

uh to basically wire this up

00:22:32

so let's say that I want to take this

00:22:34

plus button

00:22:36

and when I tap it I want to add an

00:22:39

interaction

00:22:40

so on tap I'll say I want to set this

00:22:42

variable

00:22:43

and I'll set the variable count which is

00:22:46

scoped to the Watermelons object

00:22:49

to count of the Watermelon plus one

00:22:53

because it's ink running

00:22:55

the second thing we're launching here is

00:22:58

that now you can actually add several

00:23:00

interactions per trigger so if I press

00:23:04

plus again it works I can set another

00:23:07

variable

00:23:08

and I can say the total which is scope

00:23:10

to the global state is equal to the

00:23:12

existing total plus the price of the

00:23:15

watermelon

00:23:17

okay now let's see if this works

00:23:21

so

00:23:22

usually what I do is I press this play

00:23:24

button and I'd have to go back and forth

00:23:27

between my prototype and the screen

00:23:31

but it's a little bit laborious it's

00:23:33

great when you're presenting information

00:23:34

but it's kind of annoying when you're

00:23:36

trying to rapidly iterate and develop a

00:23:38

prototype

00:23:39

so what if instead I could do this all

00:23:43

in my document

00:23:46

today we're announcing an inline

00:23:48

prototype viewer

00:23:50

[Applause]

00:23:52

and you can move this around you can

00:23:55

resize it it's pretty awesome

00:23:57

uh and so what I'm going to do is I'm

00:24:00

going to navigate to my screen that we

00:24:03

just made

00:24:06

and you can see that uh if I press this

00:24:10

for button or this plus button it'll

00:24:13

increment to four and also my subtotal

00:24:15

will update

00:24:24

another usability Improvement we've made

00:24:26

is we're announcing now that you can

00:24:28

actually start to see these interactions

00:24:30

on the canvas

00:24:31

so if I click here I can actually see uh

00:24:35

right on the canvas what this

00:24:36

conditional is

00:24:38

as a reminder what we're trying to do is

00:24:40

make it so that you can go from this

00:24:42

cart

00:24:43

to

00:24:45

either the full cart or the empty State

00:24:48

cart

00:24:49

inside any conditional to do that

00:24:51

if the quantity in the cart is zero I

00:24:53

should navigate to empty otherwise I

00:24:56

should navigate to the basket state

00:24:58

okay so let's see how it all works

00:25:00

together now

00:25:02

I've got my prototype I can go to pairs

00:25:05

I can add them to the basket I can go to

00:25:07

my cart and when I'm in the cart I can

00:25:10

decrease what's in the Prototype

00:25:13

it'll go the empty State I can go back

00:25:16

home

00:25:17

let's see if the conditional works if I

00:25:19

click here it'll go to the empty State

00:25:22

now [Applause]

00:25:30

this is just scratching the surface of

00:25:33

what you can do with prototyping with

00:25:34

variables uh honestly we could have

00:25:37

spent the entire keynote just exploring

00:25:39

this one feature and I am so excited

00:25:41

about what you can do here it's really

00:25:44

really fun to play with so I can't wait

00:25:45

for you to take a look and all advanced

00:25:48

prototyping features will be available

00:25:49

on all paid plans we hope this opens the

00:25:52

door to all sorts of more prototyping

00:25:55

possibilities

00:25:58

and of course we didn't cover everything

00:26:00

today

00:26:01

if we advance the slide

00:26:07

there we go uh to Deep dive in these

00:26:10

features if you want to see them

00:26:12

tomorrow you can check out our in-person

00:26:14

workshops so variables is going to be at

00:26:16

11 30. and we have a deep dive on

00:26:19

prototyping at 12 45 tomorrow so don't

00:26:21

miss those

00:26:24

okay while this makes it easier to build

00:26:27

complex prototypes and model a more

00:26:29

realistic user experience

00:26:31

uh I think you'd all agree that we're

00:26:34

not to the Finish Line until it gets

00:26:35

built

00:26:36

so let's go to the next phase which is

00:26:40

development

00:26:41

now

00:26:42

uh you can see here that I have my uh

00:26:46

prototype I made as well as the

00:26:47

components in this section here but if I

00:26:51

zoom out I have all these Explorations

00:26:52

in my file

00:26:54

and that's kind of worrisome because

00:26:55

what if my developer builds the wrong

00:26:58

thing

00:26:59

uh has anyone ever been there before

00:27:02

happens at figma too

00:27:05

today we're announcing a very small

00:27:07

feature tiny little feature

00:27:10

which is if I click my section

00:27:13

I now have a little button

00:27:15

everyone see it

00:27:18

it says Mark is ready for Dev

00:27:21

[Applause]

00:27:27

if I click this button

00:27:29

I get this little status ready for Dev

00:27:33

just a little feature

00:27:36

what if I told you that this feature is

00:27:38

sort of like a wormhole into a whole new

00:27:40

universe of figma

00:27:42

to explain more I'm going to welcome

00:27:45

Chris Rasmussen figma CTO to the stage

00:27:48

welcome Chris

00:27:53

you're good Rocket Man

00:27:56

[Applause]

00:27:57

hey everyone I am so excited to be here

00:28:00

today and share something new that we've

00:28:01

been working on

00:28:06

because I was excited about this team's

00:28:08

Vision to build a new kind of design

00:28:10

tool

00:28:12

one that was built for entire product

00:28:14

teams

00:28:16

now I know this is important to all of

00:28:18

you as well many of you are coders too

00:28:20

and regardless of whether or not you

00:28:22

code we all want to see our designs

00:28:24

brought to life faster and more

00:28:26

accurately

00:28:29

so why is it so hard

00:28:32

well there's a lot of different reasons

00:28:34

but at the core of it all is the fact

00:28:36

that we're optimizing for very different

00:28:38

things when we're developing and when

00:28:40

we're designing

00:28:41

when we're designing we're optimizing

00:28:44

for Rapid iteration and ideation

00:28:47

anything that interrupts our flow has

00:28:49

the potential to limit our creativity

00:28:54

on the other end of the spectrum when

00:28:55

we're getting closer to production we

00:28:57

have to start being explicit about all

00:29:00

those details that were previously

00:29:01

implied and easily assumed by our team

00:29:04

we need to think not just about how

00:29:06

things are going to look and work

00:29:08

but also how they're going to be

00:29:09

maintained reused and composed

00:29:13

at figma

00:29:15

we want our tools to be excellent on

00:29:17

either end of this spectrum not just

00:29:19

okay somewhere in between

00:29:23

so far we've built figma for the design

00:29:26

and of the spectrum

00:29:28

but we think it's time to focus on the

00:29:30

development end as well

00:29:33

because 30 percent of our weekly active

00:29:35

users at figma today are already

00:29:37

developers that's the same percent as

00:29:41

designers

00:29:43

and yet we haven't really optimized for

00:29:45

their needs

00:29:46

show of hands

00:29:48

how many of you out here are developers

00:29:50

today

00:29:53

yeah that's great

00:29:55

definitely not 30 percent though

00:29:58

it's okay we expected that

00:30:01

because the reality is

00:30:03

developers don't really feel at home in

00:30:05

figma

00:30:07

and it's pretty easy to see why

00:30:09

this is what a typical figma file looks

00:30:11

like and this is a really pretty version

00:30:12

made by our brand design team

00:30:16

screens upon screens spread across

00:30:18

dozens of different pages no clear

00:30:21

indication of what's new what's changed

00:30:23

or what's ready to be implemented

00:30:25

way too many clicks to get to basic

00:30:27

actions like export or inspect a color

00:30:30

and those are just the basics

00:30:32

on top of all of this there's often a

00:30:35

mismatch between the way designs are

00:30:37

structured in figma

00:30:38

and the way they need to be built

00:30:41

as a result developers rarely get what

00:30:44

they need from figma

00:30:48

to address these challenges and so many

00:30:50

more

00:30:51

I'd like to introduce you to

00:30:54

Dev mode

00:31:01

a view into figma files optimized for

00:31:03

the needs of development

00:31:05

let's go do this live demo

00:31:19

all right first figma demo live in front

00:31:21

of a lot of people wish me luck

00:31:25

so here we are in Dev mode the first

00:31:28

thing you'll notice is that it's the

00:31:29

exact same file Dylan was working in

00:31:32

we don't have to worry about Dylan

00:31:34

needing to export additional revisions

00:31:36

it's got all the same multiplayer

00:31:37

goodness as figma today it's just a new

00:31:40

view optimized for Developers

00:31:43

instead of seeing an overwhelming list

00:31:45

of pages with every iteration over the

00:31:47

last couple months of work we only see

00:31:49

the pages that have designs that have

00:31:51

been marked as ready for development and

00:31:53

of course we can still get to all those

00:31:54

other Pages if we need to but they're

00:31:56

collapsed by default

00:31:58

additionally

00:31:59

we don't think developers need to see an

00:32:01

overwhelming list of layers right off

00:32:03

the bat so instead we show them the

00:32:05

sections that have been marked as ready

00:32:06

for development

00:32:07

and simple thumbnails to help them get a

00:32:10

sense of what's going on in this file

00:32:13

now many developers struggle to pan and

00:32:16

zoom an infinite canvas when they come

00:32:17

into figma for the first time if you're

00:32:19

on the desktop you don't necessarily

00:32:20

know what the keyboard shortcut is so

00:32:22

we've made it really easy to navigate a

00:32:24

file simply by clicking around and it

00:32:27

will take you to the exact part of the

00:32:28

canvas with the right zoom level already

00:32:30

set up

00:32:32

you can also quickly navigate using your

00:32:34

arrow keys and get a lay of the land

00:32:37

and if I know how to use this Zoom

00:32:39

feature here you can see exactly when

00:32:42

every screen was last edited

00:32:46

foreign

00:32:51

if a screen actually changed since the

00:32:53

last time I was in this file you would

00:32:55

also see a little yellow badge to help

00:32:57

direct your attention to what's new

00:32:59

now this screen says it was edited an

00:33:01

hour ago so Dylan must have changed

00:33:02

something

00:33:03

but I don't really know what he changed

00:33:06

I'm sure many of you have been here

00:33:08

before regardless of whether or not

00:33:09

you're a designer or a developer it's

00:33:12

just not always obvious and I could go

00:33:13

ask Dylan to come back out here and show

00:33:15

me exactly what he wanted me to do

00:33:17

or I can use a new feature called

00:33:20

compare changes

00:33:23

here it is compare changes gives you a

00:33:26

side-by-side view of a design in the

00:33:28

current version and any previous version

00:33:30

you might have seen

00:33:32

you can switch between a side-by-side

00:33:34

view or an overlay mode to quickly get a

00:33:36

sense for what's changed

00:33:42

foreign

00:33:46

so in this particular case a lot changed

00:33:48

so we also give you a list of the layers

00:33:50

that have been edited added and removed

00:33:53

as a developer this is incredibly

00:33:55

helpful for me because sometimes the

00:33:57

changes aren't even easy to spot

00:33:58

visually for example here this world

00:34:01

peace text changed which is obvious it

00:34:04

looks like it was moved around and

00:34:05

resized but what wasn't obvious is that

00:34:08

all these other properties change that I

00:34:10

might need to go update the code with so

00:34:12

this really accelerates the design to

00:34:13

development process and eliminates a lot

00:34:15

of tedious back and forth

00:34:17

and any change that happens here is

00:34:19

easily inspectable so you can see that

00:34:21

this button was replaced with the new

00:34:23

button that was added here and if there

00:34:25

were any layers are removed like this

00:34:27

one you can see that as well

00:34:29

so let's compare changes

00:34:40

now these are just the basics and

00:34:42

there's so much more we can do to bridge

00:34:43

the gap between design and development

00:34:45

so let's keep going

00:34:46

the next thing I'd like to show you is

00:34:49

that we've changed the default selection

00:34:51

heuristics in Dev mode so you can easily

00:34:53

inspect individual layers without having

00:34:55

to double click through deeply nested

00:34:57

groups for example if I want to view

00:35:00

this icon right here all I have to do is

00:35:02

click it and I've got it selected

00:35:04

in addition to that we also know that

00:35:07

oftentimes icons if I go back to design

00:35:09

mode real quick consist of many

00:35:11

different layers and paths and time and

00:35:14

time again developers tell us that they

00:35:15

ended up selecting an individual path

00:35:17

and exporting that rather than the

00:35:18

entire icon so you'll see that in Dev

00:35:21

mode we now have heuristics to detect

00:35:22

this and collapse that into a single

00:35:24

simplified layer so you always select

00:35:26

exactly what you need

00:35:34

the other thing we hear very often from

00:35:36

developers is that the default values

00:35:38

the design tools like figma surface

00:35:39

aren't really that helpful when you're

00:35:41

writing code for example we all know

00:35:43

that developers don't really use

00:35:45

absolute positions in the top left

00:35:46

coordinate of every single item in order

00:35:49

to translate the code we need to think

00:35:50

about responsive layouts and how things

00:35:52

resize and Reflow across different form

00:35:54

factors and content types

00:35:56

so figma now surfaces these implicit

00:35:58

properties as well for example as I

00:36:00

hover over this design you'll see that

00:36:02

red lines have been greatly improved to

00:36:04

also show the padding between elements

00:36:06

the margin and more

00:36:08

we've also introduced a new familiar

00:36:10

diagram for anyone who's used a browser

00:36:13

development tool before with a box

00:36:14

diagram over here on the right

00:36:16

[Applause]

00:36:21

this will show me not only the padding

00:36:23

spacing and margin but also the border

00:36:25

radiuses the Border weights and more

00:36:28

now many of you are working in units

00:36:31

other than pixels so in Dev mode you can

00:36:34

now go over to this little setting icon

00:36:36

here and customize the units from pixels

00:36:39

to Rems and even set the Unix scale if

00:36:42

you're using a relative unit measurement

00:36:43

like Rems

00:36:44

[Applause]

00:36:48

and of course this works for other

00:36:50

platforms as well we've introduced new

00:36:52

Swift UI for iOS and we've introduced a

00:36:54

jetpack compose module too

00:37:03

now many of you are already working hard

00:37:05

to bring your designs closer to

00:37:08

production by investing in Design

00:37:10

Systems Design Systems are often built

00:37:12

by hybrid teams that are both building

00:37:14

Design Systems in figma and also

00:37:16

building Design Systems and code to up

00:37:19

level the vocabulary of what we're

00:37:21

communicating with together and Dev mode

00:37:23

works with Design Systems too

00:37:25

so here you'll see that with our new

00:37:27

variables feature if I'm using variables

00:37:30

in my design I can now see that in Dev

00:37:32

mode

00:37:34

not just in the the red lines but also

00:37:37

in the code that's generated as well so

00:37:39

here you can see that it's using the

00:37:42

color surface subtle variable which may

00:37:45

or may not exist in my code and if it

00:37:46

doesn't it'll fall back to a default

00:37:48

value and I can go create it when I Port

00:37:49

it over

00:37:51

we also surface components and make them

00:37:53

really easy to select so anytime you use

00:37:55

a component in your design it takes just

00:37:57

one click to get to that component and

00:37:59

you're not going to accidentally select

00:38:00

the sub layer of the component and we

00:38:02

give you this icon showing you the

00:38:03

component a description and any

00:38:05

properties that have been provided to

00:38:06

that particular instance of that

00:38:08

component

00:38:10

if you're trying to rebuild a design

00:38:12

that already has components but if

00:38:14

you're trying to build a component for

00:38:15

the first time we're also introducing a

00:38:18

new component playground

00:38:20

the component playground allows you to

00:38:22

manipulate a component while in Dev mode

00:38:24

without having to worry about editing

00:38:26

the underlying file so you can do this

00:38:28

as a viewer as well

00:38:30

[Applause]

00:38:37

and because there's often a relationship

00:38:39

between our Design Systems components

00:38:40

and our code components we've also made

00:38:42

it possible for developers to associate

00:38:44

links with any layer in a design like a

00:38:47

component so you can link to things like

00:38:49

GitHub or other development tools and if

00:38:52

these links get added to a component

00:38:54

they immediately propagate to all of the

00:38:56

instances not just within that file but

00:38:58

across all the files that your company

00:39:00

uses so that other developers benefit

00:39:02

from it as well

00:39:04

[Applause]

00:39:10

so we've talked to many of you about

00:39:11

where you stand on the side of I need

00:39:14

the design tool to generate code for me

00:39:16

or I just want it to help me to

00:39:17

understand the composition of a design

00:39:19

and many of you are in different places

00:39:21

on that Spectrum we want to make sure

00:39:23

that figma works for you regardless of

00:39:24

where you are so for example if you're

00:39:27

implementing a component for the first

00:39:28

time we provide you with these simple

00:39:30

code Snippets they've been revamped to

00:39:32

be a lot better so they generate better

00:39:33

code that's more likely to be useful in

00:39:36

production using modern systems like

00:39:37

flexbox which reflect Auto layout and

00:39:39

even detect Auto layout in places where

00:39:41

you might not have used it and of course

00:39:43

they also use variables as we just

00:39:44

talked about

00:39:45

but sometimes you want to go even

00:39:47

further for example we hear time and

00:39:49

time again that many of you want to

00:39:51

update figma to display the exact way

00:39:53

you parameterize a react component with

00:39:56

all the right properties in order to

00:39:57

reflect a component instance that's been

00:39:59

used in your design

00:40:01

so we're introducing a new kind of

00:40:03

plug-in to figma called a Dev mode

00:40:04

plugin that makes it possible to do this

00:40:06

in a much more

00:40:08

so I'm going to go ahead and show you

00:40:09

one of the example plugins we've created

00:40:11

in open sourced to help you figure out

00:40:13

how you can customize figma to your

00:40:15

needs and this is the component

00:40:17

inspector plugin so I'll switch over to

00:40:19

the react code gen mode

00:40:21

and I will go in here and select this

00:40:25

product card component

00:40:27

and you can see I have it selected here

00:40:29

and now you'll see instead of just

00:40:31

showing me some CSS or iOS styling to

00:40:34

get started it actually shows me exactly

00:40:37

how I would use this instance with the

00:40:39

right parameters in the figma code Base

00:40:41

today it's really really awesome

00:40:49

in addition to that we've also generated

00:40:51

these default typescript definitions so

00:40:53

that if you're going to implement this

00:40:54

component for the first time you'd have

00:40:56

a sense for all the different properties

00:40:57

and parameters you need to get started

00:41:02

but what if you want to go even further

00:41:05

well we have some incredible Partners in

00:41:08

our community that have been working

00:41:09

with us throughout the beta to help do

00:41:11

just that like anima and AWS amplify

00:41:14

Studio

00:41:16

so I'm going to go over here

00:41:19

and now I'm going to switch to anima

00:41:22

and I'm personally a type fan so I'm

00:41:24

going to use typescript

00:41:27

we'll let that run for a second and

00:41:29

there you go this is actual working code

00:41:32

to recreate this component in a separate

00:41:36

code base from scratch it's really

00:41:37

incredible you also get the Styles and

00:41:39

if you go to the plugin tab you can even

00:41:41

open a codepen Sandbox to start working

00:41:44

with this code immediately

00:41:46

[Applause]

00:41:54

with plugins it's also possible to take

00:41:56

over the entire properties panel and

00:41:59

bring in other developer tools inside of

00:42:02

figma for example we've been working

00:42:03

with atlassian to build a jira

00:42:05

integration for figma so that you can

00:42:07

start to record tasks while you're still

00:42:09

in the design file and Associate them

00:42:10

with the individual layers in the file

00:42:12

so I'm going to go ahead and show how

00:42:13

that works now

00:42:15

so we'll go ahead and run the jira

00:42:16

plugin

00:42:19

and you'll see that right here I now

00:42:22

have all of the tasks that are related

00:42:24

to this particular page in my design

00:42:26

file and because they're associated with

00:42:29

individual layers where I actually need

00:42:30

to do the work they'll take me to the

00:42:32

exact portion of the canvas where the

00:42:34

task was originally created

00:42:37

I can also create new tasks from here

00:42:39

add comments and it will sync

00:42:41

bi-directionally between the two tools

00:42:50

so I just showed you how it's possible

00:42:52

to integrate Sigma with other

00:42:54

applications by bringing those

00:42:55

applications into figma we thought it

00:42:57

would be really cool if we could bring

00:42:59

figma to the applications where

00:43:01

developers live too

00:43:04

so we've built a plugin for vs code

00:43:06

called figma for vs code

00:43:09

[Applause]

00:43:12

so with figma for vs code you get this

00:43:14

new icon here in your left panel and

00:43:17

when you switch over to it you're going

00:43:18

to have access to your recents your

00:43:20

shared files your starred files you're

00:43:22

going to see all of the notifications

00:43:23

related to things that are ready for

00:43:25

development and you're going to see a

00:43:27

familiar canvas bringing figma right

00:43:29

inside of your code editor

00:43:32

you also have access to all of the great

00:43:34

inspection features that I just showed

00:43:36

you so you can see here I can expand

00:43:38

this properties panel view the CSS code

00:43:40

Snippets and the CSS Box model

00:43:43

but we've also made it possible to do a

00:43:45

little bit more

00:43:47

now

00:43:48

if I want to start implementing a design

00:43:51

for example I'll go back to this

00:43:52

familiar product card example

00:43:56

I can start writing code

00:43:59

and figma is going to automatically

00:44:00

detect that I'm typing a layer name

00:44:03

it'll select that layer

00:44:06

autocomplete

00:44:07

and fill in the code for me it's really

00:44:09

awesome

00:44:11

[Applause]

00:44:18

can we go back and slide

00:44:22

so in the Finland Community today you're

00:44:24

going to find inspect panel plugins from

00:44:26

our partners like GitHub atlassian

00:44:28

storybook Microsoft anima linear and

00:44:32

Google I want to give a big shout out to

00:44:34

all of our partners for working with us

00:44:36

throughout the devmode private beta and

00:44:37

building a better developer experience

00:44:39

together

00:44:45

foreign

00:44:48

now just to recap real quick we're

00:44:51

launching a new space purpose built for

00:44:53

developers Dev mode from section status

00:44:56

wayfinding compare versions inspect

00:44:59

panel plugins to a brand new integration

00:45:01

with vs code we hope devmode is just the

00:45:04

first step towards the developers

00:45:05

finally feeling like figma is for them

00:45:10

and just to be clear you're still going

00:45:12

to be able to do everything you can

00:45:13

today as a free viewer like comment on

00:45:15

designs generate code copy values and

00:45:18

Export assets

00:45:20

Dev mode Builds on top of all that and

00:45:22

will be available to all users free for

00:45:25

the beta for the rest of 2023.

00:45:28

starting in 2024 Dev mode will be

00:45:31

available to all editors on paid plans

00:45:34

additionally for customers on our

00:45:36

organization and Enterprise plans you'll

00:45:39

be able to purchase a separate license

00:45:41

of Dev mode at a lower price

00:45:46

to dive deeper into Dev mode check out

00:45:48

the in-person workshop tomorrow at 2PM

00:45:51

now to close this keynote out I'm going

00:45:53

to welcome Dylan back onto the stage

00:45:58

[Music]

00:46:04

I am so excited for Dev mode and for

00:46:06

everything else we talked about today so

00:46:09

just to let you know because I know

00:46:10

you're wondering you'll get access to

00:46:12

all these features as we roll them out

00:46:13

across today

00:46:15

and they'll all be enabled right after

00:46:16

the Keynote

00:46:18

so check them out and give us your

00:46:20

feedback as always

00:46:22

okay two more things

00:46:24

first when you log into figma next you

00:46:27

might notice a refreshed file browser

00:46:30

we've unified The Experience so you can

00:46:32

search get notifications

00:46:34

Envy reasons across your entire account

00:46:37

and with new shared projects and shared

00:46:39

files tabs you'll be able to easily

00:46:41

access files shared with you

00:46:45

lastly

00:46:46

perhaps our most longest awaited feature

00:46:50

[Applause]

00:46:54

if you're at config 2020 you may

00:46:56

remember that we announced an updated

00:46:58

font picker there and today

00:47:01

a little over three years later

00:47:04

we're announcing it's going live

00:47:07

complete with font preview

00:47:11

sometimes these things just take longer

00:47:13

than expected you know

00:47:16

before we wrap up I want to give a

00:47:18

special thank you thank you to all of

00:47:20

the beta customers who partner with us

00:47:21

giving us feedback and supported our

00:47:23

launch today

00:47:25

so I wanted to quickly see what they

00:47:27

think of these new features

00:47:29

this figma variables feature was so

00:47:31

highly anticipated I actually took a

00:47:33

break from my honeymoon to test it out

00:47:35

it was like witnessing magic I can I

00:47:38

can't believe I spent all these hours

00:47:40

we think to dark team manually there may

00:47:42

have been some times where we handed off

00:47:44

prototypes and they'd be like wow it's

00:47:47

already built I used to take pride in my

00:47:50

ability to make a good spec I don't miss

00:47:52

that at all because it was super

00:47:54

annoying it brings our workload down one

00:47:57

of our engineers said now I can finally

00:47:59

sleep at night

00:48:04

thank you

00:48:07

thank you again to everyone who

00:48:09

participated in the beta

00:48:11

and this is just the beginning of where

00:48:13

we're gonna go and where we're going to

00:48:15

take our platform

00:48:16

and of course we see AI enabling that as

00:48:19

well

00:48:21

we've been building our ml team for a

00:48:23

bit now and we're exploring how AI will

00:48:25

power our entire platform at figma

00:48:28

here are some early Explorations and

00:48:30

ideas of what might be possible

00:48:38

oh can we go back sorry

00:48:45

from suggesting

00:48:48

uh variants and recommendations for your

00:48:51

Design Systems to chain together

00:48:53

different plug-in actions to automating

00:48:57

variant creation or resizing across

00:49:00

devices we see AI playing a central role

00:49:03

across the sigma platform

00:49:05

so we're also excited to share the news

00:49:08

that to accelerate our AI nmo work we've

00:49:12

acquired a company called diagram

00:49:20

as many of you know diagram was founded

00:49:22

by Jordan singer a long time figma

00:49:25

Community member and honestly diagrams

00:49:28

tools make design feel even more magical

00:49:31

so we're excited to deliver AI

00:49:33

capabilities across figma in Partnership

00:49:35

now with the diagram team

00:49:39

and if this topic interests you and it

00:49:42

should uh you have to tune in tomorrow we have

00:49:45

some amazing talks lined up including no

00:49:48

11 our VP of design at figma he's going

00:49:51

to be talking with the diagram team as

00:49:53

well and all these other incredible

00:49:55

amazing speakers are going to talk about

00:49:57

AI in our Keynotes tomorrow so please

00:50:00

join us

00:50:01

don't miss it

00:50:03

now to close every All Hands add figma I

00:50:07

typically share some parting thoughts

00:50:08

and I thought I'd bring that tradition

00:50:10

to config today

00:50:13

the future of design needs all of you

00:50:17

it needs more thinkers and Builders to

00:50:19

come together

00:50:21

the future needs you to spark

00:50:23

imagination into action

00:50:26

so

00:50:28

let's go build that future together

00:50:30

thank you for joining us this morning

00:50:32

and please enjoy config

00:50:37

thank you all

00:50:50

[Music]

00:51:13

[Music]

00:51:31

thank you

00:51:32

[Music]

Description:

Design is changing, and so are the roles all of us play in the process. This means rethinking product building from the ground up—from shifting mindsets to bringing design and engineering closer together to make great work. Figma’s biggest product launch of the year kicks off Config. Please visit https://config.figma.com/ to view ASL version of this Config 2023 session Figma is free to use. Sign up here: https://www.figma.com/ ____________________________________________________ Find us on ⬇️ Twitter: https://twitter.com/figma Instagram: https://www.facebook.com/unsupportedbrowser LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/ ____________________________________________________

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "Config 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "Config 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "Config 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "Config 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "Config 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "Config 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.