Figma 插件 Beta 版

随着时间的推移，实现和设计往往会脱节。 随着应用程序变得越来越复杂，团队会忘记 Storybook 中开发了什么以及 Figma 中设计了什么。 这种模糊性会降低你的速度。

我很高兴地宣布，Figma 的 Storybook Connect 插件现已推出 Beta 版。 这是一个 Figma 插件，可将你的 Storybook 带入设计工作区。 这简化了设计交付和 UI 审查，因为团队可以在设计旁边参考代码组件。

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

问题

开发人员和设计师都在组件上趋于一致，但每个学科都采用不同的方法。 开发人员在 Storybook 中构建组件，而设计师在 Figma 中绘制组件。

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

因此，即使开发人员和设计师都从组件开始，但在实践中，仍然存在明显的脱节。 在 Storybook，我们的使命是将 组件驱动的 工具连接起来。

立即加入 Beta 版！

我们正在推出 Figma 的 Storybook Connect，以将 Storybook 链接到其相应的变体。 团队工作更智能，因为他们可以在设计过程的早期调试不一致之处，并发现现有组件以重用。

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

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

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

将 Storybook 链接到设计

将 Storybook 链接到相应的 Figma 组件或变体。 在 Figma 中单击组件，然后粘贴与设计匹配的 Storybook URL。 这会在代码和设计之间建立持久连接，并传播到 Figma 文件中的每个组件实例。 链接一次后，你永远不必再做一次。

试用交互式 Storybook 以确认行为

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

一键打开完整的 Storybook

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

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

链接到 Storybook 的组件在 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 变得更好。 你可以贡献新功能、修复错误或改进文档。 要获取项目更新和抢先体验功能，请注册下面的 Storybook 邮件列表。