►
From YouTube: Pajamas UI Kit: Component Organization
Description
Figma now has the capability to combine multiple component variants into a single collection. This makes it easier to create, discover, and use components in all their variants, with all their available options. This is a quick overview to how we’re organizing components in Figma, and also a demo of Figma’s new Component Variants feature.
Also take a look at Figma’s Variants Playground file → https://www.figma.com/community/file/903303571898472063/Figma-Variants-Playground
And finally, here’s GitLab’s Figma Community page → https://www.figma.com/community/file/781156790581391771/GitLab-Component-Library
A
The
new
component
variants
feature
that
figma
just
released
and
showing
how
we're
migrating
some
of
our
components
to
make
use
of
that,
so
that
it's
easier
for
designers
to
use
another
benefit
of
this
is
that
in
use
it's
it's
in
practice,
it's
actually
going
to
mirror
what
we
have
in
storybook,
so
we
use
storybook
with
our
view,
components
and
you
can
see
over
here.
We
have
a
badge.
A
We
have
different
variants
that
are
available
different
sizes
and
we're
going
to
be
able
to
now
mirror
that
in
an
actual
use
case
in
figma,
and
I'm
pretty
excited
about
that.
Just
to
take
a
quick
look
high
level
of
how
we
organize
items,
we
have
a
base,
variance
and
instances-
and
this
is
this
variance
here-
we'll
we'll
get
rid
of
that
in
a
little
bit.
A
But
this
is
how
we've
traditionally
organized
it
so
that
in
the
assets
panel,
if
you
go
to
button,
for
example,
button
variants,
you
see
all
the
different
options
the
naming
was
using
page
and
frame
and
layer
name
to
help
cascade
that
for
the
layers
panel.
Our
goal
will
be
to
greatly
clean
this
up.
You
can
see
right
now
badge.
A
I've
got
a
little
bit
of
of
pre-work
that
I've
done
so
it
doesn't
organize
it
into
subfolders
anymore,
but
you
can
see
there's
tons
of
options
there
and
we're
going
to
eliminate
that
down
to
just
a
single
one
and
I'll
show
you
how
we
do
that
so
first,
I
want
to
start
with
base.
We
use
base
components
just
as
foundation
for
the
rest
of
ours
that
we
build
out.
So
in
other
words,
it
makes
it
a
lot
easier
to
just
change
properties
globally
and
have
it
cascade
and
propagate
throughout.
A
A
So
you
can
see.
I
do.
I
do
have
a
little
bit
of
naming
pre-done
in
here
and
just
a
note
about
that.
If,
if
you
want
there
is
a
figma
variance
playground
file
that
I'll
post
a
link
to,
but
you
can
also
go
through
that
figma
and
they'll,
give
you
some
more
more
details
about
the
naming
that
happens
when
you
use
the
new
component
variance
feature,
and
in
this
case
there's
there's
key
value
pairs
for
the
base
components.
A
There's
only
only
two
sets
the
type
which
we
have
default
or
pipeline
badge
and
then
the
size
when
we
have
three
sizes.
So
let's
just
jump
right
into
this.
This
is
how
it's
organized
today,
it's
a
separate
frame,
I'm
going
to
actually
just
select
these
three,
these
six
base
components
you
see,
they've
got
this
new
option
over
here
this
button,
I'm
gonna
click
that
combine
this
variance.
A
You
can
see
already
what
happened
in
these
key
value
pairs.
Is
it
created
a
type
and
a
size,
and
we
can
actually
organize
these
now
by
the
order
we
want
them
to
appear
in
a
drop
down
menu,
and
so
what's
the
the
benefit
of
this
is
now
that
we
have
this
it'll
propagate,
also
that
naming
throughout.
So
I'm
just
going
to
name
this
as
our
convention.
Let's
do
base
badge
the
underscore
at
the
front
means
that
this
will
not
be
published
to
the
library.
A
A
A
Let's
see
here,
I'll
pull
up
the
assets
panel
and
if
I
choose
oh,
let's
do
this
accordion,
for
example,
we'll
drag
that
over
you
can
see
here
in
my
properties
panel.
I've
got
the
accordion
and
I've
got
these
simple
capabilities.
Now
I
could
do
expanded
collapse.
That's
changing
the
different
variants
that
are
associated
with
that
component
and
so
I'll
be
able
to
do
something
similar
with
these
and
make
it
easier
at
point
of
use
all
right,
as
you
can
see
right
now,
it's
current
state.
A
I've
got
all
these
things,
grouped
I'm
going
to
go
ahead
and
I'm
just
going
to
drop
the
auto
layout
in
here
ungroup
all
of
these,
let's
ungroup
them
all
again.
So
we
get
down
to
the
single
layers
here
see
I've
got
all
my
symbols.
Now,
with
with
our
badges,
we
have
two
variants
that
are
two.
I
should
say
categories
that
I
do
want
to
keep
separate.
One
is
for
pipeline
and
the
other
is
for
just
our
default
badges
and
so
we'll
handle
those
separately.
I
think
it
was
in
this
case.
A
It
makes
sense
to
keep
them
apart,
because
if
we
look
at
key
value
pairs,
they
should
match
all
the
way
through.
So
every
one
of
these
can
have
icon,
true
false
it
can
have
a
type
and
it
can
have
a
size.
If
we
jump
over
here,
we
can
see
that
the
icon
is
always
persistent
and
then,
instead
of
a
type
we
have
more
of
this
not
found
created
skip.
So
it's
a
little
bit
different.
A
A
Go
ahead,
combine
them,
and
you
can
see
now
that
I
have
a
category
or
a
key
value
pair
for
type
and
all
the
options
for
size
and
all
the
options
and
icon,
true
false,
which
is
binary,
which
creates
that
toggle,
which
I'll
show
in
a
minute.
What
I
want
to
do
first
is
I
actually
want
to
rename
this
to
variant
and
that
will
match
our
knobs
in
storybook
and
it'll.
It'll
make
a
little
more
sense
here
in
a
second,
when
I
show
how
you
use
this.
A
Another
thing
I
want
to
do
is
I
want
to
order
these
based
on
the
hierarchy
that
I've
defined
visually,
so
I'm
going
to
start
with
neutral,
muted,
neutral
that
moved
around
all
right
info
success,
warning
and
danger
sizes
same
we'll
start
with
small,
medium,
large
and
icon.
I
like
to
start
with
true,
then
false.
A
So
if
I
go
over
to
layers,
I
actually
want
to
click
on
this
here.
I'm
just
going
to
call
this
a
badge
all
right
now,
if
I
go
to
assets
panel,
I'll
see
badge
here,
there's
only
one
item
and
so
let's
just
go
over
to
a
empty
spot
here.
What
happens
when
I
drag
this
now
onto
my
design,
as
you
can
see,
I
have
this
option
to
say:
okay,
it's
a
badge
here:
what's
the
variant
what's
the
size?
A
A
So
that
one's
taken
care
of
as
far
as
that
group,
let's
go
ahead
and
do
the
same
with
our
pipeline,
we'll
select
them
all
combine
this
variance
again.
We've
got
these
options
that
we're
going
to
reorder
a
little
more
tedious
here,
there's
just
a
few
more
options:
let's
see,
you're
not
found
created.
A
A
I
want
to
rename
this
to
I'm
just
going
to
call
this
pipeline
badge.
So
if
I
go
to
my
assets
panel,
you
can
see.
I
only
have
two
options
now,
so
we
took
a
list
of
almost
100
down
to
two.
If
I
throw
a
pipeline
badge
on
here,
you
could
see
that
I
can
very
easily
say.
Oh
you
know
it's.
This
is
the
variant
and
then
sizing,
etc
so
very
useful.
A
My
frame
I'll
just
organize
them
over
here
a
key
thing
to
point
out
through
this
whole
process.
Nothing
has
changed
in
my
actual
instances,
so
there
are
no
visual
changes.
Really.
This
is
a
lot
of
stuff
under
the
hood
that
change
organization,
so
that
at
point
of
use
it
becomes
easier,
but
it
hasn't
changed
any
of
the
presentation
or
existing
components
that
I've
used.
So
it
should
be
safe,
updating
your
library
and
bringing
in
the
changes,
but
mileage
may
vary
on
that
one.