Modern Design Systems with Angular
Unlock the secrets of design systems in Angular. Learn to create powerful and extensible components using everything Angular provides. Discover how Storybook can ease the documentation process for your components while making sure nothing breaks.
Intermediate
1 dayAgenda
Understanding Design Systems
Key components of a design system
Importance of design systems
CSS Variables and Design Tokens
Creating and managing design tokens with a consistent design language
Integrating CSS variables in Angular components
Performant, reusable and extensible Angular components
Best practices for component-driven development
Template and Content Queries
Dependency Injection
Directives and Hostbindings
Component configuration using InjectionTokens
Dynamic Content with DI
Best Performance using Signals and OnPush
Test harnesses
[Optional] New Control Flow / Input / Output
Component-Driven Development with Storybook
Building and showcasing components
Documenting design system in Storybook
Addons and visual testing
Ensuring Quality and Consistency
Accessibility visual and automated testing
Interactive tests in Storybook
Test host and test harnesses
Description
The web is constantly evolving, introducing new tools and methods to enhance user experience and development efficiency. However, maintaining design consistency and scalability across large projects can be challenging. Enter modern design systems with Angular – a solution to streamline your workflow and ensure cohesive design.
Design systems are vital for creating visually appealing, maintainable, and scalable applications. A consistent design language is crucial for delivering a seamless user experience. However, many resources lack practical, framework-specific guidance on implementing these systems.
Our workshop delves into the practical aspects of creating and managing design systems with Angular.
You'll learn to use css variables and design tokens to style your Angular components effectively. Angular is a component-based framework and has a lot to offer when it comes to building performant, reusable and extensible components, and we cover almost all Angular has to offer to build every component you need.
We’ll also guide you through component-driven development using Storybook, a powerful tool for building and documenting reusable components. By mastering Storybook, you'll ensure your components are well-documented, visually tested, and accessible.
Ensuring your components work flawlessly is essential. This workshop will cover best practices for writing tests to maintain the robustness of your design system.
You'll leave this workshop with a comprehensive understanding of how to build, document, and test reusable components, ensuring your design system is scalable and maintainable. Practical exercises will reinforce your learning, providing you with hands-on experience to apply these techniques to your projects.
Join us to transform your workflow. Elevate your Angular projects with a design system that ensures consistency, enhances collaboration, and scales effortlessly with your growing needs.
Takeaways
Gain expertise in creating and managing design tokens variables to establish a consistent design language across your projects.
Learn how to best use CSS variables and integrate them into your Angular components, ensuring design consistency and efficiency.
Develop skills in building modular and reusable components using Angular, following best practices for maintainable and scalable code.
Master the use of Storybook to document and showcase your components, improving collaboration and communication between designers and developers.
Understand the importance of testing and learn to write tests for your components, ensuring robustness and reliability.
Equip yourself with the knowledge and tools to maintain and scale your design system as your projects grow, ensuring long-term success.
Julia Rapczynska
Software Engineer
Markus Nissl
Software Engineer
Enea Jahollari
Software Engineer, Trainer
