The design system concept can be differently defined according to each person’s background. Designers may say that a design system is a style guide while developers may say it is UI standards, or specs, or even assets. Whatever the words used, a solid design system might have different purposes, but one can go through all backgrounds and areas: to be documentation.

可以根据每个人的背景不同地定义设计系统概念。 设计师可能会说设计系统是样式指南，而开发人员可能会说它是UI标准，规范甚至资产。 不管使用什么措辞，一个坚实的设计系统可能都有不同的目的，但是一个系统可以遍及所有背景和领域：作为文档。

There are several ways to represent one. You can have static documentation using tools like Sketch, Invision, or Figma, usually preferred and used by designers. Interactive representation using tools like Storybook, bit.dev, or Zeplin, typically lead by developers. The great benefit of the second kind of documentation is that it can show all different states, dynamically changed by you, as if you were interacting with the implementation in the “real” product. No more unexpected states or “what is the button color when hovered?” slack messages.

有几种表示方法。 您可以使用设计人员通常首选和使用的工具(例如Sketch ， Invision或Figma)获得静态文档。 使用工具，如交互式表示故事书 ， bit.dev ，或Zeplin ，通常由开发商引起。 第二种文档的最大好处是，它可以显示您动态更改的所有不同状态，就像您正在与“真实”产品中的实现进行交互一样。 不再出现意外状态或“ 悬停时按钮的颜色是什么？” 松弛消息。

Everybody knows that naming things is hard, right? If you use the design system’s components, you no longer have to deal with that. Stop having different names for the same thing: one project with input, another with form field, and another with text field. Have just one, rich and well defined, and everybody will be on the same page.

大家都知道命名很难，对吗？ 如果使用设计系统的组件，则不再需要处理。 停止为同一事物使用不同的名称：一个带有输入的项目，另一个带有表单字段的项目 ，另一个带有文本字段的项目 。 只有一个，内容丰富且定义明确， 每个人都会在同一页面上 。

解决问题(一次！) (Solve problems (once!))

Even the smallest component can have to deal with multiple usage scenarios. If you solve a problem properly in one place, you don’t need to solve it every time you have the same usage scenario, and you won’t forget to implement some edge and not common scenarios. Make room for productivity, implement wisely. New use case? Solve it in the design system, you’ll have it solved next time, and you can skip it in a blink of an eye.

即使是最小的组件也可能必须处理多种使用情况。 如果您在一个地方正确地解决了一个问题，那么您不必每次都具有相同的使用场景时就解决它，并且您将不会忘记实施某些优势和不常见的场景。 为生产力腾出空间，明智地实施。 新用例？ 在设计系统中解决它，下一次您将解决它，您可以在眨眼之间跳过它。

When you implement a design system, you join all components in just one place. You can have it exported as a library to use in all projects, allowing to code reuse, avoiding code duplication. It also means less CSS and less styling, no more slightly different components that should be equal, no more different margins and colors, no more small style fixes kind of commits. However, have in mind that changing anything in the library will change in all products when updated. That can be either good or bad: be careful with breaking changes.

实施设计系统时，将所有组件仅放在一个地方。 您可以将其导出为库以在所有项目中使用，从而允许代码重用，避免代码重复。 这也意味着更少CSS和更少的样式，不再应该具有相同的组件，没有更多不同的边距和颜色，没有更多的小样式修复提交。 但是，请记住，更改库中的任何内容都会在更新所有产品时对其进行更改。 这可能是好事或坏事：小心更改。

重复 (Iterate)

A design system is itself a project, but it shouldn’t have an end, it should grow as projects, and the company grows too. The process of defining it is iterative. Improvements are made, and components are added, don’t expect to have a finished design system from one day to the next. New projects bring new components: a design system is like a company’s baby, it starts small and will grow and improve as time goes by. Iterate. Redesign. Improve.

设计系统本身就是一个项目，但它不应有目的，它应随着项目的发展而增长，公司也应随之发展。 定义它的过程是迭代的。 进行了改进，并添加了组件，不要指望一天到一天都有完整的设计系统。 新项目带来了新的组件：设计系统就像公司的婴儿一样，从小规模开始，随着时间的流逝将不断发展和完善。 重复。 重新设计。 提高。

You can work in a project and update the design system at the same time, npm link is there for you. It allows developers to link the design system’s repository to the project that they are working on.

您可以在一个项目中工作并同时更新设计系统， npm链接可为您提供。 它允许开发人员将设计系统的存储库链接到他们正在从事的项目。

[Design System] npm link 
[Project] npm link @your-design-system-library

This way, the project will no longer look for the package online, it will consume it locally, which means that every time the design system changes, your project will be updated. When the library is updated to the next version, there are no unexpected errors or changes. No excuses not to update the design system, right?

这样，项目将不再在线查找包，而将在本地使用它，这意味着每当设计系统更改时，您的项目就会被更新。 将库更新到下一个版本时，不会发生意外错误或更改。 没有理由不更新设计系统，对吗？

真理的单一来源 (Single source of truth)

Communication has a significant role in product success. When having different teams working for the same end, they need to be aligned. They need to work with the same thing in mind and to communicate properly. Having a design system implemented improves the communication between all team members since there is only one single source of truth resulting in transparency, well-defined process, and coherent products.

沟通对于产品成功至关重要。 当有不同的团队为同一目标工作时，他们需要保持一致。 他们需要牢记同一件事并进行正确沟通。 实施设计系统可以改善所有团队成员之间的沟通，因为只有一个单一的事实来源会导致透明，定义明确的流程和连贯的产品 。

The communication between designers and developers isn’t always clean and precisely done. If both use the same documentation, designers will know that they only need to review it in one place and not everywhere the component is implemented. On the other hand, developers will be sure that they are using the right and most updated component.

设计师和开发人员之间的交流并非总是干净无误的。 如果两者都使用相同的文档，则设计人员将知道他们只需要在一个地方而不是在组件实现的所有地方进行审阅。 另一方面，开发人员将确保他们使用的是正确且最新的组件。

We all know that everything changes fast. A single source of truth, updated and well defined, can improve the communication between all team members, avoiding lost or incorrect information. In addition, having all implemented as reusable components lead to a faster and optimized implementation. A design system can contribute to organized teams and to product success, give it a chance.

我们都知道，一切都会快速变化。 更新并定义明确的单个事实来源可以改善所有团队成员之间的沟通，避免丢失或错误的信息。 另外，将所有实现都实现为可重用组件可以实现更快，更优化的实现。 设计系统可以为有组织的团队和产品成功做出贡献，给它一个机会。

See more about npm link here.

在此处查看有关npm链接的更多信息。