►
From YouTube: Design 101: Session 1 - Figma Basics
Description
The Digital Experience team learns about Figma and how it's used with our Slippers Design System
Digital Experience handbook page: https://about.gitlab.com/handbook/marketing/inbound-marketing/digital-experience/
A
Hello,
so
welcome
to
our
first
installment
of
design,
101,
I'm
here
with
the
engineers
from
the
digital
experience
team
in
inbound
marketing.
Over
the
past
few
quarters,
our
engineers
have
been
like
patiently
very
patiently
teaching
designers
on
our
team
how
to
get
so.
This
quarter
we're
flipping
things
around
and
we're
going
to
teach
design
engineers
a
little
bit
about
ux
and
design.
A
So
today
I'm
going
to
be
running
through
some
figma
basics
because
we
got
to
start
somewhere
me
a
bit
about
me
for
those
who
don't
know
me
who
are
watching
I'm
a
user
experience
designer
on
the
digital
experience
team.
I
am
not
a
figma
guru.
I
only
recently
started
using
figma
while
onboarding
onto
gitlab
tools.
I
do
prefer
prefer
it
now
to
the
tools
I
was
using
before
so
anyways.
A
A
A
So
you
use
figma,
obviously
to
view
designs,
pull
design,
specifications
like
values
and
export
svgs,
something
that
stood
out
is
some
of
you
said
I
don't
pull
css
values
from
figma,
because
they're,
predetermined
by
slippers-
and
some
of
you
says
you
do
so
just
for
us
designers
just
to
understand
your
process
like
when
you
do
cross
reference
with
tailwind,
which
one
is
your
source
of
truth.
Do
you
do
you
change
the
design
to
accommodate
like
the
code
to
accommodate
the
design,
or
do
you
use
tailwind
like?
What's
there.
B
I
usually
grab
whatever
like
I
look
at
what
the
design
says
like
if
it's
a
color
or
like
a
box
shadow
box
shadow,
is
a
big
one,
then
I'll
look
for
it
in
tailwind
and
grab
whatever
is
closest
until
usually
all
the
colors
are
there,
but
like
box
shadows,
I'll,
try
and
grab
whatever
the
closest
value
is
that
exists
until
then,
just
to
avoid
kind
of
bloating,
our
tailwind
configuration
file
so
that
there's
so
many
different
box
shadows.
That's
me.
A
That's
right,
so,
if
you
see
like
a
value
like,
we
got
rid
of
all
the
black
values,
so
if
you
see
something
that
accidentally
crept
crept
in,
that's
black
you're
still
going
to
use
the
333
value,
you're
not
going
to
be
like.
Oh
this
one
type
thing
needs
to
be
black
cool,
exporting
icons,
and
that
this
is
also
with
partner
logos
and
all
kinds
of
of
things
I
did.
I
did.
I
do
find
that
this
process
is
clunky
you're
using
figma
to
export
icons
that
already
exist
in
a
repo.
A
C
I
find
our
icon
process
is
disaster
right
now
we
have
duplicated
multiple
places,
there's
pngs,
there's
svgs
they're
everywhere
in
the
dub
dub
dub
repo,
and
we
also
have
what
there's
this
whole
other
repo,
where
they're
all
whoa
like.
Maybe
we
should
use
that
and
yeah.
We
got
an
improvement
from
that
and
the
logos
file,
like
I
found
logos
that
were
scattered
in
various
places
for
our
partner
pages
and
they
were
using
like
png
ones,
and
I
looked
a
little
deeper.
C
C
A
Sounds
good.
There
is
a
git
lab
moving
on
gitlab
figma
plugin.
I
heard
you
barker
loud
and
clear.
I've
used
it.
There
are
so
many
pros.
There
are
a
few
cons,
so
we're
going
to
reevaluate
how
how
to
use
this
plug-in.
I
think
the
biggest
concern
after
talking
to
our
other
designers
is
that
it
exports
single
pngs
and
that
kind
of
gets
confusing.
A
C
A
That's
a
great
yeah.
We
will
do
that
comments.
I
saw
some
comments
about
some
of
you
being
confused
about
comments
which
comments
they
should
be
looking
at.
All
of
that
we're
gonna,
you
know
as
design
the
designers.
Aren't
a
team
like
be
better
at
this,
but
you
shouldn't
be
really
needing
to
refer
to
the
commenting
tool.
A
Unless
you
ask
the
comment
and
are
waiting
for,
you
asked
a
question
and
are
waiting
for
an
answer,
and
even
then
we
encourage
those
discussions
to
be
in
the
issue
just
for
for
tracking,
though
comments
can
come
in
from
everywhere.
So
when
there's
like
a
really
important
conversation
being
had
on
a
component
or
whatever
you
know,
we
will
do
our
best
to
get
those
into
the
readme,
so
you
don't
even
have
to
really
refer
to
that
tool.
So
I
saw
a
little
bit
of
frustration
there
in
in
the
survey
all
right.
A
A
I
don't
see
anyone
in
there
yet.
Oh,
I
see
lauren
laura
okay,
so
I
just
wanted
to
quickly
show
you
that
there
is
a
sigma
desktop
app.
Some
of
you
may
or
may
not
know
that
it
exists.
It's
totally
your
call
doesn't
matter
which
one
you
use
I
prefer
desktop,
but
I
know
that
you
mostly
access
figma
files
through
links.
Not
you
know,
opening
figma
and
then
looking
for
stuff
is
what
I
you
know
understood
from
from
the
survey.
A
There
are
just
very
small
differences,
one
of
which
is
the
home,
so
I
just
wanted
to
call
that
out
so
in
in
the
interface
here.
If
you're
looking
for
other
projects
outside
of
the
projects
we
link
to
in
the
in
the
browser.
Sorry
browser
app.
You
click
here
on
the
desktop
app
it's
home,
which
is
a
lot
more
intuitive.
A
A
A
Oh
all,
right,
let's
go
into
the
file
so
you're
all
in
this
file.
You
can
do
whatever
you
want
in
here.
I'm
just
gonna
show
you
a
couple
things:
click
on
whatever
you
want
layers
over
here.
Most
of
you
are
familiar
with
this.
This
is
where
we
keep
our
our
work,
usually
nathan.
This
might
be
due
to
you
if
you
see
a
little
ship
icon.
A
It's
indicates
that
this
is
where
we
want
engineers
to
be
when
we
ship
something
and
then
we've
got
assets
here,
just
really
wanted
to
quickly
show
you
the
difference
between
the
layers
and
the
assets.
Just
so
you
understand
sometimes
why
things
are
the
way
they
are
in.
Figma
assets
are
connected
to
slippers,
so
if
I
want
a
button
or
a
resource
card,
I'll
pull
it
from
here
and
then,
if
I
want
to
edit
that
card,
you
probably
won't
need
to
do
this.
D
A
Exactly
so,
here's
the
library
here
so
this
little
book
and
the
assets
you
might
want
to
actually
check
your
settings
thanks
for
bringing
that
up,
because
by
default,
the
for
me,
product
design,
library
is
turned
on
and
the
brand
design
library
is
turned
on
it's.
This
is
too
many
things,
so
I
I
turn
them
off.
Unless
I
need
them
and
I
only
use,
I
only
turn
on
the
slippers
foundation.
A
No
problem,
I
also
wanted
to
show
you
the
difference
between
pulling
things
from
slippers
and
these
types
of
components
here.
So
I'm
going
to
zoom
in
here.
This
is
a
component
that
I
created.
So
the
reason
it
is
the
way
it
is
is
because
I
don't
want
to
have
to
recreate
things,
so
I
created
like
a
master
component
with
all
kinds
of
things
that
are
tied
to
other
components.
So
when
I
want
to
do
quick
iterations,
I
don't
have
to
mess
around
with
things.
A
This
is
why
again
so
many
things
are
grouped,
which
I
imagine
it
can
be
very
frustrating
for
engineers
to
look
for
things
and
grouped
things
so
here
this
component
lives
inside
my
files.
The
reason
that
is
see
it
lives
inside
my
file
here
in
component,
and
then
I
can.
I
can
change
a
color
and
it'll
change
that
one
color.
A
A
Okay,
so
let's
look
at
this
panel
here
now,
so
this
is
probably
the
panel
you're
most
familiar
with
inspect.
Everyone
said
they
use,
they
use
inspect,
that's
cool
I'll,
give
you
a
run
through
of
the
design
panel,
real
quick,
just
to
show
you
where
things
come
from
for
us,
and
this
will
answer
some
of
those
you
know
oddities
about
like
well.
Is
it
tailwind
it's
in
this?
So
we
only
have
access
to
the
slippers
type
stack
because
of
you
know.
I
turned
on
that
library.
A
A
A
So
when
you
inspect
it,
you
also
see
these
types
of
values
so
you'll
see.
This
is
a
perfect
example.
Here
you
see
this.
This
is
body
two
that
exists
in
tail
when
body
two
is
body
two.
I
had
to
create
this
new
thing,
because
this
is
obviously
a
special
thing.
So
then
you
you'd
have
to
inspect
this
and
figure
out
what
it
is.
It's
probably
not
going
to
be
moved
into
our
type
stack,
because
it's
like
a
snowflake.
B
I
think
the
text
drives
me
crazy,
because
yeah
you'll
see
like
body
body
two
or
like
heading
xxl
or
whatever,
but
like
in
our
tail,
when
we
call
them
like
slippers
text
extra
small
slippers,
like
small
super
text
based
medium
large
actual,
like
it
doesn't
quite
like
it's.
It's
not
mapped
to
like
display
like
I
always
have
to
look
at
what
the
actual
font
size
and
weight
and
whatever
is,
and
try
and
match
it
to.
What
do
we
have
in
slippers
because,
like
so?
Why
don't
we
match.
A
B
Yeah,
because
our
tailwind,
like
class
names
that
we
use,
we
can't
reuse,
display,
heading
and
display
heading
like
you've,
got
display
heading
as
a
heading
and
display
heading
as
like
a
base.
You
know
like
the.
We
can't
call
them
the
same
thing,
so
yeah
figuring
out
what
to
call
those
might
be
a
little
bit
better.
So
they
map
perfectly
to
tailwind
yeah.
Sorry,.
A
A
So
and
speaking
of
group
components-
and
all
of
that
here
are
I've-
listed
some
like
keyboard
shortcuts.
That
could
be
really
helpful.
I
heard
some
frustrations
there,
especially
with
these
components
that
it's
hard
to
kind
of
get
to
them.
So
command
is.
Is
your
bestie
over
here
command?
Is
gonna,
get
you
everywhere.
A
How's
every
doing
everyone
doing
with
the
alt
is
it
working
cool
cool
cool.
I
find
these
great
and
ruler
like
commands,
confusing
because
they're
different
from
ones
I've
used
in
the
past,
so
control
g
brings
up
the
grid.
This
is
like
the
most
important
thing
to
to
reference
ruler.
You
can
use,
I
don't.
I
don't
have
any
rulers
in
here,
but
if
you
want
the
ruler,
it's
shift
r.
I
don't
know
if
you,
if
I'm
controlling
your
rulers,
but
you
can
try
it
out
and
then
again
command
for
dragging.
A
Ungrouping
items,
I
don't
think
you
with
the
command.
There
were
questions
about
that
with
the
command
control.
You
need
to
really
ungroup
items,
it's
tricky
with
these
components
to
ungroup
them,
because
you
have
to
detach
them
from
their
thing
and
then,
if
they
get
updated,
so
I
wouldn't
recommend
ungrouping
anything
you
see
in
the
files,
but
brendan
had
requested
like
a
different
file
to
kind
of
ungroup
everything.
So
you
could
always
make
more
places
in
here
by
clicking
this.
A
B
A
But
it's
also
tied
to
the
left
so
that
we
can
do
mobile
and
desktop
versions
without
having
to
create
more
components.
So
auto
layout
is
something
we
have
to
play
around
with
with
buttons
as
well,
there's
a
bunch
of
auto
layout
and
buttons
so
that
we
can
figure
out
the
padding
around
them
yeah.
So
don't
maybe.
B
A
The
grid
isn't
labeled
grid
you
the
only
way
to
access
it
is
to
access
the
I
have
here.
I
wrote
here
artboard
frame
to
me:
it's
always
going
to
be
an
artboard,
but
figma
calls
it
a
frame.
So
if
you
want
to
see
these,
you
know
high
level
things
just
click
on
the
frame
and
then
it
it
should
show
up
what
you're
looking
for
should
show
up.