Figma 插件抢先看

在 Storybook，我们相信软件行业正趋同于组件驱动的 UI，以交付持久的用户体验。我们的目标是加速行业向组件的转变。

现在，成千上万的开发者使用 Storybook 构建、测试和文档化组件。设计师也创建组件。Figma 在 2016 年采用了组件，并从设计角度倡导这一理念。

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

• 🤝 将设计组件链接到故事
• 🕹 在 Figma 中体验交互式故事
• 🎯 对比实现与设计

等等，但是为什么？

前端的经典障碍之一是让设计师了解生产环境中的实时情况。实现和设计往往随着时间的推移而脱节。这导致了对预期 UI 外观和行为的困惑。

有了组件，开发者和设计师就有了共同的构建块。但是，根据您的学科，组件的方法有所不同。

开发者使用 Storybook 在与应用程序隔离的情况下开发组件。核心创新是故事，一种用于组件示例的基于标准的格式。您构建组件并沿途编写故事，以捕获关键状态。

受工程学的启发，Figma 的组件解锁了诸如“组合、继承和无限覆盖”之类的超能力。借助组件变体，设计师可以更精细地表示关键状态。

稍加留意就能看出，Storybook 故事映射到 Figma 变体，反之亦然。到目前为止，这些同源的构建块一直难以链接在一起。

连接 Storybook 和 Figma

如果可以将故事连接到其变体，会怎么样？这意味着设计师可以在设计过程的早期看到实时组件以调试不一致之处。作为开发者，您将节省时间，因为设计实际上会反映生产环境中的内容。

Figma 插件将故事嵌入到设计工作区中，以便设计师可以在一个地方交叉引用实时实现。打开 Storybook Connect 窗口以与真实的组件进行交互。

链接组件

当您将组件或变体链接到故事时，该链接会传播到 Figma 中的每个实例。这通过确保您的协作者也可以看到故事链接来节省您的时间。

在设计交付期间，无需再在 Figma 和 Storybook 之间切换标签，也无需搜索多个 Storybook 以找出组件的实现位置。一次链接，一劳永逸。

对比实现与设计

该插件带有一个紧凑而强大的故事嵌入，其中包括熟悉的工具，如轮廓、测量、背景等。这为您提供了一种快速检查外观的方法。

从侧边栏打开 Storybook

通过查看 Figma 侧边栏中的 Storybook Connect 部分，了解哪些组件已链接。您会找到方便的操作来查看就地故事或在 Web 浏览器中查看故事。

注册以获得早期访问权限

适用于 Figma 的 Storybook Connect 通过将故事（代码）连接到变体（设计），使设计师更接近开发者。它正在积极开发中，因此进行了抢先看。

我们需要您的帮助和反馈才能使其成为现实。我们的使命是将组件工具统一到一个无缝的工作流程中。在下面注册 Storybook 的邮件列表，以获取早期访问和项目更新的通知。或者加入我们的 Storybook Discord 聊天 #design 以关注我们的进展。

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