Figma 插件 Beta 版

随着时间的推移，实现和设计往往会产生偏差。随着应用的复杂性增加，团队会搞不清 Storybook 中哪些已开发，Figma 中哪些已设计。这种模糊性会减慢你的速度。

我很高兴地宣布，适用于 Figma 的 Storybook Connect 插件现已进入 Beta 版。这是一个 Figma 插件，它将你的 Story 引入设计工作空间。这简化了设计交付和 UI 评审，因为团队可以参考代码组件以及它们的设计。

• 🔗 将 Story 连接到设计
• 🕹 在 Figma 中与 Story 互动
• 📌 在设计交付期间准确定位组件
• 📐 比较设计规范与实现
• 🔐 私有项目和访问控制

问题

开发者和设计师在组件上正在趋同，但每个领域采取了不同的方法。开发者在 Storybook 中构建组件，而设计师在 Figma 中绘制组件。

每个组件都在不同的工具中表达两次。自然地，这种重复导致了关于 UI 真相来源的困惑。你最终会问“这个组件是否已经存在？”以及“为什么这个组件看起来和设计不一样？”

因此，即使开发者和设计师都从组件开始，实际上却存在明显的脱节。在 Storybook，我们的使命是连接 组件驱动的 工具。

立即加入 Beta 版！

我们正在推出适用于 Figma 的 Storybook Connect，以将 Story 连接到其对应的变体。团队工作更高效，因为他们可以在设计过程的早期调试不一致之处，并发现现有组件进行重用。

在我们开始之前，你的项目需要发布到 Chromatic，这是一项由 Storybook 维护者提供的免费服务。Chromatic 处理访问控制、安全、嵌入以及支持插件的数据库。一旦你的项目在 Chromatic 上，请按照以下步骤操作。

1. 加入我们的 Discord #figma-plugin 频道
2. 安装插件并 ❤️ 它

#figma-plugin 频道让你能够联系到维护者并获得实践支持。

将 Story 连接到设计

将 Story 连接到相应的 Figma 组件或变体。点击 Figma 中的组件，然后粘贴与设计匹配的 Story URL。这会在代码和设计之间建立持久连接，并传播到所有 Figma 文件中的每个组件实例。连接一次后，就无需再进行。

使用交互式 Story 确认行为

打开 Storybook Connect 窗口，快速参考你在 Storybook 中构建的真实组件实现。这有助于设计师在决定使用组件之前确认其预期行为的细微差别。在交付期间，开发者无需切换窗口即可快速参考实现。

一键打开完整的 Storybook

跳转到完整的 Storybook，其中包含插件、测试和自动生成的文档。每个连接的组件都有一个方便的链接“在浏览器中打开 Story”。

在设计交付期间准确定位组件

链接到 Story 的组件会在 Figma 侧边栏中突出显示。这有助于你识别哪些组件可以重用，哪些需要新建。这可以避免团队意外创建同一组件的多个版本。

比较实现与设计规范

在 UI 实现评审期间，使用 Storybook 插件检查渲染的 UI 是否与设计匹配。Measure 插件显示 DOM 元素的尺寸和间距。这有助于你精确到像素确认设计细节。

一览 CSS 布局对齐

使用 Outline 插件可视化每个 DOM 元素的边界。这有助于你调试 CSS 对齐。

检查颜色可访问性

Accessibility 插件提供模拟不同形式色盲的滤镜。这有助于你验证组件的调色板对残障用户是否友好。

已经收到邀请？

查看我们 Figma 社区文件中的完整设置指南。

参与进来

适用于 Figma 的 Storybook Connect 正在积极开发中。我们需要你的帮助来寻找边缘情况并改进工作流程。在 Discord #figma-plugin 上与我们交流。

该插件由 Jono Kolnik、Michael Arestad、Gert Hengeveld、Zoltan Olah 和 Dominic Nguyen（我！）开发。

如果 Storybook 让你的 UI 开发工作流程更轻松，欢迎加入我们的社区，让 Storybook 变得更好。你可以贡献新功能、修复 Bug 或改进文档。要获取项目更新和抢先体验功能，请在下方订阅 Storybook 的邮件列表。