In website and mobile app design, it’s pretty well understood that elements like buttons, forms and typography are “building blocks” that you will reuse throughout a site to not only create consistency but also a better user experience.

As a designer, Figma makes it easy to create these building blocks—starting at the most granular level with “tokens” which feed into “components” which in turn can feed into what I call “modules.” We’ll look at each of these individually to understand how they build upon each other and make it easy to create a design system. But first, beyond the benefits of consistency and a better UX, why on earth would you invest in architecting a design system of building blocks? First and foremost—your sanity. 

Supercharging design team workflows

On larger websites, and for enterprise-level websites in which there are several design team members working on different pages of the same site, a design system serves as a single source of truth. A change at the token, component or modular level ripples through every page design automagically. For example, if a brand decided to change its button styles across the entire site, a single change of the source button component, along with its variables defining the different button states, would cascade through all page comps instantly.

Additionally, a library of components and module elements lets designers get a head start in designing pages—and even empowers more junior designers to be more productive members of the team. By creating and sharing a library of brand-approved elements and modules within your design team, one can literally build the foundation of a whole page in minutes simply by stacking pre-designed, developer-approved (and often pre-build on their end) modules on top of each other using Figma’s “auto layout” feature. It’s then simply a matter of changing out the copy, images and icons to customize the page.

Ok, but doesn’t that stifle creativity? Not really. If a new page requires a unique layout, a library of component elements is a starting tool kit to ensure the new page looks part of the family. And, if some of the page’s layout patterns become something you want to reuse, simply turn them into modules and add them to the library for others to access.

Tokens, components, and modules

Now let's dig into the cascade of elements starting with tokens. Tokens are the most elemental of your design system. They are a way for you to manage fundamental design properties and values. For example, your brand colors would each be tokens. Spacing values and fonts would also each be tokens. You can even export token data from Figma as .json files for development purposes using a plugin called Tokens Studio.

These fundamentals then feed into the creation of “components” like buttons and input fields. For example, a button’s hover state color would be fed by a token. That same color might be used elsewhere in the site, so a change at the token level would update any component that references it.

Now on to modules. If you visualize a web page, you can see how it’s a collection of horizontal panels stacked on top of one another - starting with the navigation, then the hero or intro area, then various content configurations and ending with the footer. Each of these can be pre-designed and saved as a module. Each module is composed of elemental “components,” which are fed by “token” values such as color and spacing. Like Russian nesting dolls, these elements together can form a powerful design system.

When designing a module, I like to start with the desktop view—using 1440 pixels wide as a minimum viewport. Once finished, you save the panel as a Figma component. Now, here’s where things get interesting. Within the saved Figma component, you can create “variants” that offer the design in different screen widths, background colors, or with various elements visible or not visible. This gives design teams a lot of flexibility when using modules to design pages.

In summary, investing the time to set up a design system for your website is a way that you can create efficiencies as you scale your team and your site. By creating reusable elements that flow from primitive “token” and “component” parts, you can easily maintain consistency and make site-wide updates a breeze.