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

Language
This international training takes place in English.

 

Highlights

✅ 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.

 

Requirements

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: office@angulararchitects.io

 


02.05. - 03.05.2022

Date & Time:

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

Location:

Remote

English

Your Trainers:

Andreas Wissel ,

Contents



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

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
2022

Trainer: Rainer Hahnekamp

Remote

English

08. 03 -
10. 03
2022

Trainer: Manfred Steyer, GDE und Michael Zikes

Remote

English

25. 04 -
26. 04
2022

Trainer: Rainer Hahnekamp

Remote

English

28. 04 -
29. 04
2022

Trainer: Rainer Hahnekamp

Remote

English

02. 05 -
03. 05
2022

Trainer: Andreas Wissel

Remote

English

12. 07 -
14. 07
2022

Trainer: Manfred Steyer, GDE und Michael Zikes

Remote

English

Only One Step Away!

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

Jetzt anfragen!