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.
Styles Library (Design Tokens)
This is documentation of our smallest design decisions and also lives as a JSON file in Github. We use the Token Studio Figma plugin and instructions on how to install and use the plugin are available on the first page. It is also a work in progress (we'll need to add them as variables from the new Figma update).
This is where we create and document all of our reusable elements and streamfield blocks used to design pages, such as navigation, input fields, and image sizes.
This is the file for page templates for our website. It is a work in progress but it will house pages such as Banner and Campaign and will be added when ready.
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.
Have any questions?
Contact @Sabrina and @Nancy on Slack and in #mofo-design!