My introduction to design systems was like getting sucked into a black hole.
我的设计系统之旅就像被黑洞吸进去一样。
It happened when I was working as a product designer at a trucking software company. We were growing exponentially, so our UI library needed critical enhancements to keep up with the business needs. As I ran an audit to determine what to optimize, I learned Figma had released the auto layout feature. I applied that new functionality to our library, but the task became more complex. I didn’t stop at the audit; I ended up creating a whole design system. During that project, I wore multiple hats: building the components, doing research, creating documentation, and training my design peers on how to consume and contribute to our new design system.
这件事发生在我在一家货运软件公司担任产品设计师的时候。我们的公司正在快速发展，所以我们的用户界面库需要关键的改进来满足业务需求。当我进行审查以确定需要优化的内容时，我了解到Figma发布了自动布局功能。我将这个新功能应用到我们的库中，但任务变得更加复杂。我没有止步于审查，最终创建了一个完整的设计系统。在这个项目中，我扮演了多重角色：构建组件、进行研究、创建文档，并培训我的设计同行如何使用和贡献我们的新设计系统。
That first design system I created was born of necessity to solve the lack of consistency between design and development. After this intense immersion into the design systems world, as well as experiences at other companies, I learned quite a few things I wish someone had told me at the beginning.
我创建的第一个设计系统是为了解决设计与开发之间缺乏一致性的问题而诞生的。在这次对设计系统世界的深入了解以及在其他公司的经历中，我学到了很多我希望在一开始就有人告诉我的东西。
Article body illustrations by Aura de Papel.
文章正文插图由Aura de Papel提供。
1\. A design system is not the same as a UI library
1\. 设计系统与UI库不同
When Figma released their auto layout, it changed the way that designers built components. I performed an audit to determine what elements could be rebuilt with this new feature. I found a large number of component discrepancies between the designs and the in-production product. The developers and product designers had access to all the components, but they didn’t have any guidelines on when or how to use them. I wasn’t expecting the original task of updating some components to turn into a big project, but it did. Not only did I apply auto layout to some components, but I also had to create documentation to add consistency to our product. The UI library became a design system.
当Figma发布了他们的自动布局功能后，它改变了设计师构建组件的方式。我进行了一次审查，以确定哪些元素可以使用这个新功能重新构建。我发现设计和实际产品之间存在大量的组件差异。开发人员和产品设计师都可以访问所有的组件，但他们没有任何关于何时以及如何使用它们的指导方针。我原本并没有预料到更新一些组件的原始任务会变成一个大项目，但事实却是如此。我不仅对一些组件应用了自动布局，还不得不创建文档以确保产品的一致性。UI库变成了一个设计系统。通过这个过程，我了解到UI库是一组组件和样式的集合，而设计系统是一套管理组件和样式集合的指导方针。Through this, I learned that a UI library is a collection of components and styles, while a design system is a set of guidelines to manage a collection of components and styles.
2\. Productize your design system and your users will thank you!
将您的设计系统产品化，您的用户会感谢您！
A software product solves users’ problems and addresses specific business needs. One of the first steps to building an effective product is identifying the users, their workflows, and their pain points. The same is true for your design system.
一个软件产品解决用户的问题并满足特定的业务需求。构建一个有效的产品的第一步是确定用户、他们的工作流程和痛点。对于您的设计系统也是如此。
You’re designing for two sets of users when you build a design system. First, you’re building for the end users who will be the customers of your company’s final product. But you’re also designing for the product designers who build those services and rely on the design system to create effective products. When you treat your design system as a product, the product designers who adopt it can focus on how to create a smooth UX navigation for the end user instead of spending time choosing things like the most suitable color for a button. The devs can then easily grab a ready-made component and assemble it. The main goal of a design system is to optimize the users’ workflow and save time. Design systems are simply a product for building products.
当你构建一个设计系统时，你要为两组用户进行设计。首先，你要为最终产品的客户建立设计系统。但你也要为构建这些服务并依赖设计系统来创建有效产品的产品设计师进行设计。当你将设计系统视为一个产品时，采用它的产品设计师可以专注于如何为最终用户创建流畅的用户体验导航，而不是花时间选择最合适的按钮颜色之类的事情。开发人员随后可以轻松地获取一个现成的组件并进行组装。设计系统的主要目标是优化用户的工作流程并节省时间。设计系统只是用于构建产品的产品。
3\. Designers and developers should be like an atom: inseparable
设计师和开发者应该像原子一样：不可分割的。
Similar to designers, developers can speed up their workflows when building products with ready-made components from design systems. The real challenge is maintaining consistency between these two crews.
与设计师类似，开发人员可以通过使用设计系统中的现成组件来加快产品开发流程。真正的挑战在于保持这两个团队之间的一致性。
The end users don’t interact with the design tool (like Figma, Zeplin, Invision, or Sketch), but they do interact with the in-production product. They can tell when there’s a disconnect behind the scenes, especially if it originates from the design system. Functionality consistency is also relevant. The end users want to predict how the components will behave. If components don’t behave as expected, the users can feel frustrated and we may lose their trust. Developers and designers have to work together at all stages of a design system to maintain consistency. I learned that collaboration is the one and only secret to a successful design system.
最终用户不与设计工具（如Figma、Zeplin、Invision或Sketch）进行交互，但他们与产品进行交互。他们可以感受到幕后的不协调，尤其是如果它源自设计系统。功能的一致性也很重要。最终用户希望能够预测组件的行为。如果组件的行为与预期不符，用户可能会感到沮丧，我们可能会失去他们的信任。开发人员和设计师必须在设计系统的各个阶段共同努力，以保持一致性。我认识到合作是成功的设计系统的唯一秘诀。
4\. Fancy naming conventions aren’t always practical
4\. 炫酷的命名规范并不总是实用的。
When I first created a design system, I was very proud of my outstanding color palette scale. I developed the coolest color style names; Denim, Chambray, Malachite, and Cinnabar. I thought it was going to be flexible enough, but then our fleet management product needed a dark mode. The first issue we faced was the lack of standardization regarding the use of each color across all the components. The designers and devs didn’t know when to use which color. Some borders were gray and some were blue. Assigning an equal color pair on the dark theme was not helpful.
当我第一次创建设计系统时，我为自己出色的调色板感到非常自豪。我开发了最酷的颜色样式名称：牛仔布、水手布、孔雀石和朱砂。我以为这样足够灵活，但是我们的车队管理产品需要一个暗黑模式。我们面临的第一个问题是在所有组件中使用每种颜色的标准化不足。设计师和开发人员不知道何时使用哪种颜色。一些边框是灰色的，一些是蓝色的。在暗黑主题上分配相同的颜色对并没有帮助。
We solved the issue by naming the color tokens based on context-agnostic usage, which simplified introducing theming to the design system. There are multiple ways to tokenize color values. Each company uses its own structure. Asana uses \[sentiment-sage-prominence-interaction\]; Material Design suggests \[design-system-type-purpose\]. My recommendation is to research and apply the most suitable semantic or global naming that can scale with your current and future design system’s needs.
我们通过根据与上下文无关的用法来命名颜色令牌来解决了这个问题，这简化了引入主题到设计系统的过程。有多种方式可以对颜色值进行令牌化。每个公司都使用自己的结构。Asana使用的是\[情感-智慧-突出-互动\]；Material Design建议使用\[设计系统-类型-目的\]。我的建议是研究并应用最适合的语义或全局命名，以满足您当前和未来设计系统的需求。
5\. Atomic design helps you remember the magic of basics
5\. 原子设计帮助你记住基础的魔力
Before starting the first version of our design system, I researched best practices to build the foundation. I found an exceptional method to create modular systems called Atomic Design, created by Brad Frost. It highlights how components can be broken into independent smaller components to be replaced, modified, or exchanged with other smaller parts, without breaking the component structure. Following this method allows us to assemble designs faster and update components across multiple designs automatically. This was a game-changer! I recommend applying this to any design system.
在开始我们的设计系统的第一个版本之前，我研究了构建基础的最佳实践。我发现了一种名为原子设计的卓越方法，由Brad Frost创建。它强调了如何将组件分解为独立的较小组件，以便可以替换、修改或与其他较小部分交换，而不会破坏组件结构。遵循这种方法可以让我们更快地组装设计，并自动更新多个设计中的组件。这真是一个改变游戏规则的方法！我建议将其应用于任何设计系统。
6\. Collaboration promotes refinement, which supports business goals
合作促进完善，从而支持业务目标。
A design system team shouldn’t be isolated from their primary users. The interaction between the design system and the product teams that use it is not one-way. Design systems mature as the products evolve. But the reports and requests from multiple teams can get overwhelming if the company grows exponentially.
设计系统团队不应与其主要用户隔离。设计系统与使用它的产品团队之间的互动不是单向的。设计系统随着产品的发展而成熟。但是，如果公司呈指数增长，来自多个团队的报告和请求可能会变得压倒性。
Opening a design system to cross-functional contributors and empowering them to service their own requests is the best strategy for keeping up with business needs. One of the major concerns could be breaking changes. Set a contribution process to ensure consistency. Provide guidelines and materials for the contributor so they feel comfortable and confident with the process. Cross-functional collaboration provides new perspectives that prompt design system growth and drives business goals.
向跨职能贡献者开放设计系统，并赋予他们满足自身需求的能力，是跟上业务需求的最佳策略。其中一个主要问题可能是破坏性变更。建立贡献流程以确保一致性。为贡献者提供指南和材料，使他们对流程感到舒适和自信。跨职能合作提供了新的视角，推动设计系统的发展并实现业务目标。
7\. A lasting design system needs collaboration beyond product and development
一个持久的设计系统需要超越产品和开发的合作
Tying up to the last point, big companies treat their design systems as the core of their brand and product vision. The guidelines don’t exclusively impact software products but also establish a holistic brand experience. A design system team should respond to continuous feedback from the stakeholders and primary users. The collaboration across product teams, marketing, branding, customer experience, managers, and the design system team drives the evolution of our design system. Additionally, it’s easier to adopt something when you’re part of it and more familiar with it. Listing stakeholders and identifying how the design system would optimize their workflows is the best strategy for a consistent experience for the customers.
紧扣最后一点，大公司将他们的设计系统视为品牌和产品愿景的核心。这些准则不仅仅影响软件产品，还建立了一个全面的品牌体验。设计系统团队应该对利益相关者和主要用户的持续反馈做出回应。产品团队、市场营销、品牌、客户体验、管理人员和设计系统团队之间的合作推动了我们设计系统的发展。此外，当你是其中一员并且对其更加熟悉时，采用某种东西会更容易。列出利益相关者并确定设计系统如何优化他们的工作流程是为客户提供一致体验的最佳策略。
8\. Adoption is the most challenging part
8\. 领养是最具挑战性的部分
There are multiple considerations during the adoption phase. To find solid footing, creating training material for the involved teams is a great strategy. Those can be in the form of videos, playgrounds, workshops, courses, or any other channel that you can think of. The distribution process depends on your company and its capabilities. The ultimate goal is to create awareness of the advantages of adopting the design system. If your stakeholders don’t understand how to introduce the design system into their workflows, they won’t use it, which could break a consistent experience for the end users. If your stakeholders introduce the design system but don’t understand how to continuously apply its updates, they’ll find a way to make it work for them — even if that means detaching components or working without the design system guidelines.
在采用阶段有多个考虑因素。为了找到稳固的基础，为相关团队创建培训材料是一个很好的策略。这些材料可以是视频、实验场地、研讨会、课程或者其他你能想到的渠道形式。分发过程取决于你的公司及其能力。最终目标是让人们意识到采用设计系统的优势。如果你的利益相关者不知道如何将设计系统引入他们的工作流程中，他们就不会使用它，这可能会破坏最终用户的一致体验。如果你的利益相关者引入了设计系统，但不知道如何持续应用其更新，他们会找到一种适合自己的方式——即使这意味着分离组件或不按照设计系统的指导方针工作。
9\. Accessibility is a must
9\. 无障碍是必须的
Access to communications technology and equal opportunities are human rights, and accessibility is an inclusive practice every team should apply from the foundation of any design system. This adds more steps to the process but enhances the business value of the product and meets the needs of more customers. Companies that include Web Content Accessibility in their guidelines improve the accessibility for all users, increase consistency, and optimize the user experience. I learned that you don’t need to be an expert in this field, but being cognizant of inclusion will make you a more ethical professional and a more empathetic individual.
通信技术的使用权和平等机会是人权，而可访问性是每个团队在任何设计系统的基础上都应该应用的一种包容性实践。这会增加流程的步骤，但提升产品的商业价值并满足更多客户的需求。将网络内容可访问性纳入指南的公司可以提高所有用户的可访问性，增加一致性，并优化用户体验。我了解到，你不需要成为这个领域的专家，但意识到包容性将使你成为一个更具道德伦理的专业人士和更富有同理心的个体。
10\. A Design system is endless
10\. 设计系统是无穷无尽的
Just like any product, a design system goes through an intense recursive process after its initial launch. The product designers will report bugs and new requests and need constant support from the design system team. As the company evolves, the product team’s priorities will too, so they’ll lean on the design system to attend to new requests in a timely fashion. Along with creating training materials, keep track of work and improvements so you can trace who did what and when. To avoid the risk of regression, I recommend updating bug requests and adding new features by using individual releases so you can restore the library if needed. And don’t forget that empowering your collaborators with knowledge is key to lasting improvements.
就像任何产品一样，设计系统在初始发布后经历了一个密集的递归过程。产品设计师会报告错误和新的需求，并需要设计系统团队的持续支持。随着公司的发展，产品团队的优先事项也会发生变化，因此他们会依赖设计系统及时处理新的需求。除了创建培训材料，还要跟踪工作和改进，以便追踪谁在何时做了什么。为了避免回归风险，我建议使用单独的发布来更新错误请求和添加新功能，这样如果需要的话，可以恢复库。而且不要忘记，赋予合作伙伴知识的能力是实现持久改进的关键。
During my experience with design systems, I’ve had to rework and deprecate multiple tasks. To avoid wasting time, think ahead about how to create a modular, scalable, and flexible solutions to facilitate future enhancements. Design systems might sound like a set of steps in a linear process that you follow, but in reality, it’s a cyclical process that includes endless releases, periodic maintenance, and cross-functional contribution.
在我与设计系统的经验中，我不得不重新制定和废弃多个任务。为了避免浪费时间，提前考虑如何创建模块化、可扩展和灵活的解决方案，以便促进未来的增强。设计系统听起来可能像是一个线性过程中的一系列步骤，但实际上，它是一个循环过程，包括无尽的发布、定期维护和跨职能贡献。