657: David Darnes on Web Components and Design Systems
Mar 24, 2025
auto_awesome
David Darnes, a designer and front-end developer renowned for his work on the Nord design system, shares insights on building versatile design systems and web components. He discusses the advantages of integrating web components across different frameworks, highlighting their role in bridging legacy and modern tech. Darnes also explores the creative potential of standalone web components and emphasizes the importance of API refinement for team tools. The episode is sprinkled with humor and fascinating anecdotes about the intersection of branding and design.
David Darnes emphasizes the importance of design systems in modern web development to ensure consistency and scalability across applications.
The implementation of web components at Nord Health allows for reusable UI elements across different technology stacks, enhancing design consistency.
Darnes discusses the challenge of maintaining relevant design systems while balancing creative freedom and structured development to prevent component bloat.
Deep dives
Introduction to David Dardens
David Dardens, a web developer with over 15 years of experience, plays a central role in the episode. Currently working at Shopify, he has a rich background in design systems gained from previous work at various tech companies. His humble demeanor is evident as he discusses his father's influence and involvement in his life and career. The conversation highlights David’s transition from agency work to becoming a notable figure in the product world, reflecting his experience and expertise in design systems.
The Importance of Design Systems
Design systems serve as the backbone of modern web development by ensuring consistency and scalability across applications. David shares his experience working on Nord Health's design system, which is recognized as a benchmark in the industry. He emphasizes the collaborative process involved in creating a design system, highlighting that a successful team dynamic can significantly influence the output's quality. This system not only provided a strong foundation for Nord Health but also acted as a promotional tool to attract talent and showcase the company's commitment to quality design.
Web Components and Their Advantages
Web components are discussed as a flexible and robust solution for building reusable UI elements. David explains how Nord Health implemented web components, allowing development across different technology stacks without the need to reinvent the wheel. This approach ensures that the design remains consistent, regardless of the underlying structure, enhancing both legacy and modern applications. The use of web components also facilitates easier management of design tokens, which are important for maintaining color and style consistency across various interfaces.
Managing State and Events in Components
The dialogue shifts to handling component state and events, showcasing the practicality of using attributes for managing dynamic changes. David points out that events generated from components, such as a dismiss action on notifications, empower developers to control state changes externally. This external control is crucial for maintaining robust application architecture while keeping components modular and functional. By implementing simple event listeners, web components can seamlessly integrate into broader application logic, enhancing interactivity without complicating the user interface.
Challenges and Future of Design Systems
The conversation addresses the ongoing challenges of keeping design systems updated and relevant. David notes that as requests for new components and features accumulate, there is a risk of design system bloat. He emphasizes the need for a focused approach to component creation, advocating for strong opinions on design principles to maintain quality. Ultimately, he reflects on the balance between the creative freedom of designers and the structured nature of development that design systems aim to achieve.
David Darnes joins us to talk about his work on the Nord design system, writing web components, working with embeds and web components, thoughts on building a progress bar or notification component, keeping design systems and design tools in sync, and tricks for components and variables.
Keeping up with customer emails shouldn’t feel like flying a 747. Jelly’s team email inbox makes it easy and affordable: one flat price per team, not per user. No surprise bills—just a simple shared inbox that helps your team respond faster, stay organized, and keep customer conversations flowing smoothly. Try Jelly now for free and get 15% off!
Remember Everything You Learn from Podcasts
Save insights instantly, chat with episodes, and build lasting knowledge - all powered by AI.
