Here is a topic discussed in every company: communication between departments.

这是每个公司讨论的主题： 部门之间的沟通 。

As Front-End developers, we sit in between UX designers and Back-End developers. Our apps must follow the guidelines from the UX, be compatible with Back-End APIs, while meeting the business requirements from our Product Owners.

作为前端开发人员，我们介于UX设计人员和后端开发人员之间。 我们的应用程序必须遵循UX的准则，与后端API兼容，同时满足产品负责人的业务要求。

In this article, I aim to address the relationship between UX and FE departments. An efficient way of strengthening the relationship between the two is to learn sufficient UX to better understand what our colleagues do. Meanwhile, we can share with them some of our experience as developers.

在本文中，我旨在解决UX和FE部门之间的关系。 加强两者之间关系的一种有效方法是学习足够的用户体验，以更好地了解我们的同事的工作。 同时，我们可以与他们分享我们作为开发人员的一些经验。

I’d like to share with you my findings after extensive research. So without further ado, welcome to Design Systems!

经过广泛的研究，我想与您分享我的发现。 因此，事不宜迟，欢迎使用Design Systems ！

什么是设计系统 (What Design Systems are)

A Design System is an ecosystem of tools, guidelines, shared values and principles which help teams ship more efficiently consistent design.

设计系统是由工具，指南，共享价值和原则组成的生态系统，可帮助团队更有效地交付一致的设计。

为什么要设计系统 (Why Design Systems)

Design Systems enable product teams to obtain consistent results faster by:

设计系统使产品团队可以通过以下方式更快地获得一致的结果：

• synchronising all designers and product teams同步所有设计师和产品团队
• reducing communication issues by building a shared vocabulary通过建立共享词汇减少交流问题
• having one solution for one component一种成分有一种解决方案
• easier testing at component level组件级别的测试更加轻松
• faster iterations with established design patterns建立设计模式，加快迭代速度
• future-proof base for extensions and refinements面向未来的扩展和完善基础

谁使用设计系统 (Who uses Design Systems)

“69% of enterprise companies either actively use a design system or are currently working on one” — UXPin (read more)

“ 69％的企业公司要么积极使用设计系统，要么正在开发一种系统” — UXPin( )

感言 (Testimonials)

“… one day, while putting together a last-minute prototype, our team was able to create nearly 50 screens within just a few hours using the framework our library provided.” — Karri Saarinen, AirBnb (read more)

“……有一天，在组装最后一分钟的原型时，我们的团队能够使用我们的库提供的框架在短短几个小时内创建近50个屏幕。” — AirBnb的Karri Saarinen( 了解更多 )

“That’s the beauty of building a design system. By deciding on a detail once, you free up your entire product development team to focus on solving actual customer problems.” — Hubspot team (read more)

“这就是构建设计系统的美。 通过一次确定一个细节，您可以腾出整个产品开发团队的精力，专注于解决实际的客户问题。” -Hubspot团队( 了解更多 )

这是我们的路线图： (Here’s our Roadmap:)

1. Product anatomy

   产品解剖

   1.1 Style Guides

   1.1样式指南

   1.2 Component Libraries

   1.2组件库

2. Designing a Design System

   设计设计系统

   2.1 UX tools

   2.1 UX工具

   2.2 UX laws

   2.2用户体验法

   2.3 Component Workshop

   2.3组件研讨会

   2.4 Atomic Design (

   2.4原子设计(

   refreshed)

   刷新 )

3. Developing a Design System

   开发设计系统

   3.1 Pitfalls

   3.1陷阱

   3.2 Formula of success

   3.2成功秘诀

   3.3 Web Components in Design Systems

   3.3设计系统中的Web组件

   3.4 Quick tips on starting a Design System

   3.4启动设计系统的快速提示

1.产品解剖 (1. Product anatomy)

A Design System is based on a Component Library which is based on a Style Guide, on top of which are applied rules, principles and flavours tailored to the owner’s needs. All the products created with a Design System will be consistent.

设计系统基于组件库 ，该组件库基于样式指南 ，此外，还根据所有者的需求应用了规则，原理和风格。 用设计系统创建的所有产品都是一致的 。

1.1样式指南 (1.1 Style Guides)

A Style Guide is a collection of predefined rules, designers and developers should follow to ensure consistency across apps, websites and print.Here are the topics that it covers:

样式指南是预定义规则的集合，设计人员和开发人员应遵循这些规则以确保应用程序，网站和印刷品之间的一致性。此处涉及的主题包括：

