为 Storybook 设计集成

如果设计到开发的流程是无缝的会怎样？ 如果你可以将设计规范同步到生产 UI 实现（反之亦然），你将能够更快、更确定地构建 UI。

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

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

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

设计交付

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

交付插件将设计工件嵌入到 storybook 旁边。 这通过允许你在开发工具中交叉引用设计来加速开发。 更重要的是，这种连接将持续存在，供团队的其他成员查看。

Figma

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

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

Zeplin

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

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

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

设计系统文档

设计系统的好坏取决于其文档。 今年早些时候，我们研究了 Storybook 社区，发现设计系统文档是分散的。 每个团队的技能都不同，因此没有什么是适合所有情况的。

幸运的是，Storybook 对于你如何教人们了解你的设计系统是开放的。 Stories 是一种轻量级的方法，用于记录为 UI 开发人员制作的组件示例。 它旨在嵌入到设计和文档工具中。

Zeroheight

Zeroheight 是一款协作式设计系统管理器。 它在一个地方收集设计、代码、品牌和文案文档。 用户可以使用 WYSIWYG 编辑器轻松编辑该文档。 Zeroheight 集成将 stories 嵌入到 Zeroheight 中，以便与你的 Figma、Sketch 或 Adobe XD 设计一起显示。

InVision Design System Manager

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

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

Frontify

Frontify 是一款品牌管理工具，可将设计资产、stories、代码示例、使用指南并置在一起。 作为公司品牌一切事物的单一位置，Frontify 使你能够将 stories 与其余品牌资产一起嵌入。

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

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

使用代码原型

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

UXPin

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

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

连接设计与开发

开发人员和设计师正在 UI 组件结构上趋同。 组件封装了 UI 的视觉、功能和交互方面。 但每个学科都使用不同的工具。

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

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

如果你对插件和集成感兴趣，我们的社区在这里为你提供支持。 在 Discord #addons 频道中找到我们。 以下是一些顶级资源

• 📦 插件工具包是一个入门模板，为你提供样板代码和示例代码，以快速启动你的插件。
• 📖 插件文档分解了编写插件所需的一切。 它涵盖了 API、项目设置和用例。
• 🗺 “创建插件”提供了关于构建插件的分步说明。