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 中将这些状态建模为组件变体 (component variants)。Storybook 将两者连接起来，使交付更加顺畅。

该过程从设计师组装变体网格开始，通常称为贴纸表 (sticker sheet)。

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

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

同样，即将推出的 Storybook Connect 插件 将允许设计师将实时故事嵌入到 Figma 中。这使他们可以更轻松地更新设计，以匹配生产环境中的实时 UI。

将 Storybook 发布到共享工作区以进行签字确认

在发布之前，您需要邀请设计师审查 UI，以确保其正确性并获得梦寐以求的“LGTM—发布！”评论。Github 充当基于云的工作区，指定的审阅者可以在其中留下评论并批准代码的 Pull Request。Chromatic，由 Storybook 团队开发，为您的 UI 提供类似的服务。它通过发布您的 Storybook 来帮助您收集 UI 反馈。

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

结论

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

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

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

本文介绍了在设计和开发之间模糊空间中导航的最新技术。我希望它可以作为您的跨学科团队的起点。