如果你想知道苹果公司、Uber或Spotify是如何在其数百个页面上保持其用户界面和用户体验的完美一致性的，那是因为他们使用了一个设计系统。设计系统是过去 "模式库 "或 "品牌指南 "的增强版，可以被定义为一个可重复使用的组件库，其中包括每个组件的文档，以确保在不同的应用程序中正确使用它和它的一致性。文档是系统的核心，通过涵盖可访问性、布局、整体指南等，超越了组件。
通过创建设计系统，公司正在为他们的前端团队建立一个单一的真理之源，从而允许大规模的产品出货，并在整个产品范围内保证用户体验的完美一致性。
正如这篇文章所记载的，一个设计系统是由不同的部分组成的，我们可以将其分为四个主要类别。设计令牌、设计套件、组件库和文档网站。
设计系统是为谁设计的
你可以认为设计系统的建设和维护成本很高，需要一个专门的团队。如果有些公司确实依赖一个团队，那么现在有一些工具可以让任何公司从设计系统中受益，无论他们的前端团队或现有产品的规模如何。这些工具之一就是Backlight。
什么是Backlight
Backlight是一个多合一的协作工具，允许团队大规模地建立、运送和维护设计系统。
有了Backlight，设计系统的每一个方面都在一个单一的屋檐下，团队可以建立每一个组件，记录它，分享它以收集反馈意见，并运送它，所有这些都不需要离开Backlight环境。这使得开发人员和设计师之间可以在生产力提高的基础上进行无缝协作，并保证依靠设计系统的产品之间的完美的用户界面和用户体验一致性。
建立你的设计系统的步骤
#1 选择你的技术
你可能已经有了现有的组件，你可以选择坚持使用你现有的技术。虽然很多公司都会选择React，但其他技术也值得考虑。
如果你不想从头开始一个新的设计系统，Backlight提供了一些设计系统启动包供你选择。每一个都有内置的令牌、组件、交互式文档、故事书故事，都可以根据你的产品的喜好进行定制。
#2 设置你的设计标志物
一旦你的技术被选中，你通常会开始创建（或定制，如果你选择使用启动包）基本的设计令牌。设计令牌是规定你的设计系统组件的价值，如颜色、间距、排版、半径......。
在Backlight中，设计令牌被方便地列在左边的面板上，这样你就可以一目了然地了解情况了。
要创建一个新的代币，只需点击 "+"按钮并开始编码。在编辑模式下，代码会显示在代币旁边，这样你就可以边编辑边看，预览窗口与代码并排。对代币代码的任何修改都可以自动推送到预览窗口，这样你就可以立即看到你的修改结果。
对于单纯咨询设计系统的用户来说，列表显示在预览的旁边，以便更清晰地了解。你可以观察到，文档模式的用户界面不显示代码，这使得对你的设计系统的咨询更加简单和无噪音。你可以通过玩这个入门套件自己看看。
#3 构建你的组件
组件是你的设计系统的核心，你可以把它们想象成可重复使用的建筑块。按钮、头像、单选、标签、手风琴，这个列表可以根据你的用户界面的需要而变得复杂或简单。
大多数公司已经有了现有的组件。要开始你的设计系统，第一步是创建一个详尽的清单，列出迄今为止在产品中使用的每一个组件，并确定最合适的架构，然后你可以开始一个一个地构建它们。
在Backlight中，你可以直接在内置的浏览器IDE中构建你的组件，始终保持旁边的预览面板，以随时验证结果。
一旦一个组件被创建，只要它存在（或你删除它），它就会一直存在于你的设计系统中，由于它必须与它一起成长，Backlight使更新组件的工作变得特别容易。
另外，如果你建立在现有的资产上，通过GitHub和Gitlab的原生支持，你可以直接从Backlight推送分支上的变化，并通过点击来审查拉动请求。
#4 添加故事
设计师和开发人员之间的合作是每个创建设计系统的团队都必须解决的瓶颈之一。确保两者一致的方法之一是提供组件状态的简单视觉迭代，这是代码的实时表示，而不是在某一特定时间的简单屏幕截图。
为了做到这一点，Backlight增加了对最常见的解决方案的支持。故事书
Backlight原生支持Storybook的故事文件。故事是给定一组参数的UI组件状态的可视化表示，也是可视化设计系统或简单获得组件迭代的快速概览的最佳方式之一。
故事可以直接编码到Backlight中，并显示在文档的旁边。
#5 链接你的设计资产
如果你已经有了设计资产，Backlight支持Figma以及Adobe XD和Sketch。通过嵌入资产的链接，Backlight 将在界面中与文档和代码一起显示这些资产，这样开发人员就可以确保两者的同步性。
- Figma库
在设计师工具中，Figma通常是最常用的工具之一，它的库可以在Backlight中原生显示，让开发者直接访问视觉效果。
- Adobe XD
除Figma外，Adobe XD在设计师社区中占有特殊地位，它在Backlight中也得到了支持。
- 素描
通过支持Sketch链接并允许它们嵌入到文档中，Backlight再一次确保了设计师和开发人员之间的适当协调，消除了长时间来回奔波的需要以及团队成员对他们不熟悉的工具的依赖。
#6 生成文档
一个设计系统只有在它的文档中才是伟大的。作为系统的核心，文档有多个方面，但主要是能够。
- 促进产品团队对设计系统的采用，这要归功于视觉预览和简洁的操作方法。
- 简化维护工作，一个文档完善的系统就像一个文档化的代码，知道每一点的方法和原因，团队就会更容易扩展或调整部分。
- 确保设计系统的生存，一个容易消化的系统文档可以避免团队成员走捷径，最后不使用它。
Backlight支持多种技术来构建你的文档，MDX、MD Vue、mdjs或Astro，你可以选择最适合你的那一种。如果你想知道选择什么技术，这篇文章将能为你提供指导。然而请记住，最好的做法是使用能够嵌入你的真实组件的技术，从而确保文档在任何时候都有它的最新视觉迭代。
Backlight允许用户建立交互式文档，有菜单、黑暗和光明模式、实时代码沙盒、组件预览等等。
像设计系统的其他部分一样，代码显示在预览的旁边，以便随时有视觉反馈。
为了激发灵感，这里有一个迄今为止最好的设计系统文件网站的清单。
#7 从团队中收集反馈
前端团队在建立设计系统时遇到的主要瓶颈之一（如果不是的话）是开发者和设计师之间的沟通。双方都生活在自己的工具中，结果往往是团队创建了多个异步的设计系统，维护成本很高，而且经常出现错误。
Backlight提供了一个平台，它不仅把所有的东西都集中在一个屋檐下，而且输出的文档和视觉效果也很容易与整个团队分享。
- 在任何时候，开发人员都可以分享他正在工作的实时预览，并在收到反馈时编辑组件。每次编辑都会被推送到实时预览中，另一方可以直接看到结果。
- 设计师可以更新Figma或Adobe Xd库，它将自动显示在Backlight内的相应标签中，以便开发者更新受影响的组件。
- 由于有了实时预览面板，懂代码的设计师可以快速更新任何组件或标记，使其符合自己的喜好，然后可以在推送发布前由开发人员审查。
#8 发送你的设计系统
一旦你有了一个合适的设计系统、标记、组件和与之相配的文档，现在是使用它的时候了，这意味着生成设计系统的输出（代码、文档网站......）供团队使用。
在发布之前，你可以使用内置的可视化差异面板，一目了然地仔细检查未发布的变化，甚至可以自动进行测试。
一旦所有的东西都得到了正确的验证，为了方便发布，Backlight有一个内嵌的npm包发布器，所以你可以根据需要编译、打包和发布你的设计系统。
一旦发布，你将能够看到以前的发布历史，并直接从发布面板上访问每个相应的包。
启动你自己的设计系统
通过简化每一个步骤，并将其全部置于同一屋檐下，Backlight使每个团队都能负担得起设计系统，无论其规模如何。
听起来很有希望？等到你了解到有更多的内置功能，以及你现在就可以开始你自己的设计系统时，你就明白了Backlight不仅仅是一个产品，它是一个社区，将为你设置起跑线，并引导你通过终点线。
