We are offering a three-day workshop that is held at your location. Goals of the workshop are:

1. Understand and communicate current UI-related issues to all stakeholders

2. Analyze current UI and establish a design system

3. Create a component library that enforces the design system

4. Create a living styleguide that documents component library and UI patterns

5. Improve the development and communication processes

Day 1. Introduction to design systems

• Learn basics of design and design systems. We’ll learn why some design principles are important and how design systems help enforce them.

• Go through the problems you’re having at the moment that you’d like to solve. We’re going to look at the current design and development process and brainstorm ideas for improvements.

• Perform the initial UI inventory — the process where we’re going to identify problems such as design inconsistencies with the current UI. The goal of this process is to bring all stakeholders on the same page.

• Discuss things like the general process of creating and maintaining component library in the organization. This includes things like when should we extract components, what are UI patterns, how to do versioning etc.

Goals

1. Learn about basic design principles and why are they important and how design systems can help enforcing the design language

2. Establish the initial design system that includes design tokens for colors, spacing and typography.

3. Find out and document which UI elements and patterns the product is currently using.

4. Start collecting requirements and specifications for UI patterns.

5. Specify and document design tokens.

6. Create an initial plan for the component library & styleguide that we’ll work on day 2.

Audience

First day is dedicated to the general ideas behind design systems and processes. I recommend all stakeholders who are responsible for the end product — PMs, designers, developers — to attend.

Day 2. Component-driven design systems

• Learn about component-driven development process

• How to create a living styleguide from the component’s sources

• Learn how to organize components inside the project

• What are the differences between UI primitives and HTML/CSS for component’s API design

• Different styling approaches in React and intro to styled-components / emotion APIs

• How to access design tokens from components

• Learn how to create UI primitives using styled-system

• How to create and use typography primitives

• How to manage whitespace using layout primitives

• How to manage responsive styles

• What are UI patterns and how to document them properly

• How to compose UI patterns using primitives

Goals

1. Kick off styleguide and UI library based on the plan from day 1.

2. Create a few reusable components and learn how to attach design systems knowledge to them

3. Create a simple page / user flow using the new component library.

Audience

Day 2 is dedicated to learning on how to implement design system in React and only require frontend developers to attend. It is still would be great if designers could attend so they can be part of the process and being able to participate in setting up the foundation of the design system.

Day 3. Building resilient component libraries

Day 3 is deep dive into more architectural aspects of the component library. It is based on the knowledge of the day 1 and 2. During this day we’ll learn:

• Techniques to manage white space and layouts

• How to avoid prop-drilling using compound components

• How to use React.Context to create better APIs for complex flows (modals, confirm pattern, etc.)

• Use headless components and hooks to compose behavior

Goals

1. Create common UI patterns such as managing modals, requesting data from users, etc.

2. Learn how to apply React architecture principles to build more reusable components

3. Create a more complex user flow using new components and patterns.

Audience

Day 3 is most technical day and only requires frontend developers to attend. At the end of Day 3 we’ll dedicate at least 2 to 3 hours (or more, if needed) to go through open questions that are specific to the project. I’ll do my best to adjust to your requirements during the workshop.