Timeline: December 2019 – November 2020
Role: Product Designer
Tools: Figma
Field: UI/UX, Design System, Component Library

时间：2019 年 12 月 – 2020 年 11 月
角色：产品设计师
工具：Figma
领域：UI/UX，设计系统，组件库

Project Background

项目背景

A well-developed component library was important for creating product interfaces in our multi-person team

在多人团队中创建产品界面，需要完善的组件库

When I joined SmartX in 2018, there were only 2 product designers on the product design team. It was relatively easy to keep the design consistent because the product structure and style was already relatively well established, and when creating new designs, it was easy to extract or derive the appropriate style elements from the existing interface, so we could reach consensus for each decision through a quick discussion.

2018 年我加入 SmartX 时，产品设计团队只有 2 名产品设计师。保持设计的一致性相对容易，因为当时的产品结构和风格已经较为完善，在创建新的设计时，我们很容易从已有的界面提取或推导相应的风格要素，因此可以通过快速的讨论来达成一致。

After 2 years, we started creating a new product called CloudTower and exploring a new look. This meant that the style that had been established in the old product would no longer work; and by this time the team had grown, with 4 designers working on this new product, each at a different stage of their career development.

2 年后，我们开始创建一个全新的名为 CloudTower 的产品，并探索全新的外观。这意味着旧产品中已经确定的风格将无法继续使用；而此时团队已经成长，有 4 名设计师参与到这个新产品中，每位设计师的职业发展阶段各不相同。

Therefore, it became especially important in our team to maintain consistency in interface style through a well-developed design system, so that we could deliver a familiar experience to users.

因此，通过一套完善的设计系统来保持界面风格的一致性，以便为用户带来熟悉的体验，这在我们团队中变得尤其重要。

The Challenge

挑战

Create the design system when the software features were not fully defined and the visual style was not fully confirmed

在功能尚未明确、视觉风格尚不明朗的情况下创建设计系统

I tried to create the component library in the early phase of development. This work was handled simultaneously with the interfaces design work, and these two works were handled by different designers. So this phase 1 was fraught with uncertainty. The team wanted to quickly use the design system to ensure consistency in the interface style. However, the specific functional scenes that support the design decisions of the design system were not clear yet, and the interface style was also unclear. The design system created in this context relied more on theory and assumptions about the interface.

我在研发初期尝试创建了组件库，这项工作和界面设计工作是同时进行的，这两项工作由不同的设计师负责。这个阶段充满了不确定性。团队希望快速利用设计系统保证界面风格的一致性，但支持设计系统组件方案的具体应用场景尚未明确，界面风格也不明朗。由此而创建的设计系统，更多依赖的是理论和假想的界面。

It has been proven that designing a component library separately from specific interfaces not only leads to poorer results, but also makes the design decisions of the component library and interfaces tied to each other and reduce efficiency. On the other hand, there were designers at different stages of career development in the team, and their working habits varied, which could also affect the final effect of the design system component library.

实践证明，脱离具体应用界面单独设计组件库，不仅会导致实际效果不如预期，还可能令组件库和界面的设计决策互相牵绊，降低效率。另一方面，团队中有不同职业发展阶段的设计师，他们的工作习惯各有差异，这也会影响设设计系统计组件库的最终应用效果。

In the second phase of the development process, I learned from my experience and started over: incorporating feedback from internal trials and lessons learned about the software interface and design system, redesigning CloudTower’s interface style, and reorganizing and creating the design system.

在研发的后期，我汲取了经验，并着手重新开始：结合研发过程中内部试用的反馈，以及总结出的关于软件界面和设计系统的设计经验，重新设计 CloudTower 的界面风格，以及重新梳理并创建了新的 Design System。

The Detour Taken at Phase 1

第一阶段走的弯路

Without considering the actual scenario and user needs, the form limited the function

脱离实际场景和用户需求，形式限定了功能

When we first started working on CloudTower, we had just moved from Sketch to Figma because of the benefits it offered to help increase productivity. We decided to make the components and all the associated instructions available in one place, and it was open to all designers and front-end developers.

刚开始研发 CloudTower 时，我们刚从 Sketch 转移到 Figma，因为它的优势能帮助提升工作效率。我们决定在一处提供组件及所有相关说明，它面向所有设计师和前端开发团队。

Figma’s functional features bring a lot of convenience to the team. However, as the component library became operational and expanded, this centralized solution raised some questions about the efficiency of its creation and use.

Figma 的功能特性给团队带来了许多便利。但随着组件库的运行和扩大，这种集中式的方案引发了一些关于创建和使用的效率问题。

