Skip to main content

USWDS Figma Library

The USWDS component library is available and free to use through the Figma Community created by the Truss.works team.

Not only will you be able to incorporate components into your designs, but it’s a great place to start understanding how these components are created from design tokens.

Getting started

Duplicating the USWDS component library

To view and duplicate files from the Figma Community, login or create a Figma account.

  1. Navigate to the community tab in the left-hand side navigation.
  2. Search for “USWDS” in the search bar.
  3. Open the USWDS file by Truss.
  4. Duplicate the file.

GIF demonstrating how to navigate through Figma's community page to duplicate the U.S. Web Design System library created by Truss.

Publishing the library

You’ve successfully duplicated the library! Now you can publish this file and apply it across all your project files.

GIF demonstrating how to navigate through Figma's community page to duplicate the U.S. Web Design System library created by Truss.

Crafting designs

Not sure where to start or need inspiration?

We’ve gone ahead and created some page templates using the USWDS components library. You can view how they respond in the web or view their Figma files to dive a little deeper.

Pro tip

You can make changes to any of the components on your duplicated library file without affecting Truss’s original file. The changes you make will only affect the files you choose to apply them to. For more information, check out Figma’s article on how to review and accept library updates.

Things to keep in mind

  • Whichever version of the library you duplicated from Truss will not receive any new updates automatically.
  • The only way to get the newest version would be to duplicate the updated library from the Figma Community page.
  • If you have files or projects already linked to an older version, you may need to relink components if you want to move to an updated library version.

Our suggestions

  • Keep your USWDS component library in its own file. If your team or projects have multiple files referencing this library, it’s best to keep it separate.
  • Stick to a single version. This will help you avoid continuous relinking of components.

Resources