USWDS Library in Figma

[demi-johnson]

Problem

The SBA team is transitioning to adopting the USWDS and customizing the components to match their existing branding. Tia, the UI Designer on the team, has expressed difficulty in using and customizing USWDS components in Figma.

The Truss library has built the groundwork and is a great starting place, but I think it could be much better organized and more thorough by including things like Figma guidance on how to customize the components, creating variants, maybe some guidance around general usage. The library needs an upgrade.

This file could also be a great starting point for designers to use and understand design tokens as well. The names of the tokens can be notated in the description of each component in Figma.

Appetite

I’d like to get something together by the new year (?).

Working on this library could be an ongoing project as the USWDS evolves and the needs of designers change. To start, this file will be something Tia can start to use to help progress the SBA project. After testing it with Tia and getting feedback, the file can be shared with the HCD team and perhaps publish it as a Figma community file for anyone to use.

Solution

To support the SBA project, and eventually other projects that will be using USWDS, it will be a published Figma library that can be accessed across the HCD team in Figma. The library will allow designers to take a ‘drag and drop’ approach to quickly pull and customize components for their projects.

Within the file will be guidance on creating variants of the component so that when designers need to customize the component, those adjustments can be saved and documented as variants.

As updates are made to the USWDS, those changes will be reflected and noted in the Figma file.

Rabbit Holes

Worrying about the design tokens could definitely be a rabbit hole and may not be super necessary in the beginning stage of this file. First I’d like to publish it with all the components, then start to worry about diving deeper into it and adding info about tokens.

Including component guidance and usage would be great. But tracking updates and changes could be difficult to keep up with. To avoid this, the file will only include Figma-specific guidance, like how to customize and create variants.

No-Go’s