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.

Angular Logo
Storybook logo
Level.Intermediate
Duration.1 day

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!

Agenda

  • Atom icon

    Understanding Design Systems

    • Key components of a design system

    • Importance of design systems

  • CSS logo

    CSS Variables and Design Tokens

    • Creating and managing design tokens with a consistent design language

    • Integrating CSS variables in Angular components

  • Angular Logo - Templates

    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

  • Storybook

    Component-Driven Development with Storybook

    • Building and showcasing components

    • Documenting design system in Storybook

    • Addons and visual testing

  • Testing tube

    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.