在上一篇文章中，我们探讨了建立开发人员和设计师之间共享语言的重要性，并介绍了设计系统（DS）的基本概念。在该基础的基础上，本文将研究从UI-UX和开发的角度创建DS的基本结构。通过使这两个关键方面保持一致，我们旨在对如何结构和实施成功的设计系统进行全面的了解。

设计系统结构

除了定义设计系统的基本结构外，UI-UX与开发团队之间的协作还带来了许多好处。通过共同努力，UI创建的速度显着提高，从而可以快速进行原型和迭代。这个简化的过程不仅加速了开发，而且还确保了一致且具有凝聚力的用户界面。此外，协作努力促进了有效的实施，因为开发人员可以利用设计系统中预定义的组件和样式，从而减少冗余并最小化编码工作。 UI-UX与开发团队之间的协同作用最终导致更有效，有效的工作流程，以更快，更可扩展的方式提供高质量的用户体验。

从UI-UX的角度来看设计系统结构

从UI-UX的角度来看，设计系统结构涉及逐步工作流程，该工作流程始于定义令牌。由于默认情况下已经建立了大多数基本原子（基本的HTML标签），因此设计师的重点转移到创建和完善令牌。随后，将令牌应用于不同的原子，设计师开始在特殊组件上迭代。这个迭代过程一直持续到建立坚实的基础为止，为在变体，主题和布局上工作构成基础。这种方法保证了一种有条不紊的迭代策略来构建设计系统，使UI-UX团队能够在整个设计过程中保持适应性和扩展性，以开发统一和和谐的设计。

我们选择无花果作为创建设计系统结构的工具。

要查看此工作流程中的示例，您可以查看我为此意甲创建的Figma file。

这是添加一些规则的时刻，可以帮助您创建一个更好的设计系统：

• 第一个：“每个业务规则都应在代码中而不是在设计系统中实现” 。此规则将帮助您创建一个更好的设计系统，并避免创建“ Frankenstein”设计系统。

• 第二个：“顺序和一致性是成功的关键。” 不要创建具有很多组件的设计系统，创建具有一些组件的设计系统，而是使用一些组件，而是使用许多变体。

• 第三个：“创建视觉行为，而不是业务行为。” 考虑将组件放在容器中需要的规则。含义，容器应处理组件的位置，而不是组件本身。在卡片的示例中，可以将按钮居中，但是在另一个容器（假设表格）中，该按钮可以在右侧对齐。

从开发的角度来看设计系统结构

从开发角度来看，设计系统结构涉及将设计系统的结构转换为代码。它需要就样式和资源的组织，选择开发框架以及建立编码和实施指南做出关键决策。此过程确保了一致，有效的开发工作流程，开发人员可以轻松访问和利用设计系统提供的预定义组件，样式和资源。通过定义用于编码和实施的清晰路线图，开发团队可以维持代码一致性，简化开发工作以及实现团队成员之间的无缝协作。这种方法为建立可扩展和可维护的软件解决方案奠定了坚实的基础，同时遵守建立的编码实践并利用设计系统的功能。

我们选择反应作为我们的框架来创建设计系统结构。

这是从开发角度来看设计系统结构的示例：

├── src
│   ├── components
│   │   ├── button
│   │   │   ├── button
│   │   │   ├── button.js
│   │   │   ├── button.css
│   │   │   └── index.js
│   │   ├── input
│   │   │   ├── input.js
│   │   │   ├── input.css
│   │   │   └── index.js
│   │   ├── form
│   │   │   ├── form.js
│   │   │   ├── form.css
│   │   │   └── index.js
│   │   ├── card
│   │   │   ├── card.js
│   │   │   ├── card.css
│   │   │   └── index.js
│   │   ├── header
│   │   │   ├── header.js
│   │   │   ├── header.css
│   │   │   └── index.js
│   │   ├── footer
│   │   │   ├── footer.js
│   │   │   ├── footer.css
│   │   │   └── index.js
│   │   └── ...
│   ├── templates
│   │   ├── home
│   │   │   ├── home.js
│   │   │   ├── home.css
│   │   │   └── index.js
│   │   ├── about
│   │   │   ├── about.js
│   │   │   ├── about.css
│   │   │   └── index.js
│   │   └── ...
│   ├── styles
│   │   ├── tokens.css
│   ├── assets
│   │   ├── logo.svg
│   │   ├── hero.png
│   │   ├── ...
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── ...

在这一点上，我们排除了所有项目的测试，文档和项目的其他重要方面的参考。我们将在以后的帖子中讨论这些主题。

根据我的经验，我们可以将样式表分为两个部分：一个用于行为，另一个用于视觉呈现。

在反应组件的发展中，通常遵循分离关注的原理，其中组件的每个部分都具有特定的作用。

处理行为的样式表侧重于组件的交互和内部逻辑。在这里，您定义了与状态操作，事件，动画以及组件正确功能所需的任何其他功能有关的规则。例如，在下拉列表中，行为样式表可以包含代码以切换选项框的可见性。

另一方面，视觉样式表负责处理组件的视觉外观。它定义了与颜色，定位，边距，动画和其他视觉属性有关的样式。此样式表有助于实现所需的视觉设计并确保整个应用程序的一致性。

遵循此原理，在上一个示例中，在按钮文件夹的内部您有一个用于行为的样式表，称为button.css.css.css，另一个用于在文件夹“模板”和“样式”内的视觉呈现。

分开行为和视觉样式表提供了一些好处。它改善了代码组织，使其更容易理解和维护。它还可以可重复使用，因为您可以使用具有不同视觉样式的相同行为样式，反之亦然。此外，它允许在功能上的开发人员与专注于视觉方面的设计师之间明确分开关注。

通过将行为和视觉样式分开，您可以在设计系统中创建更模块化和灵活的反应组件。这促进了代码可重复性，开发人员和设计师之间的协作，并有助于维护可扩展和一致的代码库。

巨大的好处，但是如何呢？

项目早期开发设计系统的关键优势之一是它允许明确的角色和职责划分。通过创建与项目需求保持一致的稳健结构，设计人员可以专注于制定用户体验，而开发人员可以专注于实施产品以及在业务环境中驱动用户体验的基础信息流。这种方法确保了开发过程仍然以业务为中心，而不是仅专注于前端实施。通过利用设计系统，团队可以优化他们的努力并创建无缝的合作，以优先考虑整体业务目标，从而实现更有效和有影响力的开发过程。

下一步

当我们探索了设计系统的基本概念及其在创建一致的用户体验方面的重要性时，下一步是更深入地研究实际实现。在即将到来的文章中，我们将仔细研究如何将这些概念转化为代码。我们将探讨特定的技术，最佳实践和代码示例，以编写设计系统的核心元素，例如组件，令牌和样式。通过对如何为设计系统编写代码的全面了解，您将拥有必要的知识来创建可扩展和可重复使用的UI组件。准备好在下一篇文章中卷起袖子，并深入研究代码实施的迷人世界。

跟着我，我不会让你失望！;）