When working with components, different designers have different habits. Experienced designers are used to searching the library and finding the assets they need from the tree catalog because they are familiar with the component types and functions, and searching helps them choose quickly, while junior designers are used to opening the Figma component file to find and copy components, which is not as fast as searching but seems more intuitive. However, the experience of both approaches was not optimal. For example, search results were also redundant and sometimes it was not possible to see the required components at a glance, and designers who looked for components in the file often needed to spend extra effort to select the available components or were guided to see content that was not relevant to the design purpose (e.g. component descriptions for front-end development).
使用组件时，不同设计师的习惯不同。富有经验的设计师习惯于搜索 Library 并从树状目录中找到所需资产，因为他们对组件类型和功能非常熟悉，搜索有助于快速选用；而初级设计师则习惯打开 Figma 组件文档寻找并复制，虽然它不如搜索快速，但看起来更加直观。可是，这两种方式的体验并非最佳，例如搜索结果也存在冗余，有时无法一眼看到所需组件；而在文档中寻找组件的设计师，往往需要耗费额外精力，甄选可使用的组件，或被引导查看与设计用途不相关的内容（例如面向前端开发的组件说明）。
Each component was written in a document-like structure, including purpose, appearance, composition, interaction, etc. Sometimes I would consider the presentation of the documentation and forwent the use of “atomic components” because it really didn’t matter to the designers using the component, or to the front-end developers. This was an example of a trade-off between “structural soundness” and “ease of maintenance”. In fact, this did not allow the component library to perform optimally.
每个组件都以类似文档的结构来撰写，包括用途、外观、构成、交互表现等等。有时我会考虑到文档的表现，而舍弃采用“原子组件”，因为它对于设计师使用组件，以及前端开发实在是没有关系。这是在“结构合理性”与“维护便利性”之间做取舍的例子之一，事实上它无法令组件库获得最佳表现。
Although I took advantage of Figma’s style feature, I was often unable to execute it during the design process when I wanted to adjust the colors and components as a whole, because multiple adjustments might interfere with the work being done by other colleagues.
虽然利用了 Figma 的样式功能，但在设计过程中想要整体性地调整颜色和组件时，却往往不会执行，因为多次调整可能会影响其他同事正在进行的工作。

In addition, designing components individually can lead to a lack of overall coherence, limiting the appearance. This situation also affects the user’s sense of accomplishment in design work and confidence in product performance.

此外，单独设计的组件，缺乏整体协调性的考量，限制了外观表现。这种状况也会影响使用者设计工作的成就感，以及对于产品表现的信心。

The end result was that a nominal design system and component library was created, but it was disconnected from the final scenario and the user’s situation, and bound by rules and regulations that limited the final appearance. This was a situation that “form limited function” and led to human going to work for the system.

最终导致的结果是：确实创建了一份名义上的设计系统和组件库，但和最终场景以及使用者的情况脱节，并被条条框框束缚，限制了最终表现。这是“形式限定了功能”，导致“人为系统服务”的局面。

Analyze the Problem

分析问题

Think about the relationship between the system and the user first, then consider the implementation method

先思考系统与用户之间的关系，再考虑实施方法

In addition to improving production skills, these problems need to be solved based on an accurate understanding of the core part of the design system — the “components”.

除了制作技巧的提升，纠其根本，这些问题需要基于对设计系统的核心部分——“组件”的准确理解，才有机会得到解决。

After the first phase of experimentation and listening to feedback, I have learned that what we call “components” are divided into many “layers”, such as the expression layer, implementation layer, and usage layer of component design, component development, and component usage. These “layers” actually address different audiences, segments, and goals. When the content is brief, this variability can seem to be bridged; when the content becomes more detailed, it is necessary to ease this variability, meet the diverse needs, and make the information clearer. Providing all the information in one place slows down the efficiency of different actors to get the information they need from it.

经过第一阶段的尝试并聆听反馈，我总结出的经验是：我们所说的“组件”分为很多“层”，如组件设计、组件开发、组件应用的表现层、实现层，和应用层，这些“层”实际上面向不同的受众、环节，和目标。当其内容较为简略时，这种差异性看起来可以被弥合；当内容越来越详尽，就需要疏导这种差异性，满足多样化的需求，令信息更清晰。而在一处提供所有信息的做法就拖慢了不同角色从中获取自己所需信息的效率。

At the beginning, “component” was a vague concept full of multiple semantics. With a clear analysis, it was clear where the problem laid: a single centralized file structure could not meet the needs of a complex and mature design system, and the needs of users with multiple roles. We were initially attracted to Figma’s flexibility when we tried it out, but it proved that taking full advantage of this flexibility required careful consideration in order to maximize its value.

