►
From YouTube: Slippers Design System Walkthrough
Description
A overview of the Slippers Design System, how it's built, how it's used, and how it's published.
https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui
A
Going
here
with
miracle
nathan
and
we're
gonna
walk
through
our
slippers
design
system
go
over
what
it
is
where
it
is,
how
it's
built,
how
it's
getting
used
just
like
high
level
overview,
what
slippers
is
and
how
the
digital
experience
team
is
using
it.
So
I'm
gonna
pass
it
over
to
nathan
and
he's
gonna
start
off
where
the
repository
is.
B
Thanks
lauren
all
right
I'll
jump
and
share
my
screen
here,
yeah.
So
if
you
notice
here,
we
have
kind
of
this
parent
repository
that
houses
a
bunch
of
our
smaller
ones
and
one
of
them
being
slippers.
So
slippers
is
our
design
system.
That's
used
on
the
marketing
site,
it's
kind
of
imported
into
both
our
navigation
and
the
actual
marketing
side
itself.
B
B
A
B
Anyways,
let
me
move
this
bar
here,
so
this
is
what
it
looks
like
we're
still
still
working
on
it.
It's
a
work
in
progress,
it
never
ends.
Design
systems
are
never
never
finalized,
but
this
is
our
brief
introduction
and
we
can
jump
into
just
kind
of
some
foundational
elements
some
be
in
color.
So
these
are
all
the
colors
that
you'll
see
throughout
the
marketing
site.
We
have
some
spacing
so
everything
on
the
site
generally
falls
within
the
spacing
so
you'll
see
that
buttons
or
typography
are
always
within
one
of
these
presets.
B
We
also
have
typography
with
our
nice
font,
and
these
are
the
type
the
sizes
of
typography
we
have
on
the
site,
and
then
we
can
jump
into
maybe
a
button,
and
so
a
button
is
is
a
component
not
so
much
a
foundation,
but
the
button
is
composed
of
the
foundation,
so
we
have
a
color
that
you
saw
earlier
in
the
foundation.
We
have
typography
that
you
saw
earlier
in
the
foundation
and
we
pieced
them
together
to
create
a
reusable
component
that
we
can
use
throughout
the
website.
Oh.
B
C
A
A
B
So
we
have
weekly
issues
or
bi-weekly
issues
to
to
synchronize
the
changes
that
are
made
from
figma
over
to
storybook
and
then
we'll
do
releases
with
storybook
or
with
slippers.
But
I
guess,
jumping
into
from
the
design
side,
to
the
more
engineering
side
is
that
this
design
system
is
an
npm
package,
and
so
it's
hosted
here
called
slippers
ui,
and
so
what
happens
is
when
we
make
changes
like
we
said
earlier
about
synchronizing
the
figma
with
our
storybook.
We
need
to
publish
these
changes,
and
so
we
have
multiple
repositories.
B
Like
I
said,
with
the
navigation,
we
have
the
main
marketing
site
and
we
have
the
slippers,
and
so
what
we
do
is
we
publish
slippers.
So
when
we
make
changes,
we'll
decide
hey,
maybe
after
six
changes
or
every
two
weeks,
we'll
bump
the
version
number
and
so
you'll
see.
Here
we
have
a
lot
of
versions,
we've
been
we've
been
iterating
a
lot
and
so
we're
currently
on
version
2.1.5
and
as
we
make
changes
we'll
bump
that
to
2.1.6,
and
then
that
new
version
can
be
imported
into
any
repository.
B
It
doesn't
have
to
be
just
the
navigation
or
the
marketing
site.
It
could
be
your
own
project
at
home
and
you
can
import
it
and
see
it
there,
and
so
we
can.
We
can
look
at
maybe
an
example
page
on
our
website
on
the
marketing
website.
Backslash
customers
and
you
can
see
these
are
all
the
typographies
that
you
saw
in
the
design
system.
B
These
are
the
buttons
that
you
saw
as
the
primary
one
that
you
saw
over
here
in
in
storybook
the
exact
same,
and
so
what
this
allows
us
to
do
is
have
consistency
throughout
the
whole
website,
and
it
also
makes
it
a
lot
easier
because
we're
essentially
just
using
lego
blocks
to
to
create
these
web
pages
yeah.
I
think
that
covers
most
of
it.
Do
you
have
any
any
questions.
B
B
Yeah,
actually,
I
should
say
this:
we
use
yarn
in
the
the
main
marketing
website,
and
so
there
is
a
bit
of
inconsistency
which
I
know
there's
an
issue
in
the
slippers
repository
to
switch
from
using
npm
to
use
yarn
and
so
most
of
the
commands
right
now
in
slippers
like
in
the
actual
slippers
repository
itself
are
through
npm
and
then
in
the
consuming
sites.
So
the
marketing
site
and
the
buyer
experience
we
use
yarn,
and
so
there
is
an
issue
to
console
it
at
all
to
use
yarn.
B
So
here
this
is
our
side,
navigation
component.
So
this
one's
a
little
more
complex,
the
side,
navigation,
isn't
a
component,
it's
kind
of
a
composition,
and
so,
depending
on
what
philosophy
you
use,
it
could
be
an
organism
it
could
be
whatever.
But
essentially
it's
just
a
combination
of
building
blocks.
So
let's
just
open
it
up
here
in
a
separate
page.
So
this
side,
navigation,
as
you
scroll,
will
highlight
other
things
and,
as
you
can
see,
the
composition
of
typography
is
the
composition
of
buttons.
B
It's
a
composition
of
all
sorts
of
other
things
from
the
design
system
that
we
pulled
together
to
make
kind
of
a
a
new
component,
and
then
this
can
be
imported
into
whatever
repository.
So
the
issue,
I
guess
with
including
these
into
design
systems,
is
that
you
should
look
at
a
design
system
as
kind
of
foundational
blocks
and
that
any
company
any
product
anything
anyone
can
use
it.
And
so
you
don't
want
to
include
business
logic.
And
although
this
doesn't
include
business
logic,
it
is
getting
pretty
specific
and
so
it
borders
on.
B
Should
it
exist
in
a
design
system
or
should
it
not.
In
this
case,
we
chose
to
do
so
because
it's
really
only
us
using
it
and
we
don't
promote
the
design
system
to
be
used
by
others,
even
though
they
can
be
so
that's
that's
kind
of
the
reasoning
behind
it
and
what
it
is,
but
in
the
development
of
this
we've
also
added
just
some
cool
little
visualizations,
so
you
can
see
the
intersectional
observer.
We
can
get
super
complicated,
but
pretty
much.
These
are
just
for
testing
purposes.
B
Yeah,
so
a
component
is
the
basic
building
block.
It
is
one
separate
entity.
So
if
you
look
at
a
button,
it
is
just
one
one
unit
where
a
composition
is
a
combination
of
of
units
like
the
basic
lego
blocks.
So
you
almost
look
at
it
as,
like
I
don't
know
the
button
is
that,
like
four
by
two
lego
block
and
the
side,
navigation
is
a
star
wars.
I
don't
know,
tie
fighter
that
you've
made
in
lego.
So
it's
just
a
composition
of
of
the
blocks
together.
B
Yeah,
I
can,
I
can't
pull
up
an
issue
right
now,
because
it's
going
to
take
a
while
to
find
it,
but
we
have
been
rolling
out
miners
minor
versions,
version
bumps
kind
of
infrequently.
So
if
we
need
it,
we've
been
pushing,
but
we
were
on
a
two-week
cadence
for
a
while
and
we
kind
of
fell
off
and
in
that
two-week
cadence
we
were.
B
We
had
a
parent
issue
that
had
separate
issues
for
the
import
and
export
and
then
in
there
you
could
see
the
release
notes.
So
you
can
see
all
the
changes
that
happened
during
that
that
version
bump.
The
plan,
though
we
have,
we
have
issues
to
do
all
this
we
just
haven't
had.
The
bandwidth
recently
is
to
automatically
label
mrs
and
components
so
that
the
kind
of
like
the
release
posts
or
the
the
change
log,
whatever
you
want
to
call
it
will
be
automatically
generated.
B
And
also
to
automate
the
the
imports
or
to
at
least
create
the
issues
and
create
the
mr,
because
right
now
it's
a
fully
manual
process,
and
I
think
I
timed
it.
It
took
like
35
minutes
to
do
the
whole
thing
which,
if
you're
doing
35
minutes
every
week
or
every
two
weeks
it
can
add
up
or
if
it's
automated,
we
can
save.
Let's
say
30
minutes,
30
minutes
a
week
or
30
minutes
every
two
weeks.