Almost every product team I work with is passionate about design systems. The benefits are clear: design work can be created and replicated quickly and at scale, alleviating strain on design resources and creating visual consistency across products. But what does that actually look like in practice?

Tools like Figma make it easy to work from a single source of truth. Everyone on your team can see the latest version of your designs, no matter where they are in the world. This makes it easy for designers to collaborate and for product managers and engineering to work more effectively with product designers.

‍

The foundation

Design systems begin with a style guide - a document that outlines the components of your design system and how they should be used. It might include things like fonts, colors, spacing, and component templates. Style guides serve as a foundation of a good design system, and once you have one established, it's easy to start building out other pieces of the system, like reusable components and patterns.

Reusable components are exactly what they sound like—components that can be reused across your product. This could be something as simple as a button or a form field, or something more complex like a carousel or a chat widget. Patterns are collections of reusable components that come together to form a complete solution to a common problem. For example, a login flow would be a pattern. It would include all of the necessary components (like a form and a button) as well as the wiring to make it all work together.

Creating reusable components and patterns is important because it helps you move faster when building new features. Instead of starting from scratch each time, you can quickly put together a new solution using existing building blocks.

‍

‍

Organizing your design system

Figma makes it easy to organize your design system, so you can easily find the assets you need when building new features. You can create folders for each component and pattern in your system, and use those folders to group together all of the relevant files. For example, you might have a folder for all of the files related to your carousel component.

Within each folder, you can use tags to further organize your files. For example, you might tag all of the files that use a particular color or spacing. This makes it easy to find all of the assets you need when making changes to your design system.

‍

Variants

As your product grows, you'll inevitably need to make changes to your design system. Maybe you'll want to add a new color or change the spacing of a component. In a traditional design workflow, making even small changes like this can be a huge pain. You might have to update each individual file that uses the old color or spacing. And if you're working with a team of designers, it can be hard to keep everyone on the same page.

But with a design system, you can easily create variants of existing components. So if you need to update the spacing of a button, you can just create a new variant of the button component that uses the new spacing.

Using design tokens

Design tokens are the building blocks of a design system. They're essentially variables that store information about your design, like colors, spacing, and fonts.

Using design tokens makes it easy to maintain consistent values across your product. So if you decide to change the primary color of your app, you can just update the value of the primary color design token, and it will change everywhere in your product. Plus, design tokens are language-agnostic, which means they can be used by any platform or tool—from Figma to CSS to React Native. Figma has built-in support for design tokens, so you can easily create and manage them in your design system.

Publishing your design system

Once you've built out your design system, you'll want to publish it so everyone on your team can use it. Figma makes it easy to publish your design system, so you can share it with anyone—whether they're using Figma or not. And if you ever need to make changes to your system, you can just republish the updated version.

When publishing your design system, you have the option to include all of the assets or just the ones that have been changed since the last time you published. This makes it easy to keep your team up-to-date with the latest changes.

‍