design-system：官方设计系统，打造一致性数字化界面

design-system：官方设计系统，打造一致性数字化界面

design-system The Equinor design system 项目地址: https://gitcode.com/gh_mirrors/designsystem3/design-system

项目介绍

Equinor Design System（简称EDS）是Equinor公司官方设计系统，旨在为内部数字界面的设计、原型制作和开发提供结构化、指导性工具。EDS不仅为设计师和开发人员提供了构建一致性、包容性和灵活性解决方案的框架，而且通过代码实现了设计系统的落地。

EDS的核心在于其提供的指导原则和工具，这些工具和原则能够帮助团队成员快速构建出符合公司品牌和设计标准的应用界面。

项目技术分析

EDS的技术基础是Figma设计工具，所有设计元素和组件都在Figma中定义。项目代码库包含了EDS在代码层面的实现，支持React框架，并且提供了设计 tokens、图标、字体等关键元素，使得开发人员可以轻松地在项目中应用设计系统。

• React组件：EDS通过React组件实现了设计系统中各种元素的编码实现，包括按钮、图标等。
• 设计tokens：从Figma中提取的设计决策被转化为代码，形成了设计tokens，这些tokens可以作为构建自定义组件的基础。
• 图标系统：EDS自定义了一套图标系统，并提供了相应的React组件和独立的图标包，方便在项目中使用。

项目技术应用场景

EDS主要应用于Equinor公司的内部数字界面设计，包括但不限于企业内部的Web应用、管理系统和移动应用。其应用场景包括：

• 企业内部应用：通过EDS构建统一风格的企业内部应用，提升用户体验和操作效率。
• 管理系统界面：利用EDS设计规范和管理系统的用户界面，确保用户界面的一致性和可维护性。
• 移动应用：将EDS应用于移动应用设计，保持品牌形象的一致性和用户界面的简洁性。

项目特点

1. 一致性：EDS确保了Equinor公司所有数字产品的设计一致性，有助于建立品牌识别度。
2. 灵活性：设计系统提供了多种组件和设计tokens，使得开发人员能够灵活地构建各种界面。
3. 包容性：EDS考虑了不同用户的需求，支持构建无障碍的界面。
4. 高效性：通过提供预定义的组件和工具，EDS极大地提高了设计和开发的效率。

以下是EDS设计系统的具体特点：

• 基于Figma：Figma作为设计系统的单一源头，确保了设计的一致性和准确性。
• React集成：React组件的集成使得开发人员可以快速地将设计转换为代码。
• 独立的设计tokens：设计tokens可以作为独立包使用，支持不同技术栈的实现。
• 丰富的图标库：自定义的图标库提供了丰富的视觉元素，增强了用户体验。
• 多语言支持：EDS支持多种语言，便于国际化。

通过以上特点，EDS不仅为Equinor公司提供了高效的设计和开发工具，也为用户带来了统一和高质量的数字体验。

design-system The Equinor design system 项目地址: https://gitcode.com/gh_mirrors/designsystem3/design-system