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
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
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
2023
11. 04 -
12. 04 09:00 - 17:00 (CET)
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)
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)
12. 05 09:00 - 17:00 (CET)
2023
10. 07 -
13. 07 13:00 - 17:30 (CET)
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.
