Mozilla Foundation Design

Mozilla Foundation Design

Design System

What is a design system and why do we need it?

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of pages. Typically it is designed 1:1 with our code using tokens. We use a design system to help speed up our design and development process and keep common things consistent across our site. We use Figma to create, store, and document our design system.


How to use components

  • Go to the Assets panel and click the book icon. Then Toggle on the library you want to use.
  • All available components should now populate in the Assets panel which you can drag and drop into your file as needed.
  • Customization options are available in the component properties panel on the right and there’s a button to see documentation in the “Inspect” tab.
  • Please report any wonkiness you find.

Additional Resources

Link to our delivery plan

Star Icon

Have any questions?

Contact @Sabrina and @Nancy on Slack and in #mofo-design!