而一开始，“组件”是充满多重语义的模糊概念。现在，通过清晰的梳理，我们可以明确问题所在：单一集中式的文档结构无法适应一个复杂而成熟的 Design System 的需求，无法满足多种角色的用户的需求。起初我们试用 Figma 时被它的灵活性吸引，但实践证明，要充分利用这种灵活性，就必须经过审慎的考量，才能最大程度地发挥它的价值。

In fact, this is to a certain extent in line with the laws of natural and social development. In the early days of infrastructure development, more attention was paid to the commonality of the framework, and individual needs were not yet clearly reflected at this point. However, as more and more different types of users join and use it more deeply, optimization of local efficiency becomes important, and the framework must further support the diversity of needs.

其实，这在一定程度上也符合自然和社会发展规律。在基础设施建设的早期，更多关注框架的共性，个性化需求在此时尚未明确体现；但随着越来越多不同类型的用户加入，以及不断深入的使用，局部效率的优化就变得重要，框架必须进一步支持多样性的需求。

For us, the type of users of the design system was relatively fixed, and we had more reason to take that into account from the beginning.

而对于我们期望的设计系统而言，它的用户类型是相对固定的，我们更有理由在一开始就考虑到这一点。

Redefining Requirements

重新定义需求

Emphasized the “human” experience by defining the design system as “a product that provides services”

通过“提供服务的产品”的定义，强调“人”的体验

The CloudTower Design System would be repositioned as a “product” and would serve our internal team.

CloudTower Design System 将被重新定位为一个“产品”，并由此向内部团队提供服务。

From the first phase of experience, it needs to provide the best experience for different usage scenes for users in different roles. For example, designers should be able to have the most intuitive experience possible when viewing and searching for components in a tree list of assets, quickly discover the desired target when browsing components in a document, front-end developers can more easily view design descriptions, and so on. It’s important to note that the designers who design and create components are also one of the users of this system, and it’s our goal to be able to create and organize components more efficiently.

从第一阶段的经验出发，它需要为不同角色用户的不同使用场景提供最佳体验。例如，设计师在树状资产列表中查看和搜索组件时应能获得尽可能直观的体验，在文档中浏览组件时能快速发现所需的目标，前端工程师能更便利地查看组件设计说明，等等。需要说明的是，设计和创建组件的设计师，也是这个系统的用户之一，能更高效地创建和组织组件，也是我们的目标。

Phase 2, Redesign

第二阶段，重新设计

Returned to the scene and stayed close to the user to enhance flexibility without losing reasonableness

回归场景，贴近用户，在不失去合理性的情况下提升灵活性

During the second phase of development, the design system was given the opportunity to be redesigned as the CloudTower user interface was re-styled.

随着研发后期对 CloudTower 用户界面风格的重新设计，Design System 也获得了重新设计的机会。

This round of redesign was based on a proven user interface design solution, so the components gained a look that better supported the overall appearance. In addition to this, I have enhanced its performance in several ways across the board.

此轮重新设计基于经过验证的用户界面设计方案，因此组件在外观上获得了更能支持整体表现的效果。除此之外，我还借助一些方法来全面提升其表现。

Reorganized the structure of the design system

重新规划设计系统结构

Planned the content composition of the design system in relation to user types and user needs. This approach helps improve overall efficiency, with each type of user seeing only the content they need and using it in the way they are most accustomed and preferred.

结合面向的用户类型和用户需求，来规划设计系统的内容构成。这个做法帮助提升整体的效率，每种类型的用户只会看到他们需要的内容，并能以他们最习惯和偏好的方式使用。

Benefit from the reorganization of content composition, the efficiency of creation, maintenance and usage could be improved. For example:

受益于内容构成的重新规划，创建、维护和使用的效率都能得到提升。例如：

