collection of resources dedicated to help understand and create design systems
- This repository is a collection of resources dedicated to help understand and create design systems.
- Links to other repos, Articles, etc,
- It can serve as a valuable resource for anyone interested in learning about design systems or implementing them in their projects.
It is a work in progress and will be updated as I find more resources.
- Design Systems with React & Storybook - by Emma Bostian
- Design Systems - by Emma Bostian
- Introduction to Design Systems - by Emma Bostian
- The Ultimate Guide to Building a UI Component Library for a design system
- Headless components in React and why I stopped using a UI library for our design system
- Design system: How to build a library?
- Building a Design System with React Web Components
- HOW TO CREATE UI COMPONENTS – TECHNICAL GUIDELINE
- https://news.design.systems/
- http://styleguides.io/
- https://atomicdesign.bradfrost.com/
- https://www.uxpin.com/studio/?s=design+system
Three pillars of design systems :
- Design Language
- Component Library - Core Components
- Style Guide
When creating a design system, different development tasks can be challenging and time-consuming. However, some development tasks are commonly considered more tedious like creating a component library, lot of questions arise like :
what are the different approaches to create a component library?
1st option — build everything from scratch — Manual Creation
- This is the most time-consuming option, it offers complete control and customization but can be time-consuming and may require more development effort.
2nd option — use an existing UI library —
- This is the fastest option, but it gives you the least control over the final product.
3rd option — Hyrid Approach — combine the 1st and 2nd options
Let's explore the 2nd option: When it comes to use an existing UI library it's not always easy to customize to fit our design system's needs.
So what are the different approaches to customize/extend an existing UI library to fit my requirements ?
-
find a themeable library (that supports theming) and adapt it to your needs -
-
find a library that you can use as a foundation and build on top -
-
Headless components / Unstyled components -
-
Find other approaches...
the objective is to POC the different approaches and find the best approach that fits our needs considering the following criteria :
- Customization - how easy is it to customize the components ?
- Time to market - how fast can we deliver the components ?
- Extensibility - how easy is it to extend the components ?
- Accessibility - how accessible are the components ?
- Maintenance - how easy is it to maintain the components ?