How to Setup a Global Swatch in Webflow to Supercharge Your Workflow

in today's video i'm going to be doing a
little mini tutorial on what global
swatches are and how you can use them
inside of your webflow project so
without further ado
let's get into it
[Music]
hello friends welcome back to the
channel if you're new here my name's
connor and on this channel i help people
who cannot go build their own online
businesses with tools like webflow
airtable and zapier so in today's video
i want to do something slightly
different and i want to show you a quick
little tip on how you can speed up your
workflows inside of webflow
using global swatches so global swatches
is something that was a little bit
confusing to me
initially but as soon as you kind of
figure out how you can use them it can
really be an absolute game changer when
it comes to designing beautiful
websites so i'm not going to beat around
the bush too much we're going to dive
straight into it but of course before
we do please do me a quick little favor
if you haven't already subscribe to the
channel if you want to learn more about
how you can use tools like webflows
build
neat little online businesses also i'd
be very much appreciate if you could
like this video if you find it useful
but with all of that out of the way
let's get into it so what are global
swatches and what problem do they solve
now say for example you're working on a
webflow project and you decide that you
want to change the color scheme on it
now the problem that you have
is when you set up certain class names
you might apply
colors to it and if you then want to go
ahead and change that color you'll have
to go through every single class that
currently has that color applied to it
and then manually change it down here in
the typography section so this can apply
to fonts it can apply to backgrounds
buttons or whatever you can think of
and going through every single element
individually and changing those colors
can be incredibly time consuming there
is
however a shortcut that you can use and
that shortcut is global swatches
so the way that you can access your
swatches is through your color palettes
so all you need to do is just click into
them
and then what you'll see is that if you
have a certain color
element selected you can actually save
that color to be reused later on
by just clicking on the plus button down
in your color palette
and what that will do is it will create
a swatch for you
now whenever you then go ahead and apply
a color to a particular class you can
just jump
in and instead of just randomly picking
one of the
colors that you can get by just dragging
around the color picker tool
you just go and select the color that
you added to your swatch so in my case
the
teal color now that is usually what most
people do but then if you want to go
ahead and then
change this teal from say a green to an
orange then instead of having to go for
every single element
and updating the color what you can do
is you can just jump in here
you can click into your swatch or your
um
color swatch and then click on the edit
button
and then what you can do is as soon as
you start changing the color
it will automatically apply it to all of
the elements that are currently using
that swatch so a tip i have for you when
working with swatches is to actually set
up a style guide page on the project
that you're working on so that you can
then go ahead and edit all of the
different colors that you might use for
your brand so in this case you can see
here i've got all of my blacks and all
of my grays that i might use for
backgrounds or whatever i've got a
few different colors for things like
success
messages or error messages but probably
the most important one
is the colors for your brand so the way
that i approach this
is i just go in here and i start
selecting the colors that i want to work
with
and then as soon as i have picked the
colors that i want to work with i just
go and add it as a swatch
so say for example i want to go and add
an orange color
as my new brand color what i do then
is i just go ahead click the plus button
and i'm going to call this
brand orange and then i can go through
all of the different elements so say for
example the darker version of my brand
orange
and then just select the color that is
currently selected
and then create a darker version of it
by just dragging it down
and then clicking on the plus button and
then just call it
dark brand and then you can just go
ahead and repeat the process where you
just again jump in here
select the latest color that you have
and then just make it slightly darker
save it and you're good to go and again
just to really bring home why using
global swatches is so awesome
because as soon as you start changing
your color it will automatically
update all of the different elements
regardless of the class name that that
particular element has
and that is my quick little tip on how
you can use global swatches to really
speed up the processes of building
webflow sites
this is something that i didn't actually
learn for the first two years of me
using webflow so hopefully this was
useful to you hopefully you now
understand what global swatches are and
how they can be used
if you did please leave a like on the
video other than that thank you so much
for watching the video and i'll see you
back here for the next one

‍