Design with System: Scalable Design Systems with Storybook and Angular

Master user experience in growing systems!

Remote & In-House
2 days
Some experience with Angular required
Theory phases alternate with live coding and exercises.
Also available as a company workshop
Public Workshop
  • Duration: 2 days
  • Next Date: TBA
  • Group discount available
  • Individually scheduled
  • In-house or remote
  • Discount for groups >8 participants

Design Systems with Angular

In this workshop you will learn all the components of a design system with Angular. Starting with design tooling, component libraries and automated visual testing, you will learn hands-on how to create a scalable design system.

Using sample projects and also your own project examples, we will work together to create a finished design system.

In this workshop, you will learn how to …

  • use components already in visual conception
  • improve communication between design and dev teams
  • develop and maintain your own component library
  • test your components in an automated way
  • make collaboration between teams more effective



Selected satisfied customers

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

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

No post was found with your current grid settings. You should verify if you have posts inside the current selected post type(s) and if the meta key filter is not too much restrictive.

More public dates

2023 11. 04 -
12. 04
09:00 - 17:00 (CET)
Group DiscountEarly Bird until 26.03.2023

Professional Angular Testing

2023 18. 04 -
20. 04
14:30 - 18:30 (CET)
Group DiscountEarly Bird until 26.03.2023

Angular Performance Workshop

8:30 am - 12:30 pm ET (New York.) // 2:30 pm - 6:30 pm CET (Berlin)
2023 11. 05 -
12. 05
09:00 - 17:00 (CET)
Discount Code

Professional NGRX: Advanced Topics & Best Practices

2023 10. 07 -
13. 07
13:00 - 17:30 (CET)
Group DiscountEarly Bird until 31.05.2023

Angular Architecture Workshop

8:30 am - 12:30 pm Eastern Time = 1:30 pm - 5:30 pm CET


Manfred Steyer is a Google Developer Expert (GDE) for Angular and Tursted Collaborator in the Angular team. Together with his team, he looks after customers in the entire German language area. The focus is on business and industrial applications based on Angular.

Only One Step Away!

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

Jetzt anfragen!