Design Systems

#### Getting Started:

- http://bradfrost.com/blog/post/conducting-an-interface-inventory/
- http://bradfrost.com/blog/post/interface-inventory/
- https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969


#### Resources: 

- https://addconf.com/2019/schedule/consistency-is-key
- https://www.designsystems.com
- https://www.invisionapp.com/inside-design/guide-to-design-systems/
- https://www.designbetter.co/design-systems-handbook/putting-design-system-practice
- https://askplaybook.com/collection/build-a-design-system
- https://medium.com/boomhaus/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc
- https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac
- https://medium.com/@wereheavyweight/how-were-using-component-based-design-5f9e3176babb
- https://medium.com/patricknlewis/design-language-system-23223dd86b54
- https://medium.com/tap-to-dismiss
- https://medium.com/tap-to-dismiss/design-quality-components-a86ec8691fd2
- https://mattgemmell.com/api-design/
- https://medium.com/@nathanacurtis
- https://www.writethedocs.org/guide/writing/style-guides/
- https://www.writethedocs.org/guide/
- https://designsystemsrepo.com/
- https://xd.adobe.com/ideas/principles/design-systems/five-common-design-system-pain-points-how-to-solve-them/

#### Inspo: 

- https://spectrum.adobe.com
- https://design-system.futurelearn.com/atoms
- https://marvelapp.com/styleguide/overview/introduction
- https://backpack.github.io/components/dialog?platform=ios
- https://www.duolingo.com/design/
- http://ux.mailchimp.com/patterns/color
- https://buffer.gitbook.io/buffer-design-system/
- https://atlassian.design/guidelines/product/overview
- https://lightningdesignsystem.com/

- Lyft's Quality Component Design Checklist - https://docs.google.com/document/d/1N3li_DZJmdScKkGW1b9JKgDC-ejPpQYbYd1g1e9W6Ig/edit

- https://dna.babylonhealth.com/
- https://gestalt.netlify.app/#/
- https://www.microsoft.com/design/fluent/#/
- https://primer.style/
- https://airbnb.design/tag/dls/


## Maintaining Design Systems

- https://docsify.js.org/#/
- https://zeroheight.com/landing
- https://www.mkdocs.org/
- https://docs.gitbook.com/
- http://atomicdesign.bradfrost.com/chapter-5/
- https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015
- https://github.com/daneden/design-systems-office-hours-playbook

## Impact

- https://uxdesign.cc/how-to-measure-design-system-impact-guide-f1f9f0c3704f


## Notes 

#### Building a Mobile Design System - Kristina Fox, TrySwift Tokyo 2019 https://www.youtube.com/watch?time_continue=1&v=Fvq8PQKJj_k

Style guide is a set of rules which defines the basics. You can find colors here, typography, brand, icons, etc. You can even find a grid here. This is the most abstract part of UI.
Component library is storage for your components — articles, headers, galleries and many more. Each component is categorized, well-documented and responsive. Components aren't dependent on each other, but you are able to merge them together.
A design system combines connects the two parts together and it defines how you can combine it all together.  
A design system is a series of visual style and different sized components (or molecules) that can be reused in different combinations to create larger components, it allows for managing design at scale. 


##### Benefit for Designers

- Helps to unify the look and feel of the app
- Improves the consistency of flows in the app

##### Benefit for Engineers

- Reduces development time which in turn allows for faster shipping.
- Encourages code re-use
- Improves scalability
- Less UI Bugs?

##### Benefit for End users

- Build brand familiarity with users
- Makes it easier for them to understand and navigate flows

##### Implementing a design system 

- Create documentation for the design system.
- Staying in sync - changes to the design system should be communicated with engineers.
- Build a working relationship between design and engineers

##### Basic building blocks:

- Define a set of Font and Colours.
- UI controls
- Custom UI & View components e.g Buttons, Cells