• Color Palette调色板
• Typography版式
• Grid System网格系统
• Spacing间距
• Iconography影像学
• Imagery意象
• Tone of Voice说话的语气

1.1.1调色板 (1.1.1 Color Palette)

Primary colors: the main colors that are specific for the companySecondary colors: additional colors that are used for highlightingNeutral colors: shades of grey used for increasing readability

原色 ：主色调是特定为公司二次色：用于提高可读性的灰色阴影：这是用于高亮显示中性色其他颜色

Throughout the history, color schemes have been used to define different feelings, seasons and ceremonies based on culture and origin. There are numerous study cases on colors that can help us choose (e.g.: Psychology of colors ).

在整个历史中，颜色方案已被用来根据文化和起源定义不同的感觉，季节和仪式。 关于颜色的大量研究案例可以帮助我们进行选择(例如：颜色心理学)。

You can read more about colors here.

您可以 在此处 阅读有关颜色的更多信息 。

1.1.2版式 (1.1.2 Typography)

Typography is the art of arranging letters and text in a way that makes the copy legible, clear and visually appealing to the reader. It involves font style, appearance and structure. Although, it was specialised initially for books and magazines. Eventually it found it’s way into the digital world.

印刷术是一种使信件和文本清晰 ， 清晰且在视觉上吸引读者的方式来排列字母和文本。 它涉及字体样式，外观和结构。 虽然，它最初专门用于书籍和杂志。 最终，它发现它已进入数字世界。

Vertical Rhythm is a typographic practice that aims to provide a better reading experience by establishing a vertical harmony between text elements.

垂直节奏是一种印刷实践，旨在通过在文本元素之间建立垂直和声来提供更好的阅读体验。

If you would like to deep dive into typography, here are few articles to have in mind:

如果您想深入了解版式，请记住以下几篇文章：

• beginners guide to typography

  印刷初学者指南

• vertical rhythm article

  垂直节奏文章

• vertical rhythm with CSS properties

  CSS属性的垂直节奏

1.1.3网格系统 (1.1.3 Grid System)

A Grid System is a layout structure which aids in implementing flexible and device-agnostic user interfaces.

网格系统是一种布局结构，有助于实现灵活且与设备无关的用户界面。

During my research I’ve stumbled across an advanced grid implementation. You can read about it by clicking here.

在研究期间，我偶然发现了高级网格实现。 您可以通过单击此处阅读有关内容。

1.1.4间距 (1.1.4 Spacing)

Spacing is used everywhere, therefore it is mentioned in the Style Guide. It is encountered in the grid, between headlines, buttons, images, forms, etc

间距在任何地方都可以使用，因此在样式指南中有提及。 在标题，按钮，图像，表格等之间的网格中遇到

1.1.5图像 (1.1.5 Iconography)

Icons give users an instant idea of what will happen next.They should be chosen while taking into consideration the target audience religion and history in order to avoid misunderstandings and misconceptions.

图标使用户可以立即了解下一步将发生的情况。在选择目标对象时，应考虑目标受众的宗教信仰和历史，以避免误解和误解。

1.1.6图像 (1.1.6 Imagery)

The Imagery defines the style and direction of pictures the application should use based on the brand and it’s mission.

Imagery根据品牌及其使命定义应用程序应使用的图片的样式和方向。

1.1.7语气 (1.1.7 Tone of Voice)

Tone of Voice refers to the actual copy.The tone of voice can be professional, welcoming, funny, a mix of feelings, etc.

语音语调是指实际的副本，语音语调可以是专业的，热情的，有趣的，混合的感觉等。

1.2组件库 (1.2 Component Libraries)

A Component Library is a repository which contains all components. It provides a view of the source code, a rough documentation and component renders.

组件库是包含所有组件的存储库。 它提供了源代码的视图，粗略的文档和组件渲染。

Here are few examples build with each tool:

以下是每种工具构建的几个示例：

• PatternLab.io: Bolt Design System

  PatternLab.io： 螺栓设计系统

• Fractal.build: City of Ghent Design System

  Fractal.build： 根特市设计系统

• StorybookJS: IBM Carbon Design System

  StorybookJS： IBM Carbon设计系统

2.设计设计系统 (2. Designing a Design System)

“No thorough conversation about Front-End today can end without the mention of Pattern Libraries. Sometimes a Pattern Library appears in the form of a Living Style Guide or as a Design System or as an all-knowing UI framework.

