USWDS Figma
Building the U.S. Web Design System in Figma
As a senior designer at Truss, I was always looking for ways to improve project productivity and collaboration between our team and the federal government. One way to accomplish this was by creating a Figma version of the U.S. Web Design System, a set of design guidelines and principles that help designers and developers create consistent and accessible websites and digital products for the federal government.
The U.S. Web Design System was already established, but our team needed a more efficient way to apply it to our projects. We also needed a way to collaborate more effectively with our federal government clients.
To address these challenges, I collaborated closely with 18F, the design systems maintainer, and began to build a Figma version of the U.S. Web Design System that could be easily accessed and used by our team and our clients. I began by familiarizing myself with the U.S. Web Design System to understand its principles and guidelines, which helped me to ensure that the Figma version would accurately reflect the original system.
Using the U.S. Web Design System as a guide, I then created a set of master components that represented the different parts of the system, including typography, colors, buttons, forms, icons, and other UI elements. I also created a set of reusable styles and components to make it easier to build new designs in the future.
Once I had built the initial version of the Figma system, I worked with other designers and developers to test and refine it. We made adjustments based on feedback to ensure that the system was accurate and easy to use. This included using Figma specific features such as Variants and Auto Layout to ensure ease of use across teams.
Finally, I documented and shared the Figma version of the U.S. Web Design System with others in our organization and our federal government clients. This included creating a style guide and design system documentation that outlined how to use the system and provided examples of how it should be used in practice.
By building a Figma version of the U.S. Web Design System, our team was able to work more efficiently and effectively on our projects. We were also able to collaborate more closely with our federal government clients, ensuring that everyone was on the same page when it came to design and development.
At the time Figma was not a design tool that the Federal government used internally. Because of this, our Figma version of USWDS was promoted by 18F as their go-to Figma library for any outside contractor wanting to use USWDS and Figma on federal government projects.
One of best aspects of Figma is the vibrant community that is built into the tool. We utilized the Figma community feature to share our version of USWDS with other agencies, vendors, consultants, and contractors that work with the federal government. They can easily copy and import the design system into their own organization for customization and collaboration. To date our version of USWDS has been used over 2,000 times.
