Design with System: Scalable Design Systems with Storybook and Angular

Remote: 01.03. - 03.11.2022
Also as a Company Workshop

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
  • Remote: 01.03.2023
  • Group discount available
Company-Workshop
  • 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

Impressions

Impressions

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?

Storybook

  • 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?

Bonus

  • 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

2022 01. 03 -
03. 11
13:00 - 17:30 (CET)
Group DiscountEarly Bird until 31.01.2023

Design with System: Scalable Design Systems with Storybook and Angular

13:00 - 17:30 CET = 8.30 to 12.30 ET

More public dates

2022 05. 12 -
07. 12
09:00 - 17:00 (CET)
Gruppenrabatt

Modern .NET-Backends for Angular

2022 19. 12 -
19. 12
09:00 - 16:30 (CET)
Group Discount

Advanced TypeScript

2022 20. 12 -
20. 12
09:00 - 16:30 (CET)
Group Discount

Playwright Workshop

2023 27. 02 -
28. 02
09:00 - 17:00 (CET)
Group DiscountEarly Bird until 31.01.2023

Angular Security with Dr De Ryck

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

Angular Architecture Workshop

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

English

2023 27. 03 -
29. 03
09:00 - 16:30 (CET)
Group DiscountEarly Bird until 28.02.2023

Modern Spring-Backends for Angular

2023 27. 03 -
28. 03
09:00 - 17:00 (CET)
Group DiscountEarly Bird until 28.02.2023

API Security Workshop with Dr. De Ryck

2023 27. 03 -
29. 03
09:00 - 17:00 (CET)
Group DiscountEarly Bird until 28.02.2023

Workshop: Fullstack Angular with NestJS

2023 28. 03 -
30. 03
09:00 - 17:00 (CET)
Group DiscountEarly Bird until 28.02.2023

Modern .NET-Backends for Angular

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

Angular Testing Workshop

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!