Figma 的 Storybook 插件

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

为了解决这一挑战，今天我很高兴地推出 Figma 的 Storybook Connect，这是一个允许您将 Storybook stories 连接到 Figma 设计的插件。这种连接性帮助您比较实现与设计规范，从而加快交接和 UI 评审。

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

我们为何与 Figma 合作

我们认为集成有助于团队更轻松地交付 UI。Storybook 是一个行业标准，因为它被设计为可互操作的。

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

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

连接 Storybook 和 Figma

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

将 stories 链接到组件变体

链接一次资产，它们将自动与最新的设计或实现版本保持同步。更重要的是，这适用于所有组件实例以及您的整个团队，因此无需重复链接组件。

在 Figma 中点击组件，然后粘贴与设计相匹配的 story URL。

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

将设计移交给开发者

设计移交是将规范传递给开发者进行实现的过程。不幸的是，这可能是一个信息丢失的过程，设计细节常常在传递过程中丢失，尤其是在截止日期很紧的情况下（而且截止日期往往都很紧）。

Storybook 的 Figma 插件通过在 Figma 侧边栏中指出哪些设计组件已经实现来简化移交过程。

在移交过程中，点击“在浏览器中打开 story”即可跳转到完整的 Storybook 环境，其中包含插件、测试和 API 文档。

与设计师一起评审 UI 实现

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

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

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

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

立即试用插件

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

前提条件

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

将 Storybook URL 链接到 Figma 组件

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

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

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

5. 链接后，该组件及其所有实例将在侧边栏中拥有链接，以查看相应的 story。

在 Figma 中打开 story

1. 选择您之前在 Figma 中链接的组件。
2. 然后导航到 Figma 的 Design 侧边栏选项卡，点击“View 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 对我们开源社区的支持。