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.
-
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).
-
Component Library
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.
-
Templates
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.
Guidelines
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
Have any questions?
Contact @Sabrina and @Nancy on Slack and in #mofo-design!