总结

原作者：brad frost 从设计执行的角度出发，谈论了设计系统应该包含的组成部分。表示仅仅提供sketch组件库和使用方式，并不是完整的设计系统。设计系统应该包含设计初衷，设计原则和落地方法。以及上线验收和高效率的复用性。他表示，设计系统并不是一个人能够完成的。它需要团队中的不同角色合作，设计系统评判标准为：以高效可执行且可迭代

以下为原文翻译，英语能力强的推荐看原文。原文链接在文章底部。

01 起源

我们可以用文字指导如何正确使用sketch组件。例如：弹出层，图片。甚至创造出更有效的方法来设计组件。

但在一天结束的时候，如果你没有一个功能正常的组件，所有的努力都是徒劳的。

在设计系统研讨会上，我询问参会者在他们的设计系统之旅中的位置。当我问他们组织是否有设计系统时，大多数人都会举手，当我要求展示他们设计的设计系统的时候，很多参会者会给我看一个sketch组件库或一个风格指南网站，里面有大量的截图和说明文字，但是缺少生动的、响应式的用户界面组件。

这听起来可能很明显，但重要的是要理解你不能用截图和sketch文件来构建工作软件。他们只是静态设计工具或文档，而且他们无法创建可用于构建真实软件应用程序的功能性UI组件。

静态文件、说明文档、指导原则以及其他所有有助于讲述组织如何设计和构建产品的故事，但任何伟大的设计系统的核心都是一组可重用的UI组件，产品团队可以利用这些组件来构建实际的软件。

那么，一个团队要做什么来确保构建真正的功能性UI组件的优先级呢？

  1. 确保设计系统团队中有前端设计师。有大量的前端设计人员渴望构建干净、漂亮的模块化、可重用的前端代码。
  2. 建立一个驱动模式、跨学科的工作流，强调尽早进入浏览器并在前端代码上迭代。与其设计师只停留在静态设计工具，不如鼓励与开发人员合作，以确保设计能够部署到真实产品的实际代码中。
  3. 在设计系统计划的早期，讨论将用户界面组件部署到产品代码库中的方法，然后使用单个组件快速试用该工作流（“好，这是我们设计系统的按钮组件，如何让它显示在主页上？”）
  4. 了解创建使用特定技术（如React、Angular、Twig等）的功能性UI组件和创建比任何技术实现都大的设计系统之间的摩擦。
  5. 确保真实可用的、响应式和代码与样式指南中的任何设计文档和屏幕截图一起显示。

别误会我，我认为sketch、Invision Studio、Adobe XD、Figma等工具终于认识到创建可重用的UI组件以及在团队成员之间共享这些组件的重要性，这真是不可思议。

我更为兴奋的是，为了让设计师能够创建能够准确地表示那些屏幕在浏览器中的外观的屏幕，我将把灵活的组件重新填充到静态设计工具中。使用静态设计工具与设计系统协同工作是很有价值的，但是一定要关注奖励：创建一个漂亮的、灵活的、可重用的前端组件集合，用于构建真正的软件。现在出去做些设计组件。

02 续

毫无疑问，像sketch这样的工具是非常有价值的，在其中有一组可重用的组件可以帮助设计团队建立深思熟虑和一致的UI。然而，sketch库只是设计系统的一部分。设计系统还可以包括其他内容，如：