Figma 插件抢先看

在 Storybook，我们相信软件行业正趋向于使用 组件驱动型 UI（Component-driven UIs） 来提供持久的用户体验。我们的目标是加速行业向组件的转变。

现在，成千上万的开发者使用 Storybook 构建、测试和记录组件。设计师也创建组件。Figma 早在2016年就采用了组件，并从设计的角度推动这一事业。

我很高兴分享我们的新 Figma 插件，Storybook Connect 的抢先看。它通过连接设计与 Stories，使设计师和开发者保持同步。

• 🤝 将设计组件链接到 Stories
• 🕹 在 Figma 中使用交互式 Stories
• 🎯 对比实现与设计

等等，但为什么？

前端开发的经典难题之一是让设计师了解生产环境中正在运行的内容。实现和设计往往会随着时间的推移而产生偏差。这导致了对预期的 UI 外观和行为的困惑。

通过组件，开发者和设计师有了一个共享的构造。但根据你的专业不同，组件的使用方法也有所不同。

开发者使用 Storybook 在独立于应用的环境中开发组件。其核心创新是 Story，这是一种基于标准的组件示例格式。你可以在构建组件的同时编写 Stories，以捕获关键状态。

受工程学的启发，Figma 的组件解锁了“组合、继承和无限覆盖”等超能力。通过组件的 Variants（变体），设计师可以更精细地表示关键状态。

不难看出，Storybook Stories 对应于 Figma 的 Variants，反之亦然。到目前为止，这些姊妹构造很难链接在一起。

连接 Storybook 和 Figma

如果你能将 Stories 连接到它们的 Variants 呢？这意味着设计师可以更早地在设计过程中查看实时组件以调试不一致之处。作为开发者，你将节省时间，因为设计稿会实际反映生产环境中的内容。

Figma 插件将 Stories 嵌入到设计工作空间中，这样设计师就可以在一个地方交叉引用实时实现。打开 Storybook Connect 窗口即可与真实组件进行交互。

链接组件

当你将组件或 Variant 链接到 Story 时，该链接会传播到 Figma 中的每个实例。这通过确保你的协作伙伴也能看到该 Story 链接来节省你的时间。

在设计交接时不再需要在 Figma 和 Storybook 之间来回切换，也不再需要搜索多个 Storybooks 来查找组件的实现位置。一次链接，永久有效。

对比实现与设计

该插件提供了一个紧凑而强大的 Story 嵌入功能，其中包括“大纲 (Outline)”、“测量 (Measure)”、“背景 (Backgrounds)”等常用工具。这为你提供了快速检查外观的方法。

从侧边栏打开 Storybook

通过查看 Figma 侧边栏中的 Storybook Connect 部分，了解哪些组件已链接。你会发现方便的操作，可以在原地或在你的网页浏览器中查看该 Story。

申请早期访问

Storybook Connect for Figma 通过连接 Stories（代码）和 Variants（设计），拉近了设计师与开发者的距离。它正在积极开发中，因此这次是抢先看。

我们需要你的帮助和反馈来实现它。我们的使命是将在一个无缝的工作流程中统一组件工具。请在下方订阅 Storybook 的邮件列表，以便获得早期访问和项目更新的通知。或者加入我们的 Storybook 的 Discord 聊天室 #design 来关注我们的进展。

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