Skip to content

Instantly share code, notes, and snippets.



Last active Nov 11, 2020
What would you like to do?

Design Systems

Getting Started:



Maintaining Design Systems



Building a Mobile Design System - Kristina Fox, TrySwift Tokyo 2019

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.