Appendix
- A frequently updated collection of Design System examples, articles, tools and talks
- A Figma publication for design systems creators, designers, developers, and managers
- Design Systems Checklist
- A repository of publicly available design systems and pattern libraries
- A list of design systems made in Figma
- Design System Survey
- "Reimagining Atlassian Design System" conference talk and DS team members' discussions on the video
- Design Systems by Alla Kholmatova
- Invision's Design Systems Handbook
- Defining Design Systems
- Design Systems podcast (15 min)
- Picking Parts, Products & People
Qiqi Zheng, August 2021
- What are the in-house components in this codebase?
- What in-house components are based on UI-component libraries like Material-UI
- What Material UI components are used in the project
- What is the styling library?
- Is there type checking library?
Current Hack for LA React projects use UI component libraries, such as Material-UI and Semantic-UI, to build their in-house components. With our research, we have no need to create a full-fledged UI component library. We plan to document our Design System with tools like Storybook with a handful of simple components.
Our next steps in making the design system MVP is to finalize tech stack and explore various documentation tools with one in-house button component.
- What would be the starter components for the design system repo?
- What components do the projects have?
- Should we reinvent the wheel?
- What is our next step in making a design system MVP?
| HfLA Team | Library | Components | Customized (in-house) components | Styling | Type checking |
|---|---|---|---|---|---|
| 311 Data | Material-UI | * Typography * Container * Chip * Card * Icons * AppBar * Button * Toolbar * Menu * MenuItem | * Searchbar * Footer * Header * MultiSelect | Material-UI | Proptypes |
| Civic Tech Index | Material-UI | * Typography * Box * Grid * Icons * Container | - | - | - |
| Engage | Semantic-UI-React | - | - | - | PropTypes |
| Expunge Assist | Material-UI | * Button * Checkbox * Container * Input * Popup * Progress Bar * Radio Buttons * Textfield | * Header * Navbar | Material-UI | TypeScript |
| Food Oasis (uses Storybook for documentation) | Material-UI | - | - | - | PropTypes |
| Home Unite Us | Material-UI | * Textfield * Divider * Button * Modal * Card * Checkbox * Radio Buttons * Styled Components * Button * Container * Link * Table | - | - | TypeScript |
| LA TDM Calculator | - | - | * About * Errorpage * Footer * Header * Nav * Pagination * sidebar | react-jss(cssinjs) for all their styling & Uses clsx constructing className string conditionally | Proptypes |
| Lucky Parking | - | - | * sidebar * header * search bar * map | sass | PropTypes |
| VRMS | - | - | * Header * Footer * Form: new user forms * Error * Dashboard * Check in button * Create new profile button | sass | - |
to be answered as the developers figure out configuration & initial code:
- How long did exploring take, from research to base template?
- Is the tool’s documentation easy to understand? Did you have to use other dev’s GitHub repo to understand the docs?
- What is the out of the box setting?
- What add-ons are available?
- What are the pros? What do you like about this tool?
- What are the cons? What are your struggles with this tool?
The documentation tools we researched use different methods to render the documentation:
- Fractal, Pattern Lab, Cupper use templating engine.
- Storybook, Styleguidist, Docusaurus and Cupper use md and/or mdx.
- Storybook and Styleguidist both support TypeScript and PropType.
- Bit have own ecosystem and use their cli.
All of the documentation tools have out of the box demo setting which provides the project base templates. All documentation are straightforward and easy to understand. All documentation tools are good for documenting source code and visual representation of the components. Depending on the project's needs, they may choose any of the documentation tools.
Styleguidist is the fastest to setup and integrate with the existing project.
Dev team is done with all research. User research findings and conclusion determine whether dev team is necessary for design systems project.
Exploring from research to base template took 40+ minutes. Documentation and GitHub ReadMe are easy to understand. The out of the box setting is a boilerplate with button, header, introduction stories and page. Addons are available.
- Easy to set up
- lots of features
- good documentation
- clean interface
- lots of resources because people use this documentation tool
Cons: There are lots of resources, accidentally created a deprecated version of storybook.
Exploring from research to base template took 30 minutes. Documentation is relatively easy to understand. All the steps are available to create this documentation tool for the existing components. Out of the box setting points directly to components. No addons available.
- Works with React out of the box.
- Styleguidist automatically find the component file.
- Easy to document components, putting components directly into md files.
- Work with PropTypes and TypeScript.
- Minimalistic design.
Cons: Not interactive.
5-10 mins to set up the base template. Need extra time to learn Handlebars. Easy to understand documentation. The basic folder structure and config was created by their cli tool. Not necessarily a con, but it uses a template engine. It comes with handlebars out of the box but they have adapters for other template engines.
5-10 minute to set up the base template. However need extra time to learn Handlebars or Twig. Documentation is easy to understand. Full pattern template is available out of the box. There are customizable templates. No addon is needed. Need time to learn templating language to use this tool.
Exploring from research to base template took 40+ minutes. Documentation was very easy to understand and easy to get started with. Docs are very clear and there are example GitHub repos of bigger projects that use Docusaurus. Using example GitHub repos are not needed to get started. I'd say it would be if you needed to do more advanced styling. Out of the box we use normal react, markdown, and theming(light and dark theme). There are additional plugins that we can use, but I haven't checked those out yet. React Developers can easily get on board and use this tool. In terms of writing content for docs, anyone can come in and write using markdown as well.
5-10mins to set up the base template. However need extra time to learn Hugo.io. Easy to understand documentation. Out of the box, it created a copy of it's own documentation page. Not necessarily a con but it uses a template engine(hugo).
- Available offline as a progressive web app.
- Output is a responsive, screen reader and keyboard accessible static site.
- Automated Github Pages deployment.
- Includes a single-page printable version suitable for PDF conversion.
Exploring from research to base template took 1 hour. Documentation was relatively easy to understand. This documentation tool has its own ecosystem. Bit has base template settings and UML dependencies visualization.
- It accommodates React, TypeScript and other npm packages.
- Base templates are thorough and organized.
- Creating components using Bit cli.
- Variety of components other people built to incorporate in project.
Cons: need to learn the Bit ecosystem.
Exploring from research to base template took 10 minutes. Styleguidist uses react-docgen to parse source files (not transpiled). react-docgen finds exported React components and generates documentation based on PropTypes or Flow annotations.