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.
Are you struggling to maintain design consistency across your Angular projects?
Want to streamline your design-to-development workflow and create cohesive, scalable design systems? Look no further!
Our hands-on workshop will help you master the use of variables and design tokens to style components in Angular.
Gain a deep understanding of what Angular has to offer when it comes to building reusable and extensible components. Learn to build and document components in Storybook.
Additionally, master testing your components to ensure they work flawlessly with effective tests. Transform your workflow and elevate your Angular projects with our expert-led sessions!
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.
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.
Key components of a design system
Importance of design systems
Creating and managing design tokens with a consistent design language
Integrating CSS variables in 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
Building and showcasing components
Documenting design system in Storybook
Addons and visual testing
Accessibility visual and automated testing
Interactive tests in Storybook
Test host and test harnesses
Software Engineer
Software Engineer
Software Engineer, Trainer
