USWDS Design Tokens Guide
Overview
The purpose of this project is to provide lessons learned and guidance on how designers can progressively understand and apply the use of design tokens in their work — ultimately increasing adoption of the U.S. Web Design System (USWDS) among digital services teams working on government websites.
To inform the content in the guide, we interviewed 2 UX Designers and 2 UI Designers to gauge their understanding and experience with USWDS design tokens. We discovered that all the designers are aware of tokens, but not all of them understand how to incorporate tokens into their work. Our guide aimed to address all designers that fall along the spectrum of design token newbie to token master.
Problem
Design tokens have been an important part of design systems for some time now. They allow for both useful constraints and creative flexibility when either building a new system or working within an existing one.
While designers seem generally familiar with design tokens and know that they are a part of the U.S. Web Design System, they are usually not incorporating the use of them in their workflows and collaboration with developers. Mostly all of the guidance currently available is geared to developers, not designers, making it more difficult to understand and use.
This is a missed opportunity to realize the full potential of USWDS and its role as a common language between design and implementation.
Solution
Create a microsite to document guidance on how designers can progressively understand and apply the use of design tokens in their work.
The guide will include two main components:
- “Maturity model“-style content to document steps to increasing use of and benefit from design tokens.
- Learning resources to further gain understanding of design tokens. Many designers mentioned during our prior interviews that they learn best while doing, so the resources are interactive to best serve the designers.
Results
The guide was split up into three main sections. The idea is to learn one section at a time to progressively adopt an understanding and ultimately use design tokens:
- Understand the benefits:
- Before wrapping your head around what they are, understand why you should use them. This section serves as an intro to tokens and how they can benefit the designer-developer relationship.
- Learn the language:
- After understanding why you should incorporate tokens, learn the vocabulary/syntax. This section dives into the specific types of tokens, starting with easier-to-understand color tokens, to typography, layout and spacing. Readers should start to grasp what exactly a token is and how they might use them.
- Use the tools:
- In the last section we encourage readers to put their knowledge to test. We offer interactive templates so that designers can see how tokens transform their designs. It includes USWDS in Figma, Color Token Template in Figma, USWDS Boilerplate in CodePen, and guidance on how to use the tokens plugin in Figma.
The guide was presented to the design team during one of our bi-weekly team meetings. We used the CodePen template as the interactive, workshop part of our presentation so designers were able to interact with the tokens and allow us to troubleshoot in real time. Overall, it was well received by the team and has become especially useful for our UI Designers.
Let us know what you think by creating a new issue or contributing to a discussion.
Tools
This project was created using Github, Jekyll, HTML, markdown and the United States Web Design System. We used Figma to ideate and Github and Microsoft Teams to collaborate.
Reflection
The best way to truly learn a concept is to teach it.
Creating and presenting this guide helped build our understanding of design tokens and our reputation on the design team as ‘USWDS experts.’