In UI Library, it is possible to abstract the same features of a bunch of components and create atomic components, and then create instances with the Override feature. This file allows you to focus on the production of the component without having to divert your efforts to the documentation layout of the component description. This approach helps improve the efficiency of production and post-maintenance.
在 UI Library 中，可以抽象一众组件的同一特征，并创建原子组件，然后再以 Override 创建实例。这个文档可以专注于组件的制作，而无需将精力分散在组件描述的文档排版上。这个方式帮助提升制作和后期维护的效率。
Design Templates can provide examples of the most common states of a component, laid out by category to enhance ease of discovery. This way, users are not distracted by irrelevant information and the rhythm of interface design work is not interrupted. Also, by copying components from here, the current state and functionality of the component can be maintained, and if the same component is upgraded, a new component can be placed here (instead of being modified from the original), thus avoiding the impact on other designs. This approach helps to improve the efficiency of use.
Design Templates 可以提供组件最为常用的 states 的实例，并按类别布局，提升易发现性。这样使用者就不会被无关的信息干扰，保护界面设计工作的节奏不被打断。并且，从此处复制使用的组件，能保持当时的状态和功能，倘若同一组件升级了版本，可以在此放置全新制作的组件（而非在原来基础上修改），从而避免对其他设计稿造成影响。这个方式帮助提升使用的效率。
UI Guidelines can decouple design guidelines from component descriptions and focus on their distinct guideline uses.
UI Guidelines 可以将设计指南从组件描述中解藕出来，专注其鲜明的指南用途。
UI Development Documents enable developers to obtain a definitive version of content related only to front-end development.
UI Development Documents 可以令研发获得仅与前端开发相关的、确定版本的内容。

Took advantage of the latest Figma features

充分利用 Figma 的最新特性

Take advantage of Figma’s latest features to improve the way design components are made and organized, enhance the efficiency of creation and use, and improve the appearance of performance.

利用 Figma 的最新特性，改进设计组件的制作和组织方式，提升创建和使用效率，以及提升外观表现。

With the Variants feature, different states of a single component can become variants of that component with the help of multidimensional property declarations. When these states are grouped together, they can be displayed as a single component in the search results, making them easier to find. This feature helps improve the efficiency of use.
利用 Variants 特性，单一组件的不同 states 可以借助多维度的属性声明，成为该组件的变体。当这些 states 归集在一起，它们就能在搜索结果中展示为单一组件，从而更容易被发现。同时，组件被拽入后也能进一步调节到所需的 state。这个特性帮助提升使用效率。
With the new Auto Layout feature, CSS-like flex layouts can be implemented to achieve component structures that were previously difficult to make. This feature helps to improve the appearance.
利用新版 Auto Layout 特性，可以实现类似 CSS 的 flex 布局的表现，从而实现原先难以做出的组件结构。这个特性帮助提升外观表现。

Improved production skills

提升制作技巧

