在过去的三年里，广泛研究并测试了产品设计师如何使用生成性 AI 技术来提高设计工作流程的效率和准确性。

尽管我们还处在初步阶段，设计师们必须在今天就将 AI 整合到我们的设计过程中。这种整合将使我们能够更高效、更精确地工作。

市面上常见的 AI 工具有 ChatGPT、Gemini、Midjourney 等，这些工具展示了人工智能技术的关键特性。此外，每天都有许多新工具发布。

除了这些新的 AI 工具之外，我们还有一些最初并非 AI 的工具，如 Figma 和 Miro。这些工具已经开始添加 AI 功能，现在我们可以用它们来更好地工作。

在本文中，我将向你展示如何使用 FigJam AI 作为一种高效的 AI 流程图制作工具来创建流程图。

设计师们怎么说？“停止移动矩形，投资于创造力。”

这正是我想向你展示的。

什么是 FigJam AI？

FigJam AI 是 Figma 添加到 FigJam 中的 AI 工具。它可以帮助你聚类信息、生成设计思维工作坊、组织信息、总结信息等。

查看我关于 FigJam AI 的文章，了解这个 AI 功能的更详细介绍。

使用 Figjam AI 进行更好设计协作的逐步介绍^[1]
增强设计团队工作流程与 Figjam AI^[2]

在设计师移动矩形之前，现在他们必须详细写出他们想要什么

当我向我的学生展示如何使用 AI 时，我解释的第一个概念之一就是告诉 AI 你想要什么是很重要的。如果不这样做，你将不会得到你想要的结果。

这强调了与传统工作流程的显著区别。

通常，我们不会从明确的最终解决方案开始；相反，我们会实验、调整设计、移动矩形，并在过程中逐步完善我们的愿景。然而，AI 需要从一开始就提供精确的指示。

在我展示的示例中，你可以很好地感受到这一点。在过程中，我对提示做了小的更改，你可以看到它们如何影响结果，以及为什么明确指定你想要什么是这个过程的关键。

需要注意的是：AI 模型也会影响结果，但这些示例显示提示必须准确。

从文本生成流程图

我进行了几次使用 Figjam AI 的测试，以下是我认为最有助于理解这个过程的三个测试。我从简单的提示开始，逐渐转向更复杂的方法。

测试1：顺利流程

我从在网上商店购买T恤的简单流程开始，看看AI是否可以从中生成完整的流程图。

这是提示：

像产品设计师一样，为在电子商务商店购买T恤的过程创建流程图：
- 访问主页。- 选择T恤类别。- 筛选和排序。- 选择一件T恤。- 选择尺码和颜色。- 加入购物车。- 查看购物车。- 结账。- 填写运输和支付信息。- 用户添加促销代码。- 确认订单。
只创建这个流程。不要添加其他内容。

这是结果：

结果测试1

•你可以在Figma中查看流程^[3]。•从Figma社区复制文件^[4]。

我的笔记

FigJam AI准确地创建了我所要求的。AI通过消除手动调整“矩形”的需要，使创建过程更加高效，从而简化了图表的创建。

测试2：包含一个错误的流程

在第二个测试中，我想看看AI是否可以在流程中添加一个条件，以处理某个环节出现错误的情况。

为此，我在流程中添加了用户添加错误促销代码的情况。

提示是相同的，但我添加了这一行：“考虑错误情况：‘促销代码无效。’”

这是提示：

像产品设计师一样，为在电子商务商店购买T恤的过程创建流程图：
- 访问主页。- 选择T恤类别。- 筛选和排序。- 选择一件T恤。- 选择尺码和颜色。- 加入购物车。- 查看购物车。- 结账。- 填写运输和支付信息。- 用户添加促销代码。- 确认订单。
考虑错误情况：促销代码无效。
只创建这个流程。不要添加其他内容。

这是结果：

结果测试2

•你可以在Figma中查看流程^[5]。•从Figma社区复制文件^[6]。

我的笔记

Figjam AI准确地完成了任务，并在流程图中添加了错误情况。 

测试3：包含三个错误的流程图

下一步是看看我是否可以在提示中添加三个错误情况，以及AI是否能理解它们。

我在提示中添加了这些错误情况：

•促销代码无效。•颜色缺货。•支付被拒绝。

这是提示：

像产品设计师一样，为在电子商务商店购买T恤的过程创建流程图：
- 访问主页。- 选择T恤类别。- 筛选和排序。- 选择一件T恤。- 选择尺码和颜色。- 加入购物车。- 查看购物车。- 结账。- 填写运输和支付信息。- 用户添加促销代码。- 确认订单。
考虑以下错误情况：- 促销代码无效。- 颜色缺货。- 支付被拒绝。
只创建这个流程。不要添加其他内容。

这是结果：

结果测试3

•你可以在Figma中查看流程^[7]。•从Figma社区复制文件^[8]。

我的笔记

Figjam AI 完成了任务，但存在一些问题：

•所有错误情况都被添加到流程的末尾，使其难以理解。•视觉效果混乱，线条交错且杂乱。你可以在图中看到它的样子。•错误情况“支付被拒绝？”是负面的，所以如果答案是“否”，支付是成功的。我不喜欢这样，因为这可能会让人困惑。写“支付是否被批准？”会更好，所以“是”意味着成功。•如果支付被拒绝，AI 建议联系客户支持。这是可以的，但也许你想显示错误消息并写上“使用其他支付方式”，因此在解决方案方面也需要更精确。

改进后的提示：