“如果不提及模式库，今天对前端的全面讨论就无法结束。 有时，“模式库”以“ 生活风格指南”的形式出现，或者以设计系统或不为人知的UI框架的形式出现。

In all of these cases, designers and developers seek the right strategy to approach the complexity of the web with a modular, component based approach.” — SmashingMagazine

在所有这些情况下， 设计人员和开发人员都在寻求正确的策略，以基于组件的模块化方法来解决Web的复杂性。” — SmashingMagazine

2.1 UX工具 (2.1 UX tools)

There is a plethora of UX software nowadays: FramerX, Figma, Sketch and so on. So why pick one over the other?

如今有大量的UX软件：FramerX，Figma，Sketch等。 那么，为什么要选择一个呢？

You can probably achieve the same results with every tool, but there are some key features brought to the table by each solution.

您可能会使用每种工具获得相同的结果，但是每种解决方案都具有一些关键功能。

Adobe Photoshop (Adobe Photoshop)

Let’s have a look at the pioneer. It was intended for photo editing, however it had enough tooling for building layouts:

让我们来看看先驱者。 它原本是用于照片编辑的，但是它具有足够的工具来进行建筑布局：

• Layer concept层概念

• Text tooling (Typography)

  文字工具( 版式 )

• Line guides (Grid System and Vertical Rhythm)

  线向导( 网格系统和垂直节奏 )

• Drawing tooling (Iconography)

  绘图工具( 图标 )

• Smart Object concept (it groups multiple layers into a single entity — sort of a reusable component)智能对象概念(将多个层分组为一个实体-一种可重用的组件)

草图 (Sketch)

Sketch is intended for prototyping interactive flows. The designer can set up a collection of UI elements as a library of components for his projects. Therefore, when updating a component, it will reflect in every project where it is being used.The components can be configured as responsive up to a degree. Each instance of a component accepts it’s own text placeholder.Sketch also provides a side app, called Mirror (link to app), which allows the user to preview his work on an iOS device.

Sketch用于交互流程的原型。 设计人员可以将UI元素的集合设置为项目的组件库。 因此，在更新组件时，它将反映在使用该组件的每个项目中。可以在一定程度上将组件配置为响应。 组件的每个实例都接受其自己的文本占位符。Sketch还提供了一个名为Mirror ( 指向app的链接 )的辅助应用程序，允许用户在iOS设备上预览其工作。

Figma，XD，FramerX (Figma, XD, FramerX)

Figma is available on MacOS, Windows and in the browser (read more). FramerX allows the user to import actual React components and can add animations on top of them (read more).XD is Adobe’s response to a dedicated prototyping software. At the moment it has less features than it’s competitors (read more).

Figma可在MacOS，Windows和浏览器中使用( 了解更多信息 )。 FramerX允许用户导入实际的React组件，并可以在它们之上添加动画( 内容 )。 XD是Adobe对专用原型软件的回应。 目前，它的功能少于竞争对手( 更多信息 )。

2.2用户体验法 (2.2 UX laws)

We have defined our Style Guide and we’ve chosen a Component Library.It’s time to design and develop components!Here is a top 7 of UX laws to have in mind when doing so, thanks to @aleausejo.

我们已经定义了样式指南，并选择了一个组件库 。现在是设计和开发组件的时候了！感谢@ aleausejo ，这里是要牢记的UX规则的前7个。

冯·雷斯托夫效应 (Von Restorff Effect)

When multiple similar objects are present the one that differs from the rest is most likely to be remembered (tip: make important information or key actions visually distinctive).

当存在多个相似的物体时，一个 那 与其他地方的区别最有可能被记住(提示：使重要信息或关键动作在视觉上与众不同)。

希克定律 (Hick’s Law)

The time it takes to make a decision increases with the complexity and number of choices.

决策所需的时间随着选择的复杂性和数量而增加。

菲特定律 (Fitt’s Law)

The time to acquire a target is a function of the distance to and size of the target (tip: keep main CTA’s big and closer to the thumb).

获取目标的时间取决于目标的距离和大小(提示：保持主CTA的大而靠近拇指)。

Zeigarnik效应 (Zeigarnik Effect)

People remember uncompleted or interrupted tasks better than completed tasks (tip: use progress bars).

人们记得未完成 或中断的任务比完成的任务要好(提示：使用进度条)。

序列位置效应 (Serial Position Effect)

People tend to remember best the first and the last items in a serie (tip: emphasize key info in the beginning and the end).

人们倾向于最好地记住系列中的第一项和最后一项(提示：在开头和结尾强调关键信息)。

