Design with System: Scalable Design Systems with Storybook and Angular

Remote: 19.09. - 21.09.2022

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: 19.09.2022
  • 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 19. 09 -
21. 09
14:00 - 18:30
Early BirdGroup Discount

Design with System: Scalable Design Systems with Storybook and Angular

8:00 am - 12:30 ET

More public dates

2022 19. 09 -
21. 09
14:00 - 18:30
Early BirdGroup Discount

Design with System: Scalable Design Systems with Storybook and Angular

8:00 am - 12:30 ET
2022 20. 09 -
23. 09
14:00 - 18:30
Group TicketVery Early Bird

Angular Architecture Workshop

8:00 am - 12:30 pm Eastern Time
- 4 Half Days: Europe- and America (East Coast) Friendly
2022 07. 11 -
08. 11
09:00 - 17:00
Early BirdGroup Discount

Angular Security with Dr De Ryck (Advanced, English)

2022 14. 11 -
16. 11
18:00 - 22:00
Early BirdGroup Discount

Professional Angular Testing

9 am - 12 noon PT // 12:00 noon - 4 pm ET // 6pm - 10pm CET
2022 17. 11 -
18. 11
09:00 - 17:00
Early BirdGroup Discount

Professional NGRX: Advanced Topics & Best Practices

2022 28. 11 -
01. 12
18:00 - 22:00
Early BirdGroup Discount

API Security Workshop with Dr. Philippe De Ryck (Online, Advanced)

9 am - 12 noon PT // 12:00 noon - 4 pm ET // 6pm - 10pm 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!