Storybook 如何帮助设计师与开发者保持同步

交付 UI 是有损的。它需要设计与开发之间的不断往返沟通。

设计有助于您了解用户体验概览，但通常仅限于理想流程。开发者需要负责找出所有未在规范中提及的边界情况。

同时，开发往往不可能一次就完美无缺。设计师需要负责在发布之前提供反馈并批准实现方案。

我们研究了 Wave、Optimizely、Artsy 等团队，以了解他们如何以低沟通成本交付精美的 UI。本文将展示他们最喜欢的工具和技术，供您的团队参考。

• 🔍 将代码和 Figma 组件并置，以便更顺畅地交付
• 🧳 将代码组件嵌入到 Figma 中，以便快速参考
• ✍️ 如何自动化获取反馈和批准

开发者 + 设计师协作有什么大不了的？

设计师和开发者几十年来一直共同交付网站。过去，团队从收集需求开始。设计师规范少量页面，然后开发者实现这些设计。

但现在是2022年，应用程序比以往任何时候都更复杂、具有多状态且高度个性化。这意味着需要设计、构建和审查数千种 UI 排列组合。传统的协作方法对于现代 UI 的广泛性而言变得笨重。

设计与开发之间大部分沟通不畅的根源在于两个问题。

设计稿经不起与代码的初次接触
UI 工程很难预测。一旦开发者开始构建 UI，他们经常会遇到格式错误或缺失的数据、尴尬的断点、跨浏览器问题以及其他在设计中未考虑到的边界情况。

新的需求会导致重新设计，这意味着真相来源不断在设计文件和代码之间切换。最终，这导致实现与规范偏离。

您需要催促人们以获得批准
为了闭合学科间的反馈循环，您必须与设计师分享实时 UI，以获得“这样看起来对吗？”的答案。

获取代码反馈很直接。您在 Github 上将一位队友分配到 Pull Request，以便他们留下评论或批准更改。对于 UI，没有中心位置来收集反馈。您最终会不断提醒人们审查并批准 UI 更改。

Storybook 连接设计与代码

问题的关键在于设计师和开发者使用不同的工具。您最终不得不手动来回传递信息。

像 Storybook 这样的组件工作台将使用 React 等 JavaScript 框架编写的组件连接到 Figma 等设计工具。这使您能够在流程早期发现不一致之处，并确保设计与代码相互镜像。更重要的是，您可以发布您的 Storybook 以促进 UI 审查并在集中位置整合反馈。

并排比较让交付更轻松

有了组件，开发者和设计师就有了共同的构建块。团队将一个页面分解为其组成元素，并创建每个组件的变体以适应不同的 UI 状态。

开发者使用 Storybook 开发 UI 组件并将其状态捕获为stories。而设计师则在 Figma 中将这些状态建模为组件变体。Storybook 连接了两者，使交付更加顺畅。

这个过程始于设计师组装一个变体网格，通常被称为贴纸表 (sticker sheet)。

作为开发者，您的目标是确保编写的代码 UI 与原始设计匹配。将设计稿和实时 UI 并排放置，可以更容易地按照规范构建。Storybook 的Design Addon使您能够将 Figma 文件直接嵌入到 Storybook 中。

这些是您可以检查的实时文件。如果设计师推送任何更改，您会立即看到它们。

类似地，即将推出的Storybook Connect 插件将允许设计师在 Figma 中嵌入实时 stories。这使他们更容易更新设计以匹配生产环境中的实时内容。

将 Storybook 发布到共享工作区以进行批准

在发布之前，您会希望邀请设计师审查 UI，以确保其正确无误并获得那句令人愉快的“LGTM—Ship it!”（看起来不错，发布吧！）评论。Github 作为一个基于云的工作区，指定的审查者可以在其中留下评论并批准您代码的 Pull Request。由 Storybook 团队推出的Chromatic提供了类似的服务，但用于您的 UI。它通过发布您的 Storybook 来帮助您收集 UI 反馈。

Chromatic 集成到您的 CI 流水线中。当创建 Pull Request 时，它会自动发布您的 Storybook。然后，您可以分配审查者，他们可以对不太正确的更改进行评论并请求调整。可以将其视为代码审查，但针对您的 UI。

结论

开发者和设计师使用不同的工作流程，这常常使得合作变得棘手。最高效的团队会为协作创造一个明确的时间和地点。

在将设计稿交付给开发时，将设计稿与实现并排放置。在 Storybook 中，使用Design Addon。在 Figma 中，使用即将推出的Storybook Connect 插件。

在与设计师一起审查开发时，将您的 Storybook 发布到一个共享工作区，如Chromatic。这为您的团队提供了一个最新的参考点，他们可以在其中留下评论、获取反馈并分配审查者。

本文介绍了在设计和开发之间的模糊领域中导航的最新技术。我希望它能为您的跨学科团队提供一个起点。