Figma Config 2022 Keynote Highlights

Introduction

Highlights from Figmas Config 2022 conference, which included 100 speakers representing every continent except Antarctica, sharing 68 talks for attendees from nearly every country.

Updates to Figma include:
1. Dark mode
2. Redesigned auto layout
3. Component properties
4. Spotlight
5. New @jira, @asana, and @github widgets for FigJam
6. Variable fonts
7. Spring animation
8. Individual strokes

Full Transcript

hello everybody my name is dylan i’m the
ceo and co-founder of figma and as of
right now welcome to our first 24-hour
config we have 68 sessions with 100
speakers and i feel so lucky to be
together with all of you so we’re gonna
open up today and start in fig jam one
feature that we recently introduced is
sections is a good way to categorize and
group ideas
into different sections
first i’m gonna show off our new jira
widget
uh with this widget i can take ideas
from fig jam and bring them right into
jira and i can take tasks from jira and
bring them into fig jam and so we’ve
also introduced two other widgets as
well
but for asana and for github integration
with the asana widget on the left
i can use that to also
bring tasks and projects in from asana
or turn stickies into tasks and with
this github widget on the right you can
create new issues and also bring new
issues
right into fig jam big gym is all about
collaboration play and that spirit and
we think that widgets are a really good
way to do that one of them that i’m
excited to share is this greeting card
widget so i have a green card here from
tom as to dillon i think it’s going to
turn over and it says good luck in the
live demo no pressure we also have here
a voice memo widget from burst bell hey
dylan have you mentioned how easy it is
to build widgets anyone in our community
can now build widgets and to make that
easier we’ve made a new figma plugin
called widget code generator to help
bring widget ideas to life even faster i
can copy that code and i can add some
logic in
and this is basically code that is
needed to render a widget
hopefully this makes it even easier to
go from concepts in figma
to widgets in fig jam today we’re
announcing a redesigned auto layout
which is going to be both easier to use
and also more powerful and we’re taking
a look at designs for the nike run club
app you can see that we now visualize
spacing between objects on the canvas
this makes it easier to identify which
frames have auto layout you can simply
scrub values to change spacing now right
on the canvas you can even hold shift if
you want to
and it will respect your nudge settings
in figma i can change my padding
i can also press alt
to change padding on both sides at the
same time
today we’re announcing absolute
positioning for auto layout
and you can turn auto layout absolute
machine on
by pressing this button on the upper
right hand side and i can drag this
around in a freeform way exactly where i
want without following the rules of the
auto layout stack and i’m going to take
this new button
and i’m going to put that badge on the
upper right hand side
the second thing we’re announcing today
that auto layout now supports is
negative spacing between items
so we can simply scrub it up on the
canvas
now that i’ve scrubbed up on the canvas
i can get it to exactly where i want uh
with my negative spacing variable fonts
are just so cool and ever since they’ve
come out i’ve won them in figma so i’m
really glad we’re finally launching this
feature if we go into our type settings
i can switch over to variable
if i take the weight here
i can actually control the weight and
just in all the way
from the hairline version
to
the extra bold version we can go from a
condensed version
all the way back to regular width again
and today we’re announcing an
improvement to outline mode that will
enable you to grab behind objects
so instead of
searching the layers panel you just go
directly to this text and you just press
shift o to enter outline mode you’ll be
able to see a skeleton x-drive version
of your design and when you’re designing
interfaces like this it’s sometimes
helpful to add a subtle divider we’re
excited to announce individual strokes
in figma individual strokes you’re going
to be able to control all four sides of
an object i’m going to add additional
stroke here i’ll make it weight two i’m
gonna make this on the bottom as well
and i’ll use the nike red
and now i’ve got a great way to show the
selection state today we’re announcing
in addition to smart animate this will
allow you to create spring animations in
figma we have a number of different
presets here as well from gentle to
quick to bouncy to slow all the way to
custom spring i will make this
a really nice spring animation here
and i’m going to go into our prototype
if i go in
i can now see how that looks and we’ve
got a custom one we’ve just tweaked
already to make it just right
today we’re announcing
password protected links in figma
available on all paid plans and if i
want to make it so that it has now a
password that protects the link
i can go from anyone with the link to
anyone with the link and password and
now if i share this with anyone they’ll
have to enter the password in order to
access the prototype everything will be
safe and secure we’re excited to
announce a new feature that builds on
variants called component props you can
see right here that we’ve been able to
reduce this button from
variants to just 36. hopefully component
props make it easier for you to maintain
your libraries and also use them as well
hopefully you’ll see that we’ve made
this consumption experience way easier
to understand
and hopefully component props make it
easier to maintain your libraries and
also use them as well we have a few
features to share with you
super fast we know it’s important for
you to have your favorite files at your
fingertips so we’ve now made it easier
for you to favorite a file and have it
show on the left hand side nav we’ve
also made some improvements to branching
and merging you can now put a branch
into a review state you can add
reviewers and others can suggest changes
and it should make it easier to
communicate what state a branch is
currently in we’ve made a number of
improvements to our international
keyboard shortcuts we now support
different keyboard types better and
commands that are previously
inaccessible should work
this is available now in beta we’d love
your input thing was all about
collaboration and sharing the spotlight
with others today we’re announcing an
improvement to the way that multiplayer
works i will now be following jake in
observation mode i can follow him around
and you can see that people are typing
at any point i can also click my own
avatar
and press spotlight
and now people will start following me
and as i move around they’ll now be
observing me as i have the spotlight
alright one last thing
uh
y’all is it possible get the lights
turned back on
anyone
okay well maybe this is the perfect time
to share
uh as many of you have already noticed
that figma now has a dark mode so many
people have asked for this and we’re
glad to finally give you the choice the
team has worked hard to refine every
surface in figma’s ui from the file
browser to the editor sigma developers
can now update their plugins to support
dark mode we cannot wait to hear what
you think
that’s a wrap everything that we’ve
announced today is available for use
right now here’s a recap
big jam widgets widget cogenerate
plug-in auto layout variable fonts
outline mode individual strokes spring
animations
password protected links component props
favoriting files review states for
branching international keyboard
shortcuts dark mode and our new
spotlight feature thank you to everyone
at figma who’s been a part of this and a
huge huge thank you to our incredible
amazing amazing community
without you we would not be here i hope
you have an amazing 24 hour config thank
you all so much

NOW PLAYING
Figma tutorial: What’s new in Auto layout #Config2022
Figma