Storybook 的设计集成

如果设计到开发的工作流程能够无缝衔接，会怎么样？如果你能够将设计规范与生产 UI 实现同步（反之亦然），你就可以更快、更自信地构建 UI。

“这个看起来对吗？”和“这个的设计在哪里？”这类问题将不复存在。你无需在应用程序之间切换，来交叉引用视觉规范、渲染的 DOM 和可用性指南。

本文展示了 Storybook 的设计集成，它们可以加快实现速度，确保像素完美，并为你的团队解锁新的设计系统工作流程。

• 🖼 设计交付
• 📓 设计系统文档
• 📲 代码原型

设计交付

设计交付是指将图像、规范和原型“交给”开发人员进行实现的流程。在实际操作中，这个过程会有损耗。你最终会在设计工具和代码编辑器之间来回切换，同时还要处理规范版本和技术障碍。

交付插件将设计工件嵌入到组件旁边。这通过允许你在开发工具中交叉引用设计来加快开发速度。更重要的是，这种连接将保留下来供团队所有人查看。

Figma

Figma 是一款流行的协作式 UI 设计工具，被 Slack、Twitter 和 Dropbox 等团队使用。它允许多个人在浏览器中同时处理同一份设计。

该Figma 插件在组件实现旁边显示组件设计，并提供方便的检查工具，用于间距、文本和 CSS。设计更改将自动反映在 Storybook 中。

Zeplin

Zeplin 是一款设计交付工具，可以从 Sketch、Figma 和 Adobe XD 生成风格指南。它会自动提取设计文件中的元数据，如资源、颜色和测量值，以便开发人员更容易遵循设计规范。

有多种途径可以将 Storybook 和 Zeplin 集成。在 Storybook 中，Zeplin 插件在当前选定的组件旁边显示设计，并包含方便的工具，可以将静态设计覆盖在实时组件之上。

在Zeplin 的桌面应用中，将 Storybook 组件嵌入到设计旁边，以便在交付过程中进行参考。当你将 Storybook 组件连接到 Zeplin 时，它会自动突出显示和链接设计组件的所有实例与 Storybook 中的实时实现。

设计系统文档

设计系统的优劣取决于其文档。今年早些时候，我们对 Storybook 社区进行了研究，发现设计系统文档是碎片化的。每个团队的技能都不同，因此没有任何一种方法适合所有情况。

幸运的是，Storybook 在如何教授设计系统方面不拘泥于形式。组件是记录 UI 组件示例的轻量级方法，专为 UI 开发人员而设计。它被设计成可以嵌入到设计和文档工具中。

Zeroheight

Zeroheight 是一款协作式设计系统管理器。它将设计、代码、品牌和文案文档收集到一个地方。用户可以使用所见即所得编辑器轻松编辑文档。Zeroheight 集成将 Storybook 组件嵌入 Zeroheight 中，与 Figma、Sketch 或 Adobe XD 设计一起展示。

InVision Design System Manager

InVision DSM 是一款设计系统文档工具。它帮助设计团队在一个共享的工作空间中整合 UX 原则、用户界面设计、使用指南、令牌和治理。

DSM 允许你在 DSM 应用中查看 Storybook 组件以及设计（这些设计是从 Sketch 导入的）。

Frontify

Frontify 是一款品牌管理工具，集成了设计资源、故事、代码示例、使用指南。作为关于公司品牌的所有信息的单一来源，Frontify 使你能够将 Storybook 组件与其他品牌资产一起嵌入。

兼容 oEmbed：Notion、Medium、Wordpress、Ghost 等

Storybook 组件可以嵌入任何支持 oEmbed 标准的工具中。例如 Notion、Medium 和 Wordpress。你只需要将你的 Storybook 在线发布到Chromatic，这是一个由 Storybook 团队制作的安全 CDN 服务。

代码原型

Storybook 是组件开发、测试和文档的行业标准。成千上万的公司已经使用它来编目他们的生产 UI 模式。现在出现了一类新的交互式设计工具，它们使用你现有的 Storybook 组件作为高保真度的真相来源来制作用户体验原型。

UXPin

UXPin 是一款交互式设计工具，它使用生产代码来创建设计流程。团队可以更快地交付，因为设计师使用与开发人员相同的构建块：组件。

UXPin 将 Storybook 组件嵌入到其可视化编辑器中，以便你的设计团队可以使用生产组件进行原型设计。

连接设计与开发

开发人员和设计人员正在向 UI 组件这一概念汇聚。组件封装了 UI 的视觉、功能和交互方面。但每个学科使用不同的工具。

Storybook 与你所有的设计工具集成，以帮助你的团队暴露边缘情况，确保一致性，并审查正在进行的工作。最终，你可以用更少的精力更快地交付。

构建你自己的集成或插件
Storybook 的 API 允许你无限扩展和配置 Storybook。通过插件集成来自定义 Storybook 自己的 UI 和功能。或者通过嵌入将 Storybook 组件导出到其他工具。

如果你对插件和集成感兴趣，我们的社区会支持你。在 Discord 的 #addons 频道找到我们。这里有一些顶级资源：

• 📦 Addon Kit 是一个入门模板，它提供了样板代码和示例代码，可以帮助你快速启动插件开发。
• 📖 Addon 文档详细介绍了编写插件所需的一切。它涵盖了 API、项目设置和用例。
• 🗺 “创建插件”提供了构建插件的分步说明。