USWDS Figma
Building the U.S. Web Design System in Figma
Government · Design Systems · Open Source · 2020–2021
The problem
The U.S. Web Design System existed as a set of coded components and guidelines, but there was no canonical Figma version. Every designer at Truss working on a federal project was either manually recreating components from old Sketch files or building their own versions in isolation. There was no shared source of truth. Two designers on the same project could be working from different interpretations of the same component.
The solution
I built a comprehensive Figma library of USWDS components: typography, colors, buttons, forms, icons, and complex UI patterns. I made it available to the entire Truss team and eventually the wider federal contractor community. To date it has been used almost 6,000 times and was adopted by 18F as their recommended Figma library for any contractor working with USWDS.
My role
I owned this project end-to-end, from initial component architecture to documentation, internal rollout, and coordination with 18F. I was also the primary maintainer as USWDS released new components, staying ahead of releases through our relationship with the 18F team.
100%
USWDS component coverage
6,000+
uses in the Figma community
The cost of no shared library
Before this library existed, building a screen in a federal project meant going to the USWDS website, identifying the right component, and then manually recreating it in Figma from scratch, or hunting through old Sketch files to find a version someone had made previously. Every designer was doing this independently. The result was duplicated effort, inconsistency across projects, and no guarantee that what was in a design file matched what USWDS actually specified.
The problem compounded when working with federal clients. Designers on the government side often weren't using Figma at all, which made collaboration harder. A shared, well-documented Figma library gave both sides a common reference point.
Building with a direct line to 18F
Truss had a close relationship with 18F, the federal digital transformation team that maintains USWDS. Several Truss employees were 18F alumni, and a number of our government contracts came through 18F engagements. This gave us something most contractors didn't have: direct access to the people building new USWDS components before they were publicly released.
That relationship shaped how I built the library. Rather than just mirroring what already existed, I could get ahead of upcoming component releases and build them into Figma in parallel. It also meant I could ask questions directly about intended behavior, accessibility requirements, and edge cases, rather than interpreting the documentation alone.
18F endorsed the library because it solved a real problem for the contractor ecosystem. Any team wanting to use USWDS and Figma together previously had no starting point. Our library gave them one.
Sharing with the community
Once the library was solid enough internally, publishing it to the Figma community was an obvious next step. Federal contractors, agency design teams, and outside vendors could copy the library directly into their own Figma organizations and start working immediately, with no setup or recreation from scratch.
To date the library has been used almost 6,000 times. For a design system built by a small consultancy to solve an internal problem, that level of reach reflects both how underserved this community was and how much time a good shared library can save across an entire ecosystem.
View on Figma CommunityWhat this means for AI-era design systems
Design systems are becoming one of the most important surfaces in the AI conversation. As AI tools generate UI, the question of whether that output adheres to a design system becomes critical: does it use the right tokens, the right components, the right accessibility standards? My work on USWDS was fundamentally about creating structure and shared language that scales across teams. That same thinking applies directly to building AI-compatible design systems today: clear component contracts, well-documented tokens, and governance processes that don't break down when output is generated rather than hand-crafted.