Saga Design System
Company: Grafana Labs
A comprehensive design system for, bridging Figma and React to unify design and development workflows, streamline component usage, and ensure consistency across platforms.
Overview
As Grafana evolved, so did its design needs. However, the lack of a structured design system led to inconsistencies, inefficiencies, and communication gaps between design and engineering teams. Recognizing these challenges, I led the creation of the Saga Design System, a comprehensive, scalable solution aimed at unifying Grafana’s interface components and streamlining workflows across teams. From strategy to execution, my role encompassed defining the system’s vision, aligning cross-functional teams, and ensuring long-term adoption through documentation, automation, and advocacy.
Lead Product Designer
Product Owner
Product Manager
Role
tools
Figma, Token Studio, Markdown,
skills
UX, UI, Research, Strategy,
Branding, Visual Design
Challenges & Insights
When I joined Grafana, I conducted an audit of existing design resources. It quickly became evident that the design ecosystem was fragmented. Three separate component libraries coexisted—a React library in Storybook and two distinct Figma libraries for dark and light themes. These disparate sources created confusion, making it difficult for designers and developers to find, use, and implement components consistently.
Beyond the structural fragmentation, the absence of centralized documentation left teams without a single source of truth. As a result, decisions were often made in isolation, leading to inconsistencies in implementation. Furthermore, the design-to-code pipeline lacked cohesion, with no clear process ensuring that Figma components accurately reflected their coded counterparts. This gap hindered efficiency and increased the workload for both designers and developers.
Through a series of interviews and collaborative workshops with designers and engineers, I identified core needs: a unified component library, a documentation hub for design and engineering alignment, and a structured contribution process that would allow teams to iterate and scale efficiently.
No dedicated team
With no person or team to own the resources accessibility has slipped, changes have been quiet, and advocacy with other teams hasn’t happened.
Ways of Working + Education
Inconsistently working in Figma results in varying file creation, annotation, and a reliance on tribal knowledge. The experience of using and being efficient in Figma is compromised.
Lack of documentation
There is little to no documentation on how to use components, colors, or even when and how to diverge from components.
Ecosystem Issues + Concerns
Components are named differently, things are missing, and the different sources are not connected to each other and not in sync.
Figma GAPS + Structure
Grafana’s Figma instance presents issues with locating files and resources when needed. Lacking complex patterns results in creation of fleeting work-arounds.
Strategy & Execution
To address these challenges, I devised a phased approach to building Saga—starting with unification, then documentation, and finally automation and governance.
Establishing a Unified Design System
The first priority was to consolidate Grafana’s UI libraries into a single, structured system. This required not just merging components but rethinking their organization to create a scalable foundation. By aligning the design language across dark and light themes and ensuring parity between Figma and React libraries, we laid the groundwork for a seamless designer-to-developer workflow.
To enhance discoverability and usability, I led the development of a centralized documentation site. Instead of scattered resources in Google Docs, the new platform provided a single source of truth for design tokens, components, and usage guidelines. The site served as a bridge between teams, offering clarity on how components should be designed, built, and maintained.
Driving Adoption Through a Company-Wide Hackathon
To accelerate adoption and raise awareness, I leveraged Grafana’s company-wide hackathon as a strategic launch event for Saga. Within a week, our team built the first version of the documentation site using Docusaurus, migrating essential guidelines and component details. To communicate the system’s impact effectively, I created a five-minute pitch video, highlighting how Saga would improve efficiency and scalability.
The initiative gained significant traction—Saga placed in the top three projects of the hackathon, earning executive visibility and securing resources for further development. Following the event, we expanded the design team, hiring a dedicated designer to manage the Figma libraries and reinforce ongoing governance.
