06: Design Systems in Action: Collaboration Between Designers and Developers

The Headway development team dives into the power of design systems and seamless designer-developer collaboration.

Learn about implementing design systems in various environments, automated design-to-code processes, and the crucial role of detailed design documentation.

Find out how tools like Tailwind and Storybook can enhance or complicate development. The team doesn't shy away from discussing the real-world implications of maintaining design systems and the delicate balance of collaboration required between designers and developers.

Discover how tools like Figma, Tailwind CSS, and Storybook can improve your workflow and consistency and reduce errors. Tune in for engaging debates and actionable tips on optimizing your design and development process. Whether you're a seasoned developer or just starting, this episode offers valuable takeaways you won't want to miss.

00:00 Introduction

01:50 Defining Design Systems and Their Importance

03:22 The Role of Figma in Design Systems

07:51 Tailwind CSS and Its Impact on Design Systems

10:28 Exploring Storybook and Its Alternatives

17:32 Design Systems in Mobile Development

22:04 Collaboration Between Designers and Developers

33:02 The QA Process and Design Review

34:48 Balancing Design Review with Development Cycles

37:52 Upcoming Conference Talk on Design Systems
YouTube Content on Design Systems:

• Headway YouTube Channel
• Design System Course for Figma

Tools and Libraries:

• Elixir Live Storybook: Elixir Live Storybook
• MediCode Application: MediCode AI/ML Product
• View Component (GitHub): View Component
• Lookbook (Storybook for View Components): Lookbook

Chromatic:

• Chromatic: Chromatic Visual Testing Tool

Tailwind:

• Tailwind CSS: Tailwind CSS

Figma and Design Systems:

• Figma: Figma Design Tool
• Headway Design Systems Course: Headway Design Systems Course
• Shipwright Design System by Headway: Shipwright Design System

Even-Keeled is a podcast by Headway, a digital product agency.

https://www.headway.io/