Summary
An internal design system at The Dallas Morning News that unified Figma and Storybook to improve component reuse, visual consistency, and collaboration across teams.
Key Features
- Component library built with React and Tailwind
- Shared design tokens for color, typography, and spacing
- Storybook-powered documentation site with automated deployment
- Figma-integrated design components aligned with production code
Goals
- Speed up design and development through reusable components
- Improve consistency across the site
- Strengthen communication and collaboration between product, design, and engineering
- Reduce bugs and regressions through better testing workflows
Implementation
I served as a product owner and lead engineer, making the business case for the system, owning the roadmap and adoption plan, gathering requirements, and leading onboarding and communication. I also contributed hands-on by integrating Storybook.js into the codebase, building initial components, and documenting system guidelines.
This was a highly collaborative effort. Designers shaped the design system in Figma and communicated with engineers on best practices when mapping components to and from production implementations. Engineers worked together to define technical standards. I facilitated cross-functional discussions to align decisions and ensure consistency across tools and teams.
