Storybook 的 Figma 插件

前端开发中最大的挑战之一是保持设计师与生产环境中的内容同步。UI 设计和实现存在于不同的地方（设计工具和代码），随着时间的推移自然会产生分歧。这可能会导致对于 UI 应该是什么样子的真实来源产生混淆。

为了应对这一挑战，今天我很高兴推出适用于 Figma 的 Storybook Connect，这是一个插件，可让您将 Storybook stories 链接到 Figma 设计。这种连接性可帮助您比较实现与设计规范，从而加快移交和 UI 评审。

🔗 将 Storybook Stories 链接到组件变体
🕹 在 Figma 中使用实时实现
📌 突出显示要复用的组件
📐 将 Storybook Story 与规范进行比较
🔐 设置具有访问控制的私有项目

我们为何与 Figma 合作

我们相信集成有助于团队以更少的工作量交付 UI。Storybook 成为行业标准，因为它旨在实现互操作性。

过去，我们主要关注技术集成，例如 Testing Library、TypeScript、Webpack 和 Vite。今年早些时候，我们开始研究设计集成。组件是 Storybook 和许多设计工具的核心，我们的目标是让设计师更接近开发工作流程，以改善两个世界之间的沟通。

与此同时，Figma 也在探索如何从设计的角度弥合同样的差距。那么，还有谁比 Figma 更适合合作呢？我们与 Figma 合作规划了插件功能并构建了最初的概念验证。

连接 Storybook 和 Figma

Storybook Connect for Figma 将 Storybook Stories 链接到其对应的变体。这有助于团队在设计过程的早期解决不一致问题，并识别可复用的组件。

将 Storybook Stories 链接到组件变体

链接资源一次，它们将自动与设计或实现的最新版本保持同步。更重要的是，这扩展到所有组件实例和您的团队，因此人们不必一遍又一遍地链接组件。

在 Figma 中单击组件，然后粘贴与设计匹配的 Storybook Story URL。

打开插件以引用实时的 Storybook Story。设计师可以在设计中使用组件之前检查组件的工作方式。

将设计稿移交给开发者

设计移交是将规范传递给开发者以进行实现的过程。不幸的是，这可能是一个有损的过程，并且设计细节经常在翻译过程中丢失，尤其是在截止日期临近时（而且通常截止日期都很紧迫）。

Storybook 的 Figma 插件通过在 Figma 侧边栏中突出显示哪些设计组件已经实现，从而简化了移交过程。

在移交期间，单击“在浏览器中打开 Storybook Story”以跳转到包含插件、测试和 API 文档的完整 Storybook 环境。

与设计师一起评审 UI 实现

UI 评审是从设计师那里收集关于 UI 实现反馈的过程。它用于理清不明显的设计细节和技术障碍，并确认实现符合设计规范。

Storybook 的 Figma 插件帮助设计师通过 Storybook 插件检查渲染的 UI 是否与设计匹配。使用 Measure 插件比较 DOM 元素的尺寸和间距与设计规范。

或者，使用 Storybook 的 Outline 插件可视化每个 DOM 元素的边界，以便调试 CSS 对齐。

您还可以通过在 Storybook 的 Accessibility 插件中切换视觉滤镜来模拟不同形式的色盲，从而验证组件的调色板是否可访问。

立即试用插件

适用于 Figma 的 Storybook Connect 由 Storybook embeds 和 Chromatic 提供支持，Chromatic 是 Storybook 核心团队创建的可视化测试和发布工具。按照以下说明开始使用！

先决条件

• 您的 Storybook 项目已发布在 Chromatic 上
• Figma editor 角色
• 在 Chromatic 中被列为协作者

将 Storybook URL 链接到 Figma 组件

1. 从 Figma 社区安装 Storybook Connect 插件
2. 打开插件。使用 Figma 中的命令面板 CMD + /，然后输入 Storybook Connect。

3. 选择要链接的 Figma 组件。该插件支持将 Storybook Stories 链接到 Figma 组件、变体和实例。该插件不支持将 Storybook Stories 链接到图层。

4. 将 Storybook Story 的 URL 粘贴到插件的表单字段中，以将 Storybook Story 链接到您的 Figma 组件、变体或实例。

5. 链接后，组件及其所有实例都将在侧边栏中包含链接，以查看相应的 Storybook Story。

在 Figma 中打开 Storybook Story

1. 选择您之前在 Figma 中链接的组件。
2. 然后导航到 Figma 的“设计”侧边栏选项卡，然后单击“查看 Storybook Story”操作。或者，使用命令面板 command + / 打开插件，然后输入名称 Storybook Connect。

了解更多

• 从 Figma 社区安装插件
• Figma 社区完整设置指南
• Storybook 的设计集成概述

🙏 特别鸣谢：该插件由 Jono Kolnik、Michael Arestad、Gert Hengeveld、Zoltan Olah 和 Dominic Nguyen (我!) 开发。非常感谢早期访问用户 kaelig、yngvenilson、michalzadkowski、oogo、pilotconway、rikot、w-a-t-s-o-n、reony、webhode 以及数百位用户。特别感谢 Figma 的 Emil Sjölander 和 Emily Brody 对我们开源社区的支持。