This is a companion repository for the "Creating, Using, and Maintaining a Design System" webinar hosted by OpenFin.
This webinar took place on Februrary 17th, 2021.
Creating, using, and maintaining a design system is a complex task that requires participation from many parts of an organization. In this talk, we'll discuss why one might want to consider creating a design system to build, organize, and maintain the user interfaces of your applications.
This codebase contains:
The purpose of this codebase is to demonstrate the various parts that make up a design system, with a very simple design system and component library implementation.
While real design systems are much more comprehensive and complex, the intent of this example is to provide a starting point, and a view into what a living style guide looks like.
Feel free to fork, use, share, and modify this codebase.
- Make sure you have
nodeandnpm. We recommend nvm - Clone the repository
$ npm install$ npm run storybook$ npm run dev$ npm run openfin
Storybook will start at http://localhost:6006. Visit that URL in your browser to explore the living style guide.
The demo application will start at http://localhost:3000. Additionally, the application can be run in OpenFin, and the openfin-cli tool will automatically launch and display the main window.
As mentioned during the talk, there are a number of helpful links and resources:
- https://atomicdesign.bradfrost.com/
- https://en.wikipedia.org/wiki/Inner_source
- https://en.wikipedia.org/wiki/The_Cathedral_and_the_Bazaar
- https://blueprintjs.com/
- https://www.lightningdesignsystem.com/
- https://atlassian.design/
- https://polaris.shopify.com/
- https://www.carbondesignsystem.com/
Brian McAllister
Interactive Practice Head
brian.mcallister@lab49.com