获得设计系统的采用——实用指南

这种差距很大程度上是由于基于画布的可视化设计工具（例如 Sketch）与代码存放平台（例如 GitHub）之间的差距造成的。设计师无法真正看到 GitHub 仓库内部的情况，而开发人员也无法真正使用 Sketch 库。

如何让开发人员和其他所有人真正采用您的设计系统……

事实上，设计师与开发人员的协作一直是一个痛点。不仅仅是设计师，产品经理、营销人员以及其他所有人都应该参与到开发流程的视觉环节中。这正是我们在Bit 协作组件平台上所做工作的关键部分，它让我们有机会学习（并分享）很多关于这个主题的知识。

这种差距很大程度上是由于基于画布的可视化设计工具（例如 Sketch）与代码存放平台（例如 GitHub）之间的差距造成的。设计师无法真正看到 GitHub 仓库内部的情况，而开发人员也无法真正使用 Sketch 库。

如今，现代设计系统都是由现代组件构建的。这些组件的美妙之处在于，无论是否使用 React 等框架构建，它们都有可能弥合设计元素与实际代码中功能齐全的单元之间的差距。

为了在设计师和开发者之间建立真正的协作，您应该充分利用组件，并将其转变为设计与代码交汇的焦点。这听起来很复杂，但只要使用正确的工具、方法和协作，它就会比您想象的更简单。我们还将展示如何创建一个协作的可复用组件系统来实现这一点。

设计师将受益于能够在不同的产品和应用程序中保持一致的品牌和视觉语言，从而确保用户满意并产生良好的体验。开发人员将减少挫败感，并能够在不同项目中标准化和重复使用组件及其开发。团队将提高生产力，并更快、更好地交付。

那么你的设计系统到底是什么？

资料来源：内存泄漏和Astasia Myers的道具

答案取决于你问谁，这就是问题所在。

设计师会说，您的设计系统是在 Sketch Libraries 或 Invision DMS 等工具中进行管理的，并且由视觉组件元素和定义视觉语言规则的样式指南组成。

但是，问问开发人员，他们会说你的设计系统就是你的 GitHub UI 库，它由多个组件组成，并将它们组合在一个存储库中。这个存储库以包的形式发布，供你的不同应用程序使用。

两者既正确又错误，唯一可以确定的是 - 只要设计师和开发人员难以通过统一的事实来源进行沟通和协作，您的用户最终将体验到不太一致的视觉语言，而开发人员将很难标准化您的 UI。

事实上，你的设计系统就是用户体验。这意味着组件的唯一真实来源是代码本身。

这并不意味着你必须放弃 Sketch 并开始编写代码，完全不是。这只是意味着，如果你想让你的设计系统被广泛采用，你必须通过代码以可视化的方式与开发人员协作。我们很快会展示一些可以帮助你实现这一点的工具，甚至让它变得有趣。

为什么开发人员很难采用组件设计系统？

当开发人员被要求实现一个设计系统时，他们要做的不仅仅是将设计转化为代码。他们必须为标准化和协作的组件生态系统构建正确的基础。

构建和分发组件意味着他们必须让其他正在构建你的应用的开发者采用他们的组件。随着时间的推移，他们必须维护和更新组件，添加新的组件，并确保每个人都在代码中使用这些组件。

您可以考虑两种不同类型的“开发人员”，他们必须与您设计的组件打交道：

组件（库）构建者：这些开发人员负责将设计转化为代码，然后将组件分发给应用构建者，并确保这些组件在您组织的所有项目中得到采用和标准化。他们负责构建UI 库，并随着设计的演变进行文档化和更新。
应用构建者（组件使用者）：这些开发者正在为您的组织或团队构建实际面向用户的应用。他们是您的设计系统中组件的“消费者”。如果您不能让他们采用您的组件，您的用户也将无法获得它。

为什么应用程序构建者不采用您的组件？

使用 bit.dev 中的真实 React 组件构建的可视化设计系统

为了让开发人员采用组件，您需要构建一个可重复使用的组件系统，该系统可供不同的团队采用并在不同的应用程序中使用。

由于多种原因，这可能很困难：