共同区域法 (Law of Common Region)

Elements tend to be perceived into groups if they are sharing an area with a defined boundary (tip: add a background around a group of elements).

如果元素共享具有定义边界的区域，则元素往往会被分成几组 (提示：在一组元素周围添加背景)。

邻近法则 (Law of Proximity)

Elements that are near each other tend to be grouped together.

彼此靠近的元素倾向于组合在一起 。

You can read about other UX laws here.

您可以阅读有关其他用户体验法的信息 在这里 。

2.3零件开Kong工作坊 (2.3 Component cutout workshop)

The scope of this exercise is to practise to think in components by reverse engineering an already built interface.

本练习的范围是练习通过逆向工程对已经构建的界面进行组件思考 。

Print the UI of an app or web page of your choice.

打印您选择的应用程序或网页的用户界面。

Cut it into paper components from big to small.

将其从大到小的切成纸组件。

Classify each component.

对每个组件进行分类。

2.4原子设计(扩展*) (2.4 Atomic Design (extended*))

A model for thinking about UIs as hierarchical, interconnected sets of components that build real screens — Brad Frost

一种将UI视为构建真实屏幕的层次结构，相互关联的组件集的模型-Brad Frost

According to this methodology, we index every UI element as a component based on it’s visual complexity. Here’s the official documentation link.

根据这种方法，我们基于其视觉复杂性将每个UI元素索引为一个组件。 这是官方文档链接 。

设计令牌 (Design Tokens)

Design Tokens are an agnostic way to store variables such as typography, color and spacing. They are not actual components.This category is the last major improvement made to Atomic Design and the reason I’ve called it extended* (read more).

设计令牌是存储变量的一种不可知的方式，例如字体，颜色和间距。 它们不是实际的组件。此类别是对Atomic Design进行的最后一次重大改进，也是我称之为“ 扩展*”的原因(请内容 )。

原子 (Atoms)

Atoms are the smallest building blocks of UI.e.g.: icons, labels, input fields, buttons etc

原子是UI的最小组成部分，例如：图标，标签，输入字段，按钮等

分子 (Molecules)

Molecules are groups of atoms bonded together to serve specific purpose.e.g.: search form (label + input + button)

分子是结合在一起以实现特定目的的原子组，例如：搜索形式(标签+输入+按钮)

生物体 (Organisms)

Organisms are groups of molecules joined to form a complex section of an interface.e.g.: header (logo + menu + search form)

有机体是连接在一起以形成界面复杂部分的分子组，例如：标题(徽标+菜单+搜索形式)

范本 (Templates)

Templates are groups of organisms combined to form generic page layouts.e.g.: news article template (header + body + footer)

模板是生物群 合并形成通用页面布局，例如：新闻文章模板(页眉+正文+页脚)

页数 (Pages)

Pages are templates populated with real content.

页面是填充实际内容的模板 。

You can read more about Atomic Design in the context of Design Systems here.

您可以在此处在设计系统的上下文中阅读有关原子设计的更多信息。

3.开发设计系统 (3. Developing a Design System)

In a working design system, the time savings at the second use of an existing pattern are much larger than the effort to introduce the pattern in the first place.The design system won’t work if the effort is much bigger or the pattern library is getting out-of-date very quickly. — Wolf Brüning (Otto.de)

在一个有效的设计系统中 ，第二次使用现有模式所节省的时间要比最初引入该模式所节省的时间大得多。如果工作量大得多或模式库很大，则设计系统将无法工作。很快过时。 — 沃尔夫·布鲁宁(Otto.de)

3.1建立设计系统时的陷阱 (3.1 Pitfalls when building a Design System)

1)停止设计 (1) Stopping at Design)

The first bad practice is to stop at design stage. Without a working a component library available to development teams, design consistency is never fully achieved.

第一个不良做法是在设计阶段停止。 如果没有开发团队可用的组件库，就永远无法完全实现设计一致性。

Common scenario: developers aren’t aware of design requirements, aren’t good at implementing design standard or simply ignore them.

常见情况：开发人员不了解设计要求，不擅长实施设计标准或只是忽略它们。

2)建立仅HTML和CSS库 (2) Building a HTML and CSS only library)

The 2nd bad practice is building a DS using pure HTML and CSS components.

第二种不良做法是使用纯HTML和CSS组件构建DS。

Common scenario: each team will copy+paste the markup/styles, write the functionality and maintain it; the copied code needs to be tracked and maintained.