为了避免手动更改，我想通过编写更好的提示来测试AI的能力。我的目标是看看改进后的提示能否正确处理所有错误情况。

我做了以下更改：

•我将错误情况写成问题。•我将问题添加到步骤附近，而不是末尾。•我向AI助手解释了每个情况下我希望发生的具体内容。

这是提示：

像产品设计师一样，为在电子商务商店购买T恤的过程创建流程图：
- 访问主页。- 选择T恤类别。- 筛选和排序。- 选择一件T恤。询问“颜色有货吗？”如果是，继续下一步。如果不是，写上“通过电子邮件通知我。”- 加入购物车。- 查看购物车。- 结账。- 填写运输和支付信息。- 用户添加促销代码。询问“促销代码有效吗？”如果是，继续下一步。如果不是，写上“促销代码无效”，并连接到步骤“用户添加促销代码。”- 确认订单。询问“支付被批准了吗？”如果是，下一步是“完成”。如果不是，写上“联系客户支持。”
只创建这个流程。不要添加其他内容。

这是结果：

结果测试3改进后

你可以在Figma中查看流程^[9]。

我的笔记

•所有错误情况都正确地添加了。•AI助手完全按照我的要求完成了任务。•流程图更易读且易于理解。

测试的关键见解

•如果流程简单，提示编写会更容易；当涉及复杂流程时，你需要花更多时间来编写。•提示的清晰度会带来更好的结果。你的文字指令越详细和清晰，AI生成所需流程图的准确性就越高，从而减少修改的需求。•通过各种方式编写提示来进行试验，以找到与AI沟通的最有效方法，尤其是针对复杂的情况。•对于错误情况，最好将问题写成肯定的形式，这样“是”会引导到正确的步骤。•显示聊天如何继续。如果你展示了一个错误情况，请准确解释你希望在“肯定”结果和否定结果下发生的事情。•你也可以生成顺利路径，单独创建错误情况，然后将它们粘贴到流程中。•使用AI创建流程图是很棒的，但有时手动调整图表的部分比花大量时间编写完美的AI提示更快。

总结

在本文中，我向你展示了如何使用 FigJam AI 作为AI流程图工具来创建流程图和图表。

我展示了我使用该工具进行的三个测试。第一个是顺利流程图，第二个是包含一个错误情况的流程图。

然后，我们看了一个更复杂的包含三个错误情况的流程图。我分享了AI没有完全理解我第一次提示的内容，所以我需要重新编写提示，最终得到了我想要的结果。

在文章的结尾，我分享了一些从这个过程中了解到的关键见解。

每个设计师都需要的用于创建用户流程的最佳 ChatGPT 插件

使用 Whimsical ChatGPT 插件创建用户流程^[10]

如何轻松创建用户流程

创建一个清晰易懂的用户流程可能是一个非常困难的任务。让我们看看一些帮助你完成这项任务的方法…… uxdesign.cc^[11]

从这里开始设计更好^[12]

感谢阅读本文。我希望这篇文章能帮助你了解如何使用 FigJam AI 创建流程图。请随意与朋友或团队成员分享，如果你有任何问题，请告诉我。

更多信息

本文由三人行AI翻译整理自：https://medium.com/design-bootcamp/ai-flowchart-c141502cb661，如对你有帮助，请帮忙点赞、转发、关注，谢谢。

References

[1] 使用 Figjam AI 进行更好设计协作的逐步介绍: uxplanet.org
[2] 增强设计团队工作流程与 Figjam AI: uxplanet.org
[3] 你可以在Figma中查看流程: https://www.figma.com/file/FCUqaNHP0xgDlsW4ZQoalb/AI-flowchart-generator%3A-A-Step-by-Step-Guide-to-Creating-Your-First-AI-Flowchart-with-Figjam-AI?type=whiteboard&node-id=1%3A2&t=KtWc8T4asdmqu1fk-1
[4] 从Figma社区复制文件: https://www.figma.com/community/file/1351924642365998144/3-prompts-for-creating-flowcharts-with-figjam-ai
[5] 你可以在Figma中查看流程: https://www.figma.com/file/FCUqaNHP0xgDlsW4ZQoalb/AI-flowchart-generator%3A-A-Step-by-Step-Guide-to-Creating-Your-First-AI-Flowchart-with-Figjam-AI?type=whiteboard&node-id=1%3A26&t=ttLTFJslqwducAwK-1
[6] 从Figma社区复制文件: https://www.figma.com/community/file/1351924642365998144/3-prompts-for-creating-flowcharts-with-figjam-ai
[7] 你可以在Figma中查看流程: https://www.figma.com/file/FCUqaNHP0xgDlsW4ZQoalb/AI-flowchart-generator%3A-A-Step-by-Step-Guide-to-Creating-Your-First-AI-Flowchart-with-Figjam-AI?type=whiteboard&node-id=1%3A57&t=KtWc8T4asdmqu1fk-1
[8] 从Figma社区复制文件: https://www.figma.com/community/file/1351924642365998144/3-prompts-for-creating-flowcharts-with-figjam-ai
[9] 你可以在Figma中查看流程: https://www.figma.com/file/FCUqaNHP0xgDlsW4ZQoalb/AI-flowchart-generator%3A-A-Step-by-Step-Guide-to-Creating-Your-First-AI-Flowchart-with-Figjam-AI?type=whiteboard&node-id=1%3A96&t=KtWc8T4asdmqu1fk-1
[10] 使用 Whimsical ChatGPT 插件创建用户流程: https://uxplanet.org
[11] uxdesign.cc: https://uxdesign.cc
[12] 从这里开始设计更好: #