Skip to main content

Saga Design System Templates

Saga design system templates are a set of pre-constructed patterns and code frameworks intended to provide developers and designers with a robust starting point for building user interfaces within the Grafana ecosystem. These templates are higher-level abstractions than the individual components in the design system, offering a more streamlined and efficient approach to UI development.

Saga design system templates aim to address the following issues:

  • The lack of a reliable framework and standardized patterns results in inconsistent UIs for similar page types such as pages with lists or tabular data, and different looks for similar functionalities across various pages. This not only creates a fragmented user experience but also leads to difficulties for users due to the increased cognitive load.
  • Designers and developers have to spend significant effort when implementing new UI features, including for common layouts that have been implemented before. This extra duplication of effort complicates the UI development process more than necessary.

When to use templates​

Use templates when you want to:

  • Create a new page or feature that is similar to an existing one.
  • Implement a common layout or pattern that has been implemented before.