Component-Driven Design Systems

May 09, 2019

Development of digital products is a complex process that involves multiple stakeholders and roles: managers, designers, engineers, QA, and customers. This increases the communication overhead, slows down the process, and oftentimes results and less than ideal user experience.

  • How to communicate design ideas between different stakeholders effectively?
  • How to deliver consistent UI without constant supervising?
  • How to ensure same problems not being solved multiple times?

Design systems offer a systematic approach to the process of product creation. This approach establishes an organization-wide design language that can be backed into a UI library and the styleguide and becomes the single source of truth for the entire organization. Component libraries and living styleguides encourage reuse, promote consistency, improve team productivity, help to identify common patterns and solve similar problems only once.

Design systems help teams to stay focused on things that matter and ship higher quality products in less time and effort.

What will you learn

  1. Basic design principles such as typography, color, spacing applied to web.
  2. What is a design system and how can it enforce the design language
  3. How to identify problems and issues with user interface, perform a UI inventory — a process where we’re going to identify problems with the current UI and structure it in a systematic way
  4. Overview of the different approaches to styling and architecture of React applications
  5. Introduction to the Component-Driven Development process
  6. How to automatically generate a living styleguide from the source code
  7. How to design and implement a UI component library that is easy to use and maintain
  8. How to apply this knowledge to build a real product using only components from the UI library
  9. How to establish and maintain company-wide processes to work with design systems