Modern Web Podcast S11E3- Design System Engineering at Scale with Kathleen McMahon

This podcast episode explores the concept and definition of design systems and highlights their importance in streamlining the workflow for designers and developers. It discusses the balance between rigidity and flexibility in design systems and addresses the challenges of scaling them. The episode emphasizes thoughtful API design and collaboration between teams as strategies for scaling design systems. It also discusses the significance of design tokens and collaboration within teams, as well as considerations for setting up component libraries. The episode touches on the pros and cons of using Adobe's React ARIA hooks library and emphasizes the importance of proper understanding and testing of ARIA tags. It explores the complexities of building and maintaining component libraries, offering insights on balancing abstraction and usability. The episode provides practical guidance for teams starting to develop a design system, suggesting they begin with familiar tools and tokens. Lastly, it mentions the importance of finding personal hobbies for joy and peace. Takeaways • A design system is a collection of patterns and efficiencies that streamline the workflow in design and engineering, improving the experience for designers and developers. • Design systems can range from design patterns to include a component library, CSS framework, and brand guidelines, and can vary in sophistication and scope. • The balance between rigidity and flexibility within a design system is crucial. While it provides consistency, it should also allow for innovation and personal expression. • Scaling design systems requires careful planning, collaboration, and strategies to minimize disruptions and ensure backward compatibility. • Design tokens play a crucial role in establishing a consistent language for design elements within a design system. • The selection of the right framework for component libraries should align with the team's platform to gain traction from a business perspective. • The usage of Adobe's React ARIA hooks library should be considered cautiously, and the inclusion of unnecessary ARIA attributes should be avoided. • The complexity of building and maintaining component libraries should be balanced with usability and the power of variants. • Teams at lower levels of maturity can start developing a design system by conducting an audit of existing CSS, creating foundational elements, and prioritizing user needs. • Analyzing font sizes, styles, and spacings used in a team's projects can help consolidate and redefine the most important elements in a design system. • Pursuing personal hobbies that bring joy and peace is important for overall well-being and can foster positive interactions and connections.