►
From YouTube: Tufts Capstone Project w/ GitLab: Week 7 (03/15) meeting
Description
As part of https://gitlab.com/gitlab-org/gitlab-design/-/issues/2178, this is week 7 of the Tufts / GitLab Capstone project. Gina Doyle, and Ben Leduc-Mills meet with the Tufts students: Calisa, Claudia, Emmeline, Melinda, and Alex, to review student questions and deliverables.
B
I,
don't
think
so.
We
mostly
just
wrapped
up
our
Journey
map
and
personas,
but
she
saw
a
little
bit
of
last
time
with
our
Discovery
research,
but
it
was
a
part
of
our
latest
deliverable,
so
we
Revisited
it
with
stuff
that
we
learned
from
the
usability
testing
and
made
an
additional
Persona
and
empathy
maps
and
whatnot,
so
basically
just
finishing
the
last
of
the
deliverables
that
we
need
before
we
move
into
prototyping,
so
I
think
right
now.
B
A
A
Cool
great
got
it
all
right,
so
the
file
that
you
should
open
up
when
you
get
into
figma
looks
like
this
and
you
can
just
duplicate.
Well,
you
could
originally
I
was
going
to
have
you
duplicate
the
entire
file.
So
you
would
add
that
to
your
drafts,
but
you
can
also
duplicate
in
here.
It
doesn't
really
matter
as
long
as
you
don't
I'll,
just
name
this
one
mine,
and
then
we
won't
get
confused.
Okay
before
I
start
have
any
of
you
used
figma
before
yes,.
D
A
Cool
all
right,
so
you
know
typically
like
how
to
navigate
around
it.
What
we'll
be
doing
specifically
is
just
looking
at
like
the
component
library
and
how
to
use
that
and
how
that
matches
up
with
the
actual
pajamas
code
as
well.
They
make
it
pretty
easy
to
do
that
at
gitlab,
which
is
great
so
you're
going
to
go
to
this
file.
C
A
E
E
A
E
E
A
E
A
E
E
E
A
A
C
A
E
A
There
it
is
yeah,
okay,
all
right
so
to
retract
all
of
those
steps.
I'm
gonna
write
it
in
that
board,
so
you
definitely
need
to
make
a
a
full
duplicate
of
that
test.
File
and
I'm
gonna
go
back
up
here,
so
you're
all
going
to
want
to
go
up
to
this
little
title
up
here
and
just
say
duplicate.
So
it's
going
to
be
your
own.
It
will
be
saved
in
your
own
drafts
in
figma.
A
And
then,
once
you
do
that
you'll
want
to
open
up
the
component
Library
and
duplicate
to
your
drafts.
So
you'll
have
that
as
your
own
draft
I'll
write
that
right
here
duplicate
this
in
your
drafts
and
then
you
want
to
go
back,
I
believe
it's
still
in
the
title.
It's
you
go
back
up
and
it's
published
Library
that
should
be
in
that
duplicated,
Library,
published
Library
and
then,
when
you
go
back
to
the,
what
did
I
call
it.
Tufts
Capstone.
A
D
D
D
E
A
Okay,
nice,
that's
good
to
know
so,
maybe
after
this
call,
you
could
do
that
too.
If
you
can't
access
everything,
I'm
gonna
just
give
a
really
quick
overview
about
this
whole
thing
that
I'm
writing
here.
Basically,
what
a
lot
of
companies
do
with
Design
Systems
is
they
try
to
match
what
is
in
the
code
with
what
you're
using
in
the
design
program?
A
So,
for
example,
in
figma,
with
this
button,
I
brought
in
as
a
component
in
the
code
which
is
on
our
pajamas
website,
we
show
each
button
type
is
primary
secondary
or
tertiary,
and
then
you
have
default
confirm
danger,
and
these
are
all
different
variants
and
categories
that
you
apply
on
the
code
side
and
these
actually
appear
in
figma
as
well
in
this
bar
over.
Here
you
can
change
the
category
which
would
change
for
looking
at
this
single
button.
A
E
C
A
Okay,
all
right:
let's
do
that
so
I
just
took
a
screenshot
of
the
screen,
because
I
know
this
is
part
of
the
onboarding
flow
because
so
I
figured
it
would
be
a
good
one
to
use
I'm
going
to
move
this
off
all
right.
So
the
first
thing
I
would
start
with
always
is
when
you
create
a
new
frame
and
you
click
frame,
you
can
choose
your
sizes
over
here.
A
A
A
A
This
one
default-
this
is
super
annoying
I.
Don't
know
why
it's
doing
that
I'm
not
making
a
default
I'm
going
to
make
it
not
bold,
that's
going
to
be
my
hacky
way
of
doing
it
and
then
for
cicd
at
least
I
can
expand
it
and
then
I
have
to
type
in
CI
CD
getting
rid
of
this
badge
because
it
doesn't
apply
for
the
icon.
We
have.
Each
navigation
has
its
own
icon.
A
This
comes
in
the
component
Library,
we
scale
all
of
our
colors,
so
any
color
family
like
Grays
Blues
purple,
whatever
we
always
have
go
from,
like
gray
50
to
grade
950.
and
just
for
our
icons
in
general
for
design
system,
we
use
gray
700
and
then
for
our
text.
We
always
use
gray
900,
so
you'll
see
those
two
colors
a
lot,
but
for
this
example
here
we
have
Pipelines
and
editor
and
jobs.
A
Was
a
swelling
mirror
and
then
I
don't
need
any
of
these
other
Sub
menu
items.
So
I'm
going
to
highlight
and
delete
and
everything's
going
to
move
for
me,
thankfully,
and
then
I'm
going
to
make
editor
itself
selected
because
I
know
that's
what
I'm
on
all
right.
Now
that
we've
done
all
of
that,
we're
going
to
start
with
the
breadcrumbs
so
I'm
going
to
look
that
up
in
the
library
we
have
these
our
spacing.
Typically,
we
use
you'll
see
in
a
lot
of
websites
the
websites
they
use
grids.
So
it's
a
lot.
A
The
spacing
is
very
consistent
because
of
that,
so
the
page
layout
we
use
is
usually
16
pixels
with
everything
so
I'm
going
to
bump
it
down
16
and
to
the
right
16.,
quick
tip.
If
you
want
to
make
it
easier
for
you
to
you,
for
your
nudge
amounts
to
actually
equal
eight
pixels
each
time
you
can
change
them
here
they
default
to
10.
So
you
would
have
to
change
them
to
make
it
easier
to
move
by
eight.
B
E
E
A
A
A
A
A
If
you're
looking
at
the
layers,
they
you
see
avatars
whenever
I
press
delete
so
I'm
going
to
press
delete
here,
see
how
it
just
hides
the
layer.
So
that's
all
it's
doing.
You
can
always
bring
it
back.
If
you
want,
it
doesn't
like
remove
it
fully
from
the
component
cool,
so
I'm
going
to
do
the
same
thing
with
this
one,
but
I'll
just
use
the
hide
button
over
here.
It
does
the
same
thing:
okay,.
A
A
So
if
you
take
out
a
default
button
here
and
you
change
the
type
to
a
drop
down,
you'll
get
a
drop
down,
I
think
it
said
master
and
I
think
it
had
an
icon
too.
All
of
our
buttons
and
drop
downs.
They
come
with
a
bunch
of
different
things.
You
can
turn
on
like
an
emoji
or
an
icon,
and
all
that
can
be
shown
in
the
layers
panel
over
to
the
left.
A
These
are
the
things
that
I
was
deleting
like
in
the
breadcrumbs,
for
example.
So
if
I
turn
the
icon
left
on,
you
can't
see
it
because
the
icon
is
white
for
some
reason,
so
in
the
selection,
colors
I
would
change
this
to
I.
Think
it's
gray,
700,
but
I'm,
not
even
sure
I
might
be
gray
500,
because
it
looks
like
it's
a
little
lighter
than
the
text,
so
I'll
change
it
to
grade
500..
A
A
A
E
E
A
A
A
A
I,
don't
even
know
if
I'm
seeing
it
right
here-
oh
yeah,
it's
four
pixels,
so
you
can
filter
this
whole
list
down
by
showing
whatever.
So
that
will
give
me
now.
I'll
change
that
rectangle
to
have
four
pixel
radius
for
all
the
sides
and
then
another
good
thing
about
this
is
it
shows
you,
the
color
that
you're
supposed
to
be
using
so
the
background
color
here,
it's
always
shown
in
RGB
first,
but
if
you
hold
shift.
A
A
A
and
then
I
I
just
know
that
all
of
our
borders
are
always
gray,
100,
so
I'm
going
to
change
the
stroke
to
Gray
100,
that's
another
thing:
I
can
give
you
on
the
cheat
sheet
and
then
again.
Another
thing
I
know
is
that
a
lot
of
our
spacing
typically
is
like
16
pixels
from
the
other
thing
from
the
other
element,
so
I'm
just
making
this
all
16.