Design with System Workshop: Scalable Design Systems with Storybook and Angular (100% Online, Interactive, English)

Master the user experience in growing systems!

In this workshop you learn all aspects of building design systems with Angular. Starting with the design tooling, through component libraries to automated visual testing, you will learn hands-on how a scalable design system is created.


Using sample projects and your own project examples, we will work together to develop a complete design system.


In this workshop, you learn how to …


  • ☑️ already use component thinking in the visual conception
  • ☑️ ensure better communication between design and development teams
  • ☑️ Develop and maintain your own component library
  • ☑️ test your components automatically
  • ☑️ collaborate more effectively with other design and dev teams

This international training takes place in English.



✅ Completely online – no travel required!
✅ Interactive: ask questions and participate in discussions
✅ Lots of exercises and live coding
✅ Case study that you can use as a blueprint for your own projects
✅ Pair programming with your trainer


Some Impressions

We are all connected through a browser-based virtual classroom.



Lots of live coding and interactive exercises including pair programming with your trainers


Your Trainer


Andreas Wissel: Well-known speaker and expert for design systems and UX


Our extra: Open Q&A session 🎁

As a little extra, we are adding an open Q&A session to both days of the course, where you can raise questions that go beyond the workshop. In this way you can, for example, discuss project-related problems with us. We are thus adding Consulting aspects to the workshop.


Didactic Approach

Theoretical phases alternate with live coding and exercises.



Basic knowledge of Angular


Early Bird
We are still offering the low early bird prices until April 10th, 2021.


Company training

Please contact us if you would like to organize a company workshop on these or similar topics (remote or on-site). In general, company training courses with at least eight participants are cheaper. You can reach us here:


02.05. - 03.05.2022

Date & Time:

02.05.2022, 9:00 CET - 03.05.2022, 17:00 CET




Your Trainers:

Andreas Wissel ,


Motivation and Basics

  • What are Design Systems?
  • How do component libraries fit in?
  • Why your own library instead of commercial component toolkits?

Your Professional Process: The Component Design Lifecycle

  • Why component development?
  • How do you develop holistic components (concept -> design -> dev)?
  • Ubiquitous Language: Why names are important and how they shape collaboration
  • Interplay between design and development:
    Robust components in the agile process
  • How do I design good components?


  • What is Storybook?
  • History
  • Limitations: What can it do, what can’t it do?
  • Framework agnostic example: ButtonWebComponent

Figma as a Component-based Design Tool

  • Figma Components: Reusable components in the Design Tool
  • Design Tokens
  • Component Libraries
  • Prototyping
  • Constraints, Slots, Auto Layout

Implementation with Angular

  • What qualifies Angular for this idea?
  • How do you use the previous concepts with Angular?
  • Pros / Cons
  • Limitations: Who needs it, who doesn’t?
  • Framework-specific example: NgButtonComponent

Comprehensive Practical Example

  • Design in Figma
  • Isolated development with Storybook: Components, states and Cypress E2E tests
  • Merging in the Angular application
  • MockService

Final Information

  • Key takeaways on the technologies
  • The “how to convince your manager” package: what are the advantages of this process for the organization?


  • Outlook: What is a Design Sprint and how does my component library help?
  • Outlook: Accessible Components
  • Outlook: Nx monorepos

Public Workshops

Always By arrangement

All of our seminars are always available remotely or in-house. Contact us to make an appointment

Remote or In-House

03. 03 -
04. 03

Trainer: Rainer Hahnekamp



08. 03 -
10. 03

Trainer: Manfred Steyer, GDE und Michael Zikes



25. 04 -
26. 04

Trainer: Rainer Hahnekamp



28. 04 -
29. 04

Trainer: Rainer Hahnekamp



02. 05 -
03. 05

Trainer: Andreas Wissel



12. 07 -
14. 07

Trainer: Manfred Steyer, GDE und Michael Zikes



Only One Step Away!

Send us your inquery today - we help you with pleasure!

Jetzt anfragen!