发现组件：应用程序构建者需要能够快速查找和选择组件，了解它们的工作原理，查看大小或依赖关系等相关信息，以及查看 API 参考、道具等。一个好的解决方案是使用bit.dev的可重复使用的组件集合。
采用组件：应用开发者需要能够只安装和使用他们需要的组件，而不必添加整个库，以免让应用臃肿、运行缓慢。他们希望只更新真正需要的组件，而不是每次都更新整个库。
修改组件：应用开发者需要能够使用组件，而无需将他们的应用与库的开发耦合。他们无法每次都为了提交一个拉取请求而深入研究整个库。他们需要直接从自己的项目中修改组件并提出更新建议，并确保修改后的代码能够在自己的应用上下文中正确运行和构建（目前只有Bit可以实现）。

构建一个被采用的组件系统

最好的解决方案是创建一个可重复使用的组件系统，将您的设计系统和组件库整合到一个可重复使用的组件协作系统中。

这种方法意味着您可以构建一个系统，将库和应用中的所有组件集中组织到一处。开发者可以轻松地在其应用中发现、学习、使用、采用和更新组件。

设计师可以即时查看和监控其设计在实际代码组件中的真实实现，并进行可视化协作以确保所有实现都符合设计系统和样式指南。

该组织在整个项目中获得了更多的组件采用和标准化，并确保了整个应用程序的 UI/UX 和品牌一致性。

如何构建可重用的组件系统

可重用的组件系统

目前，有一款名为Bit ( GitHub ) 的工具可以让你构建可复用的组件系统。Bit 是一款开发工具，它将组件与库和应用程序隔离开来，并确保每个组件都可以在任何其他应用程序中构建、测试和运行。它还允许你开发来自不同项目的组件，并在它们之间同步更改。它是一款非常实用的组件系统构建工具。

要创建可复用组件系统，您可以使用bit.dev，它是一个“即服务”的组件中心（个人或开源用户均可免费使用）。在这里，您的团队可以快速搭建一个可复用组件系统进行构建。

创建您自己的可重用组件系统

了解有关构建可重用组件系统的更多信息

您可以在这里探索一些开源可重用组件系统

组件（库）构建者可以立即将其组件导出到可复用的集合中，以便每个人都能找到、使用并协作使用这些组件。借助Bit 的开源工具，组件可以作为独立单元导出，并包含所有必要的依赖项和配置以供复用。事实上，组件构建者的单一仓库体验得到了增强，他们能够构建、测试、版本控制和分发独立的组件。

应用开发者可以轻松找到共享组件，根据大小或依赖项等数据进行筛选，查看从代码中提取的 props 和 API 引用，并直接在自己的应用中使用组件。此外，他们还可以直接从自己的应用中导入组件并提出更新建议。由于每个组件都是独立的，因此它们可以在新应用中“开箱即用”地运行和构建。这意味着组件的采用率、标准化和复用率将进一步提升。

由于所有组件也都可视化地呈现在您的 bit.dev 系统（示例）中，设计师现在也可以准确地看到每个组件在实际代码中的实现方式，监控组件随时间的变化，并直接与开发人员协作，共同构建您的 UI。由于每个组件都在一个可实时编辑的 Playground 中渲染，因此整个过程变得极具交互性，您可以保存不同的组件可视化示例，并调整您的设计。

将每个组件可视化，以便设计人员了解代码的实现方式；使用您所看到的内容

总结一下一些优点：

组件构建者获得了跨项目和应用构建、分发和推广其组件的工具。借助Bit，他们自己的 UI 库的 Monorepo 体验也得到了提升。
应用构建者可以轻松查找和选择组件。他们可以只安装和更新应用中所需的组件。他们可以直接在自己的项目中提出更新建议。每个组件都可以在任何项目环境中开发、运行、构建和测试。采用变得更加简单。组件在各个项目中都是标准化的，这非常实用。
团队可以通过可复用的组件系统进行协作，无需在 Sketch 和 GitHub 之间来回切换，并持续确保其满足设计和开发的需求。产品和市场等其他利益相关者也可以协作。
**用户**在您的应用中获得一致的体验，成功地与您的应用进行交互，熟悉您的品牌，并且总体上更满意。