What are Webflow global swatches?

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.

Hello friends, welcome back to the channel. If you are new here, my name's Connor and on this channel, I help people who cannot code 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 webflow to build neat online businesses. Also, I'd be very much appreciative 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.

What are global swatches?

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 have applied colours 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 topography 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 palette. So all you need to do is just click into 'em. And then what you'll see is that if you have a certain color element selected, you can actually save that colour 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 colours 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 through 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 to all of the elements that are currently used using that swatch. 

Tips for using swatches in Webflow

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 add 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 greys 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 colour as my new brand colour. What I do then is I just go ahead, and click the plus button and I'm going to call this "brand orange". And then I can go through all of the different elements of 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 just go ahead and repeat the process where you just, again, jump in here, select the latest color that you had 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 we start changing your color, it will automatically update all of the different elements regardless of the class name that the 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.

🔗 LINKS:

https://www.connorfinlayson.com/a/webflow

🕛 TIMESTAMPS:

00:00 Intro

01:00 What are swatches?

02:55 Tips for using swatches

04:37 Summary

​