协同设计
第2部分：实现共同愿景的大风设计系统金宝搏彩票

|通过加布和用户体验团队|

In our last post，we illustrated the problem of having products with different experiences and how the UX team started the conversation towards fixing that problem. Our solution was to create a comprehensive design system for all Gale products to follow. Now, we move on in Part 2 to how we created our design system. In particular, we’ll look at the tools we used to build it, how it’s impacted our design, and provide a preview of the design system itself.

Selecting the right tool for the job

回顾一下，一个设计系统是标准化的，可重复使用的用户界面（UI）组件和交互准则的集合整个组织的产品中使用。通常情况下，设计师创建初始设计系统，但最终它是完整的团队，包括产品经理和开发人员，是负责更新，实施和维护的设计系统支持的统一的用户体验。

有设计师可利用的工具有多种选择，当涉及到可视化定义UI模式，我们选择了素描。我们喜欢素描的基于矢量插图的能力，才能创建可重用组件库，以及版本控制功能（通过插件）。现在，让我们在每一个这些功能，以及它如何帮助我们密切关注。

矢量图片可扩展性

Vector-scalable images allow us to create graphics and icons at one size and easily re-scale them without losing quality. These images can be used in place of standard image formats like PNG or JPEG which don’t scale well. The benefit is that we create the images once and then the developers can make it any size or color they need through code.

可重复使用的组件库

图书馆是也许在草图创建一个设计系统的目的是最有价值的功能。在素描，设计人员可以创建一个UI组件 - 比方说，一个按钮 - 然后将其标记为一个符号。这产生，然后可以放置在设计原型的按钮的主副本。真正神奇的是，如果按钮样式的变化，只需要在主副本进行更新，然后将这些变化自动出现在所有的实体模型的。有了这些可重用的组件，该团队UX可以打造出这都可以从一个地方更新UI组件的完整库。这意味着我们不必做字体或颜色变化随时更改每一个按钮，并为我们节省了很多额外的工作。

版本控制

最后，版本控制插件叫做厂，UX团队的每个成员都可以同时进行更改设计系统。这意味着每个人都可以不必担心影响彼此的工作的贡献和，如果碰巧两个人对同一零件的工作，版本控制有助于排序这一切了。

桥接设计和开发之间的差距

在UX团队设计了各组分之后，它是由开发团队创建可重用的代码。该团队UX与开发商合作，选择作出反应，我们会用它来实现组件的JavaScript库。因为大风有这金宝搏彩票么多的产品，在发展过程中的任何改变显著提出关于是否现有的代码需要重写的问题。反应在这方面特别有吸引力，因为它可以无缝集成到现有的应用程序，可以让开发者实现新的组件，而不会干扰没有写有反应的特点。

At first, we ran small experiments with simple components like buttons and lists in a test environment. After developing a better understanding of how React fit into our codebase, we incorporated five React components into live product. One of the main benefits of React that became immediately apparent was the ability to separate our presentation layer (HTML & CSS) from our logic layer (JavaScript). React made these changes efficient and allowed for easy reuse of design components.

已具备了设计系统现在可以很容易地知道，当我们遇到一个不符合要求的部件做什么。其中的三件事情可能发生：

1. 开发者在交换该组件的设计系统代码
2. 如果代码是不存在的，开发人员构建匹配设计的组件
3. 如果组件不是设计系统的一部分，然而，UX团队设计的组件的开发者实现

获得第一个看看！

After so much discussion of why and how we have built a design system, it’s time for a preview of what we’ve made so far. We will share screenshots from our files showing some examples of buttons, form controls, and icons that illustrate different types of content found in our products. The images shown here make up some of the components that we designed and tested in early development phases.

Keeping Momentum

该设计系统现在是一个活件我们的设计和开发过程中。我们将继续扩大双方在我们设计系统的碎片，让他们在产品中实现。虽然UX团队领导的努力，entireorganization makes it possible. Our system has been in use for the past six months and it’s already become part of everyday development. It’s taken a lot of time and effort, but the benefits are already clear and the vision of what lies ahead is even better.

下一站：In Part III, the UX team will give a complete overview of the design system as it stands now, focusing on the reasoning behind our designs and how they benefit the user.