Intro to design systems in Webflow

Have you ever found yourself rebuilding your navigation on every single page you create? Or have 100 buttons all over your sites, and they all look slightly different, making it almost impossible to stay on brand and edit efficiently?

[Keegan] Wait! Are you talking about me?

[Grimur] No, Keegan. I'm talking about myself.

But if you and your team have, that's where a design system can help.

In this video, we are going to keep it focused on what a design system is when it comes to Webflow. We'll then go into it a bit deeper (what actually makes up the design system itself), we'll look at an example on how to use one, and finally, we have some recommendations on how to get started.

First, let's set the stage here. What is a design system? And why would you want to use it?

Let's start with the what. A design system in Webflow is more than just a style guide (although they can indeed be a part of it). But it's bigger than that. It's a full toolkit that could include reusable components, design tokens, and standards that you (and your team) have set, all working as one.

And then there is the why. Why would you want to use one? Well, it's to make sure that your site (or sites) are on brand and consistent (which is great for you and your team and anyone visiting your site), scalable (helping your sites grow and evolve with your business), and they empower your whole team to build with ease and efficiency.

Basically, design systems help with consistency, scalability, and a whole teamability, which is totally not a word, but you know what I mean.

[Keegan] I actually don't.

[Grimur] Ohh, what I mean is it allows your whole team to stay on brand and build together as one.

[Keegan] Got it. That's much better.

[Grimur] Thank you, Keegan.

There are a number of great foundations and frameworks out there that can help you get started with a design system in Webflow.

But for the purpose of this video, we're going to use our own examples to demonstrate the value of a design system in Webflow.

That's what a design system is when it comes to Webflow. Let's dig deeper and look at the features that make up our design system.

And we'll break down our system using the Atomic Design approach (a way of thinking about design in building blocks) from smallest to largest.

And it's actually an excellent book by Brad Frost that Keegan is currently reading.

[Show Keegan reading the book]

We'll start with variables, then style selectors, components, page templates, and finally, we have shared libraries.

Variables (also known as design tokens) can store values like colors, typography, and size. If I set a CSS property to a variable, it takes on that value. Update the variable, and every CSS property referencing that variable also updates. And ideally, if you use the same value more than once, that should be defined as a variable.

And on top of that, we have variable modes, where you can swap out the value of each variable in a collection based on the design context. Works great for responsive design and to accomplish different color themes. And like Brad Frost said in his book:

[Grimur] & [Keegan] at the same time:

"Design tokens are the subatomic particles of a design system, tiny pieces like colors and spacing that everything else is built from."

Next, style selectors (classes and tags). You can style a class using CSS properties (like margin and padding for spacing, background color, and so much more). And when you use that class on an element, that element inherits all the properties for that class. Same idea as before here: if that class is applied to multiple elements on your site, you change that class, and it updates everywhere it's being used. And tags allow us to control the default styling for a particular element, without creating a unique class.

Thinking about your design system, style selectors are another small but important part. Once you set them up, you (and your team) have a fast and consistent way to style elements on your site.

Then, we have our components, our fundamental building blocks in your design system. They are reusable blocks of elements and styles, like navigation, sections, cards and buttons, but you can turn nearly any styled element or group of elements into a component. They are the core building blocks that you and your whole team can use to quickly create new sections on a page, while keeping things consistent and on brand. But of course, if you need more flexibility, there's component properties that let you customize them.

And when you make structural and style changes to one component, those changes are applied to all other instances of that component. So, components are another important part of your design system (and we recommend using them as your core building blocks), helping you with consistency and speed.

If you want to learn more about components, be sure to check out Webflow University.

Next, page templates, one of the largest parts of our system. Those can combine the components (which include variables and classes) and other elements if you want. But with these templates, marketers can use them to quickly create new pages with a consistent, scalable approach.

Finally, we have shared libraries. They allow you to maintain a single source of truth for your design system, which you can then share across multiple sites in your Workspace. You can share and update your components, variables, and assets across your entire Workspace from one source of truth, to make sure you are consistent and on brand across all your sites. And when you make updates to that library (that source of truth), you can review and accept those changes on any site in a Workspace.

For more details on shared libraries, go to Webflow University if you haven't already.

That's a lot of features that make up a design system. Let's put them together and look at an example.

We're here in this Workspace for this made-up company. It has a lot of sites, a main dot com, a blog and multiple microsites, and they all need to be consistent (to stay on brand) and to be updated frequently by multiple team members (who have different roles and responsibilities).

Alright, let's go in and open up our main dot com. Here (in our Navigator), we have a bunch of components and some elements. And here, we have a navigation component, and above, we have a banner component (that I know we're using on multiple sites and pages). Let's double-click and open it up.

For our paragraph, we're using a variable for our size (we named it "Paragraph Small"), and as you can see, we have a lot of options in our system. And there's a few other variables being used as well for this paragraph. And remember, the variables (these design tokens) are the smallest level of our design system.

This paragraph also has styles applied to it coming from this class. And this paragraph is just one part of many elements that make up this component.

Then, this component is used throughout the site (on other pages and even on other sites using a shared library).

Lastly, it is a part of (and can be used) in our page templates.

Okay. Now we know what we're working with. So when I go in and make a stylistic change to this banner component (let's just change this thing here, and we'll also do something like this).

Now, every instance of this component has been updated on this site. Here's before, and after.

That's just one example of how the core features can work together in a design system.

Okay. Let's close this out with a few recommendations. We highly recommend you create a source of truth. In Webflow, it's common practice to create a style guide (one part of your design system) by building it on a hidden draft page. There, you can add, style, update, and even add guidance for core design elements.

Even better, you can create an entire design system site, and then use it as a shared library for your entire Workspace. If you make any changes to your design system from this source site, you can share those updates with other sites that are using that shared library.

Next, it's always helpful to use clear naming conventions. Whether it's classes, variables or components, consistent naming helps your whole team stay organized.

And last, you can go and explore the Marketplace for cloneable design systems, where you can get insights and a head start on many of the things we covered in this video.

But remember, at the end of the day, it's all about how things work together so you and your team can confidently build in a consistent and scalable way.

Let's recap real quick. We went over what a design system is, then we went in deeper and looked into the core Webflow features that make up a design system, we looked at an example of how a design system can work in Webflow, we shared some recommendations. And last but not least, Keegan finished his book and already left.

Again, this is just a high-level overview on how you can build smarter, scale faster, and give your team the power to create, without creating 100 different buttons.

That's our intro to design systems in Webflow.