Build a logical and convenient organization structure by considering the experience of final search and variants selecting. For example:
- The placement of component variants affects the component instances displayed in the search results. Placing the default state component in the top left position of all variant combinations can improve the recognition of search results.
- The properties of component variants need to be set with both the sequential relationship between properties and ease of use in mind.
- The hierarchy of components requires a balance between rational organization and ease of use. While we often rely on search, we should also get a good experience when expanding the tree diagram to find it.
考虑在最终搜索以及选择变体时的体验，构建合理且便捷的组织结构。例如：
- 组件变体的排列位置，会影响搜索结果中展示的组件实例。将 default 状态的组件放在所有变体组合的左上位置，可以提升搜索结果的辨识度。
- 组件变体的属性设置，需要同时考虑维度之间的关系和使用的便利性。
- 组件的层级划分，需要平衡组织的合理性与使用的便利性。虽然很多时候我们依赖搜索，但在展开树状图来查找时，也应获得良好的体验。
Hide components that will not be used individually, such as atomic components and subcomponents within complex functional components. If a user can search for a component that he will never use, then the asset list and search results become complex and may be less efficient to use. Adding a half-width period to the beginning of the name of a component of this type keeps it inside the component library document and prevents it from being searched for by the end user.
隐藏不会被单独使用的组件，例如原子组件和复杂功能组件里的子组件。如果用户可以搜索到他始终用不到的组件，那么资产列表和搜索结果就会变得复杂，可能会降低使用效率。在该类型组件的名称开头添加一个半角句点，即可将其保留在组件库文档内，避免被最终用户搜索到。
Focus on semantics and create variants whenever possible, rather than allowing users to adjust the visibility of layers. The first consideration at all times should be to create exhaustible combinations and provide semantic variant options. While there are some components with complex functionality that have to let the user adjust the visibility of the layer to achieve the desired state because of too many combination cases, this should only be used as a final approach (and should be explicitly stated in the component description).
尽可能关注语义并创建变体，而不是让用户调整图层的可见性。任何时候都应首先考虑创建可穷尽的组合，并提供语义化的变体选项。虽然有些组件的复杂功能因为组合情况过多，而不得不让用户调节图层的可见性来实现所需状态，但这只能作为最终方法（并且要在辅助说明中明确表示）。
Maintain text content when switching component states. When a user changes a button title and switches the state, he should expect to not have to re-enter the title once. Setting identical names for the text boxes that need to maintain text in different state instances of the component can help to maintain the text.
在切换组件 state 时保持文本内容。当用户修改一个按钮标题并切换 state 时，他应该希望不用重新输入一次标题。为组件的不同 state 实例中需要保持文本的文本框设定完全一致的名称，可以帮助保持文本。
Optimize responsiveness and provide expandability. For example, a software form interface provides at least two different widths for different scenes, but the form content is not significantly different. In this case, it is possible to combine atomic components and responsive capabilities to generate form components of two different widths at the same time. This way, when the form is adjusted, modifications will be applied to instances of each width to maintain a high degree of consistency in appearance.
优化响应式能力，提供可拓展性。例如，软件的表单界面为不同场景提供了至少两种不同宽度，但表单内容没有显著的差异。此时，可以结合原子组件和响应式功能，同时生成两种不同宽度的表单组件。这样，当调整表单时，每个宽度的实例都将应用修改，以保持外观的高度一致性。
Make layer naming more accurate and understandable, and use default names for meaningless auxiliary structures. A jumbled order of layers and names makes the product look unprofessional and does not help designers understand the components in depth, nor does it help development efforts. Set accurate names for important layers and put them in a logical order, and delete names for unimportant layers and hit return/enter key to fall back to the default names.
让图层命名更准确和易懂，没有意义的辅助性结构则使用默认名称。杂乱无章的图层顺序和名称令产品显得不够专业，也不利于设计师深度理解组件，对开发工作也没有帮助。对重要的图层赋予准确的名称，并以合理的顺序排列，对不重要的图层删除名称并回车以回退到默认名称。
Reduce additional operations. For example, how to keep the visual position of Checkbox and Radio consistent? To correct for the visual illusion, the Radio should be somewhat larger than the Checkbox, but it is obviously more clever to preemptively free up space in the child components than to set separate paddings (inner margin), since it will remain visually centered in any future layout combinations that may be created, without relying on the external environment.
减少额外操作。例如，如何保持 Checkbox 和 Radio 的视觉位置一致？为了校正视觉的错觉，Radio 的尺寸应比 Checkbox 更大一些，但相比分别设置不同的内边距，在子组件中预先腾出空白显然要更巧妙，因为它在未来可能创建的任何布局组合下都能保持视觉居中，而无需依赖外部环境。
Use plugins or efficiency features to improve creation efficiency. When creating a large library of components, it is inevitable that you will perform repetitive operations such as renaming, detach styles, creating styles, organizing the order of layers, and so on. In this case, you can use the batch function to improve efficiency.
使用插件或效率功能提升创建效率。在创建庞大组件库时，不可避免地会进行重复性的操作，例如重命名、detach 样式、创建样式、整理图层顺序等。此时可借助批量功能提升效率。
Use descriptions and provide supporting instructions as necessary. When necessary, write supporting instructions to help users understand and use (but this should only be the final approach and should always be the first to consider creating intuitive options).
利用描述，提供必要的辅助说明。在必要的时候，撰写辅助说明来帮助用户理解和使用（但这只能作为最终方法，应始终最先考虑创建符合直觉的选项）。
Provide links to relevant documentation. If a designer wants to view content related to front-end development for a component, he or she should be able to click the Documentation Link on the Inspect panel of the component to jump without having to leave his or her familiar work environment, find and open other documents.
提供相关文档链接。若设计师想要查看组件与前端开发相关的内容，应能通过 Figma 为组件提供的链接功能，从单个组件的 Inspect 面板中跳转查看，而无需离开自己熟悉的工作环境、查找并打开其他文档。

Results and Reflections

结果与感想

Stay close to the needs and scenes, and let the function define the form

紧贴需求与场景，让功能决定形式

Although the process of reaching the goal took a detour, after continuous listening and learning from experience, the end result was highly appreciated by the designers who used the design system. The key to this transformation is to get back to the scenes and to the needs of the users.

虽然在达成目标的过程中走了弯路，但经过不断聆听和总结经验，最终的结果还是获得了使用该设计系统的设计师们的高度认可。而这其中转变的关键之处就在于回归场景，重新贴近用户的需求。

In addition, if we were to do it all over again, I think a significant part of the design system should be used as an “efficiency project”, such as a component library, which should be summarized at a stage when the functionality and style of the interface is relatively well defined, and serve to organize the design drafts and new designs in the future. In this way, the requirements can be truly clarified and served in the most appropriate form for those who need them.

此外，如果重新来一次，我认为设计系统中的相当一部分应当作为“效率工程”，例如组件库，它应在界面功能与风格相对确定的阶段进行归纳总结，并服务于设计稿的整理和未来的新设计。这样，才能真正厘清需求，并以最恰当的形式为需求者提供服务。