Hands-on with
Design Systems workshop

June 12th 2018, Helsinki


Dive into the world of Design Systems using Storybook and React

Dive into the world of Design Systems through Storybook and React. You will be a part of a multidisciplinary team with your focus either on development or design. Together, you will create a well-documented pattern library and build a modular website out of its components as a final product.

In the workshop, we will start by creating a visual design language for the team to share. Together, you will go through the iterative design process and build modular UI for the product. You will implement a pattern library using React and optionally styled-components, and document it with Storybook. The exercise contains managing collaborative updates and keeping the code in sync with the design reality. By the end of the day, you will have the product ready, built with the help of your library, and driven by an effective process to ensure smooth updates.


Date and time

Tuesday 12th of June 2018
8:00 - 17:00

Nordcloud Design Studio
Antinkatu A 1
00100 Helsinki


Workshop is designed for anyone interested in getting hands-on experience in creating a pattern library for a design system.

This workshop is all about hands-on doing and somewhat about development, but no pattern library can be built without design or designer, so ideal team will consist of both. A designer and a developer can, of course, co-exist in the same person  For people with the development mindset some prior experience in React or ES6, and CSS is appreciated..

Why  attend?

Creating a pattern library is one of the crucial tools for making a living design system. Design system is all about communication, and pattern library can only be built and iterated with a collaborative team.

During the day you will learn key points how to start creating a pattern library, how to make it living, and how to utilize it to create and change product designs.

Ticket sales to workshop has ended

You will learn how to

Define and name patterns in a consistent manner
Naming things is difficult. We will give you guidelines to follow, but practice is the best teacher. You and your team get to practise good naming conventions with the help of our mentors.

Rapidly kickstart a pattern library with Storybook
We have created a ready-made boilerplate to get your pattern library quickly started. Examples and ready-made functional components are included to give a head-start.

Keep pattern library alive and make changes in a coordinated fashion
Continuous releases and rapid iterations are the key to keeping pattern library alive. With a real product you will get an idea how to be part of this continuous cycle, and be up-to-date all the time. You will also practise making visual brand changes and communicate them through the pattern library.