Full-day workshop about building design system and pattern library (React) in a multidisciplinary team.
In the workshop, teams start by creating a visual design language to share. Together, they go through the iterative design process and build modular UI for the product. Teams 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, each team has the product ready, built with the help of their library, and driven by an effective process to ensure smooth updates.
- Introduction to the topic of design systems;
- Creating a visual design language via UI inventory exercise;
- Going through the iterative design process involving team members of different disciplines;
- Working on React UI library;
- Practicing styled-components;
- Using styleguide-driven development for code production;
- Training design system release process;
- Building a product based on the given design system;
- Providing brand changes to the product via the design system.
Publically, this workshop was given twice - as a part of DFConf Helsinki, and the second time on its own.
On the 15th of March 2018, the workshop gathered 30 attendees. Working in 6 teams, by the end of the day they delivered 6 different design systems expressed in React code and provided instant brand changes with the help of them.
This time, on 12th of June 2018, 5 teams worked hard to dive into design systems thinking and componentized development.
Hands-on workshop for you
Various editions of this workshop were also used in a range of private workshops I gave for Intergalactico clients. If you are interested in such kind of workshop tailored for your organization, feel free to email me to firstname.lastname@example.org. I am also open to run similar workshops at design or development conferences.