跳到主要内容
About header

Saga 设计系统

Saga 是 Grafana Labs 的开源设计系统,它为 Grafana Labs 产品伞下所有产品建立了共享的视觉语言,并推动了整个 UI 的用户体验和交互一致性。

Foundations icon
基础
设计系统建立的共享视觉设计语言的一致性背后的核心理论和概念。
Components icon
组件
在 Grafana 内生成 UI 的小型 UI 部件。
Patterns icon
模式
全产品一致、可重复、预期的交互。
Resources icon
资源
了解如何在不偏离的情况下设计、构建和扩展 Grafana 的 UI。

概述

设计系统是一个连接的、包管理的、版本控制的软件产品,其中包含组织一致、高效、愉快地制作数字产品所需的最小组件集和指南。将其视为“系统系统”。

Saga 如何运作

Saga 团队致力于帮助 Grafanistas 和社区成功采用和使用 Saga 资产。为了确保这一点,Saga 团队管理和支持 Figma 资产和 React 组件。

Saga 指导原则

随着 Saga 的发展并解决越来越复杂的问题,这些指导原则有助于确保提供的工具和资源尽可能地为我们的用户提供最大的价值。

  • Saga 是通用的:Saga 中的每个部分或解决方案都不是特定于 Grafana 中的单个产品功能。它们可以被 Grafana Labs 的其他产品使用;— 例如具有共享价值
  • Saga 是可访问的:能够被所有类型的用户使用,无论其能力如何。无障碍功能已融入解决方案中,以确保
  • Saga 是灵活的:经过深思熟虑地构建和设计,以解决各种配置和情况
  • Saga 是连贯的:遵循 Grafana UI 已建立的现有视觉样式和模式
  • Saga 是定义明确的:有详细的文档和明确的限制,因此可以轻松理解如何以及何时使用它,以及为什么它比其他类似组件或模式更好的解决方案
  • Saga 是独特的:该贡献填补了当前组件/模式产品中存在的独特空白,而现有组件/模式无法合理地解决这些空白

我们如何支持使用和采用

在 Saga、设计师和开发人员之间建立一条开放的沟通渠道对于成功至关重要,也是提高每个人对设计系统的了解、使用和采用率的最佳方式。我们通过多种方式保持参与

  • 我们的 GitHub 项目 可供所有人查看我们现在和将来正在进行的工作。这是一个跟踪任何贡献工作的理想场所。
  • 我们积极参与我们的内部 Slack 频道:#grafana-design-system。在这里,您可以发布问题、获得答案、分享您的想法,甚至获得设计系统发布的更新。
  • 我们是 UX 反馈会议的积极参与者——这是一个提供和接收同行反馈以改进工作的平台。在 #ux Slack 频道中发布了这些会议的提醒和议程。如果您想加入这些定期会议,请要求加入该频道。

资源

Figma icon
Figma 资产
使用 Figma 组件库来设计和构建 Grafana UI。
Storybook icon
React 组件
参考 @grafana/ui Storybook 来构建插件并使用组件。