The Tooling team at YouTube supports a suite of tools that serve many kinds of users. The tools ecosystem was growing with new tools being developed to meet new use cases. There was a need to create a cohesive design system that would serve current and future tools.
I collaborated closely with the Senior designer to deliver specs, create documentation, and setup a Figma library of reusable components.
Across the tools within the organization, there were different interaction patterns, styles, and code libraries used. For users that worked between the tools, this inconsistent implementation led to a disjointed experience and more work for engineers.
With these pain points in mind, the goal was to build a design system to align multiple tools and reduce repetitive work.
Since the system was created for preexisting tools, I conducted an audit to learn which elements are commonly used across each page. The list of components were then sorted by complexity following the Atomic Design principle of building up from small to large components.
Following the audit, documentation was created for each proposed component. Documentation guidelines included a general overview of how the component is used, interaction guidelines, and style specs. To align with Google’s material design library, guidelines leveraged existing documentation as closely as possible.
As guidelines were completed, I created a reusable component in Figma that designers could use in their work. Components applied Figma’s styles, variant, and property features and covered base components up to templates.
The documentation continues to be a source of truth for designers and engineers in the organization. Updates ensure new components draw from the system and follow the design principles. The components reduce the amount of raw html by 10-60% and reduce engineering effort significantly and has gained buy-in from engineers for component library work.