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