常见情况：每个团队都会复制并粘贴标记/样式，编写功能并进行维护； 复制的代码需要跟踪和维护。

3)有限的组件构建专业知识 (3) Limited component building expertise)

Lacking in-house component building expertise can slow down DS development and limit adoption if the custom component doesn’t deliver on the required functionality, accessibility, platform compatibility and performance.

如果自定义组件无法提供所需的功能，可访问性，平台兼容性和性能，则缺乏内部组件构建专家会减慢DS的开发速度并限制采用。

4)押注单一技术 (4) Betting on a single technology)

The last misstep is building a DS on top of a single technology.

最后一个失误是在单一技术之上构建DS。

Common scenario: a team builds a component library based on their framework of choice; once rolled out in the organization (which uses another framework or multiple others), the library meets friction.

常见场景：团队根据他们选择的框架构建组件库； 一旦在组织中推出(使用另一个或多个框架)，库就会遇到麻烦。

3.2建立设计系统的成功秘诀 (3.2 Formula of success for building a Design System)

1)完整的工作组件 (1) Fully working components)

The components should be dynamic working and properly versioned.

组件应该是动态工作的，并且版本正确。

2)获得组件构建专业知识 (2) Access to component-building expertise)

We can borrow expertise from existing component libraries or access expertise in order to build from scratch.

我们可以从现有的组件库中借用专业知识或访问专业知识以从头开始构建。

3)与技术无关 (3) Technology-agnostic)

The component library must work with any framework and technology (hint: web components).

组件库必须与任何框架和技术一起工作(提示： Web组件 )。

3.3具有Web组件的设计系统 (3.3 Design Systems with Web Components)

The larger the organization is, the more difficult is to deliver consistent user experiences across teams and projects.

组织 规模越大 ，在团队和项目之间提供一致的用户体验就越困难。

In large organizations one can encounter: distributed teams, concurrent projects and a diversity of frameworks.

在大型组织中，可能会遇到：分散的团队，并发项目和各种框架。

One way to solve this problem is by implementing a Design System using custom, framework-agnostic Web Components.

解决此问题的一种方法是使用与框架无关的自定义Web组件实现设计系统 。

We don’t know yet:

我们不 知道吗：

• if Web Components will replace third-party app frameworks

  Web组件是否将取代第三方应用程序框架

• if Web Components are more suited towards leaf/style/design nodes

  如果Web组件更适合叶子/样式/设计节点

We know that:

我们知道：

• existing frameworks which are already good, are getting better (smaller, faster and more efficient)

  现有的已经很好的框架正在变得越来越好(更小，更快，更高效)

• existing frameworks are increasing their support for Web Components

  现有框架正在增加对Web组件的支持

At Porche, we have a heterogenous ecosystem of products built with Angular, React or without any framework. As a design system team with a small number of developers, to give us the flexibility we needed and keep pace with our development roadmap, we wanted to standardise on one set of UI components that would work across any product. Building a custom design system based on Web Components has enabled us to do that. — Marcel Bertam, Design System Lead (Porsche)

在Porche，我们拥有使用Angular，React或不使用任何框架构建的异构产品生态系统。 作为一个由少量开发人员组成的设计系统团队，为了给我们提供所需的灵活性并与我们的开发路线保持同步，我们希望标准化一套适用于任何产品的UI组件。 基于Web组件构建自定义设计系统使我们能够做到这一点。 — Marcel Bertam，设计系统负责人(保时捷)

3.4启动设计系统的快速提示 (3.4 Quick Tips on starting a Design System)

1. Kick off the Design System with a pilot project.通过试点项目启动设计系统。
2. Ideal project: a page redesign or a new small app理想项目：页面重新设计或新的小型应用程序
3. View the pilot project as an opportunity to establish the Design System’s components through the lens of a project将试点项目视为通过项目的视角来建立设计系统组件的机会
4. Research and refine研究与完善

谢谢您的成功！ (Thank you for making it this far!)

I’d like you to leave this article with a smile on your face, so here’s a funny, yet true hierarchy of Designers, Developers and the User:

我希望您带着笑容离开本文，因此这里是设计师，开发人员和用户的有趣但真实的层次结构：

Additional resources:

其他资源：

• inVision Design System video series

  InVision设计系统视频系列

• SmashingConf — Brad Frost: Let’s build a design system

  SmashingConf — Brad Frost：让我们建立一个设计系统

• SmashingMagazine Pattern Libraries study case

  SmashingMagazine模式库研究案例

• Apple ships Web Components in production

  苹果将​​Web组件投入生产