Storybook 的设计集成

如果设计到开发的流程是无缝的呢？如果你能将设计规范与生产环境的 UI 实现同步（反之亦然），你就能更快、更确定地构建 UI。

诸如“这看起来对吗？”和“这个设计稿在哪儿？”的问题将不复存在。你无需在不同应用之间跳转来交叉引用视觉规范、渲染后的 DOM 和可用性指南。

本文展示了 Storybook 的设计集成，它们能加速实现、确保像素级完美，并为你的团队开启全新的设计系统工作流程。

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

设计交付

设计交付是将图像、规范和原型“交给”开发者进行实现的过程。实践中，这个过程往往会丢失信息。你最终会在设计工具和代码编辑器之间来回跳转，同时还要处理规范版本问题并遇到技术障碍。

交付插件可以将设计产物嵌入到 Story 的旁边。这能让你在开发工具中交叉引用设计，从而加速开发。更重要的是，这种连接关系会保留下来供团队其他成员查看。

Figma

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

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

Zeplin

Zeplin 是一款设计交付工具，可以从 Sketch、Figma 和 Adobe XD 生成样式指南。它能自动从设计文件中提取资产、颜色和尺寸等元数据，使开发者更容易遵循设计规范。

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

在Zeplin 桌面应用中，可以将 story 嵌入到设计稿旁边，以便在交付时参考。将 story 连接到 Zeplin 后，它会自动高亮显示并链接所有设计组件的实例到 Storybook 中的实时实现。

设计系统文档

设计系统的好坏取决于其文档。今年早些时候，我们调研了 Storybook 社区，发现设计系统文档是碎片化的。每个团队的技能各不相同，因此没有一种方案适用于所有情况。

幸运的是，Storybook 对于你如何教授人们了解你的设计系统持开放态度（un-opinionated）。Stories 是一种为 UI 开发者构建的、用于记录组件示例的轻量级方法。它被设计用于嵌入到设计和文档工具中。

Zeroheight

Zeroheight 是一款协作式设计系统管理器。它将设计、代码、品牌和文案文档收集到一处。用户可以使用所见即所得 (WYSIWYG) 编辑器轻松编辑这些文档。Zeroheight 集成功能可以将 stories 嵌入到 Zeroheight 中，与你的 Figma、Sketch 或 Adobe XD 设计稿一同展示。

InVision 设计系统管理器

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

DSM 允许你在 DSM 应用中查看 Storybook 组件，与设计稿（从 Sketch 导入）一起展示。

Frontify

Frontify 是一款品牌管理工具，将设计资产、stories、代码示例和使用指南汇集一处。作为你公司品牌相关所有内容的单一来源，Frontify 让你能够将 stories 与其他品牌资产一起嵌入。

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

支持 oEmbed 标准的任何工具都可以嵌入 stories。例如 Notion、Medium 和 Wordpress。你只需将你的 Storybook 发布到线上，可以使用 Storybook 团队提供的安全 CDN 服务 Chromatic。

用代码构建原型

Storybook 是组件开发、测试和文档领域的行业标准。已有数千家公司使用它来整理生产环境的 UI 模式。目前出现了一类新型的交互式设计工具，它们使用你现有的 stories 作为高保真单一事实来源来构建用户体验原型。

UXPin

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

UXPin 将 stories 嵌入到他们的可视化编辑器中，以便你的设计团队可以使用生产环境的组件来构建原型。

连接设计与开发

开发者和设计师正在趋同于 UI 组件的构建方式。组件封装了 UI 片段的视觉、功能和交互方面。但每个领域使用的工具不同。

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

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

如果你对插件和集成感兴趣，我们的社区随时为你提供支持。在 Discord 的 #addons 频道找到我们。以下是一些热门资源：

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