虽然我不得不这么说，Figma中设计和原型也有一些局限。

设计师知道最终产品应该是什么样子，但开发人员可能需要猜测设计中未注意到的小细节（比如微交互应该持续多少毫秒的时间）。当我们用参与者测试设计时，会发现Figma原型可能无法完全代表一个真实的网站，因为并非所有交互都被完全实现，或者只是有些问题。

低代码和无代码工具在这里就能大显身手。

这些工具让UX设计师能够与他们工作的设计进行真实、实时的互动，从而实现快速迭代，并从利益相关者和用户处获取反馈（无需开发人员的支持）。

有好几个工具具有这种功能，比如 Lovable 以及 Anima，特别是 Anima 的新 Playground 功能，真的开始改变了游戏。对于 UX 设计师来说，这使得设计和迭代代码变得更加自然流畅。

Anima的游乐场特色使用AI助手来实时调整设计

Anima 已经成为 Figma 设计工作流程中的重要组成部分——它拥有超过一百万 Figma 插件用户，甚至帮助 Figma 创建了著名的“开发者模式”。而新推出的 Playground 功能则利用 AI 助手来实现无需在 Figma 文件中做任何更新，就可修改设计和代码。

让我们看看这个新功能，看看设计师如何利用AI助手来提升设计效果，同时保持创意掌控（避免被替代的感觉）。

1. 准备 Figma 设计文件
2. 在 Figma 中启动 Anima 插件
3. 在 Anima Playground 中打开并编辑
4. 导出代码文件
5. 替代方法：使用 AI 进行自定义

在你可以运行 Anima 插件之前，你的 Figma 设计应该已经达到了你满意的细节程度，以便生成用于实时预览的代码之前。即使它还没有完全准备好，，Playground 功能也可以帮助你达到这个目标（就像我们很快会看到的那样）。

这里有几点简单的最佳实践来帮助你为 Figma 工作做好准备，以便在 Anima 中使用：

• 命名 Figma 图层：这有助于在转换成代码时保持整洁和清晰。
• 创建画板：画板可以帮助 Anima 组织和理解元素之间的关系，但不要过度使用，过多嵌套的画板会使代码变得复杂。
• 添加自动布局：创建画板后，为画板添加自动布局，这样 Anima 就知道元素应该如何定位，以及画板如何响应屏幕尺寸的变化。
• 使用组件：Anima 可以识别设计中的重复组件，Playground 功能可以让你通过一个指令更改所有组件（我使用了 IBM Carbon 设计系统 进行设计，但你也可以使用自定义的设计系统）

为 Anima 准备 Figma 设计，可以通过命名和整理图层来完成。

在您的设计准备好之后，就可以运行Figma 的 Anima 插件了。首先，在 Figma 中打开 Anima，选择你要生成代码的画框，在这个步骤里，选择你项目的 JavaScript 框架。

提示：我在使用 Anima 的“Pro”套餐，所以如果你用的套餐不一样，插件界面可能看起来会有点不同。

操作步骤：

• 按 ⌘+K 或在 Figma 的底部工具栏中选择“动作”（如果使用 UI3）来打开 Figma 插件。
• 找到并选择“Anima”，然后点击“运行”。
• 选择主要帧（从“组件代码查看”视图中），Anima 将自动开始生成代码了。

在 Figma 中选择一个画板，然后开始用 Anima 生成代码。

• 生成代码后，选择位于右侧、包含 JavaScript 框架的下拉菜单
• 选择“React”、“Vue”或“HTML”（这会决定你的选择选项；我选择了“React”这个选项）
• 选择一个 UI 库（我选择了 Shadcn）→ 选择“JavaScript”或“TypeScript”（我选择了“TypeScript”）
• 选择“是”或“否”，以决定 Anima 是否需要为你的设计生成主题（我选择了“是”这个选项）
• 我的选择默认样式为“Tailwind CSS”（选择的选项会根据之前的选项有所不同）

挑选最适合您UX项目需求的UI库和JavaScript框架。

好了，现在Figma的设计已经准备好，并且可以在Anima中打开了，是时候在Anima Playground中打开设计了。

提示：Playground 在所有 Anima 计划中都可用（即使是免费计划，但会有一些使用限制）。

步骤如下：

• 选择 Anima 插件中的主屏幕后，选择“在 Playground 中打开”（如果此按钮被禁用，则代码仍在生成中）
• Anima 在您的默认浏览器中打开；左侧面板会出现一个新的“聊天”，主视图会显示代码和预览
• 在右下角，选择聊天功能里的 Figma 图标 → 在弹出的窗口中选择“配对 Figma”（这是可选的，但会在 Anima 中添加一个额外的标签页，以便直接比较 Figma 设计和预览）

注意：每次你在 Figma 中选择“在 Playground 中打开”选项时，Anima 会新建一个文件及其对应的聊天——可以通过点击左上角的面板图标进行访问。

将 Anima 和 Figma 结合起来使用，直接比较实时预览效果和 Figma 设计。

当 Anima 中的预览准备就绪时，你就可以开始在左侧的 AI 聊天窗口中进行代码和设计修改。你可以让 AI 助手帮忙“让标签项功能正常”或甚至“将标题颜色设置为 HEX 值 #EBF2FF。”

我最初生成的预览中，Anima 根据我的 Figma 设计生成了一些互动元素，但并非所有元素都可以互动（比如头部标签这类）。所以我请 AI 助手帮忙调整一下。

预览：由我的Figma设计生成的Anima Playground预览

• 我问AI助手：“让头部元素和文档元素具备互动性。”AI助手立即开始更新代码。
• AI助手回答：“我会让头部元素和文档元素具备互动性，同时保留所有现有的样式和功能。”
• 然后我问AI助手：“让头部元素和文档元素悬停时具有深灰边框。”
• AI助手回答：“我会将悬停状态更新为使用深灰边框，适用于头部元素和文档元素。

在 Anima 的 Playground 中，让 AI 助手提供实时设计调整。

提示：如果您不喜欢这些改动，可以点击AI聊天中的撤销按钮回到之前版本（但这会删除当前版本）。

最后，你可以检查设计在平板和手机视图中是否按预期显示。

如果他们不响应，AI 助手可以设置断点——只需告诉它“为平板电脑和手机屏幕设计响应式布局”。如果你在 Figma 中添加了框架和自动布局，这在 Playground 功能中应该可以实现。

步骤如下：

• 在 Anima Playground 的预览部分，选择右侧预览上方的“切换到设备模式”
• 为了查看响应性，选择“全屏”进入全屏视图以调整屏幕宽度
• 如有需要调整断点，可以向 AI 助手求助即可

在 Anima Playground 中开启响应式模式，确保设计在不同屏幕尺寸下都能正常工作。

当你觉得 Anima 里的设计预览不错时，就可以导出和分享代码了。

Anim 为你提供了三种方法：

• 直接推送到 GitHub 功能：Anima 提供了通过设置连接你的 GitHub 的选项，或者你可以在 Playground 项目右上角选择“推送到 GitHub”来指定仓库名称的名称
• 下载代码按钮：在“推送到 GitHub”按钮旁边是“下载代码”按钮，允许你下载一个 zip 文件并在其他地方运行以继续使用
• 与协作伙伴分享项目：根据你的 Anima 订阅计划，你可以通过在 Anima 应用内添加协作者或查看者来与队友分享项目

将你的 GitHub 仓库与 Anima 平台集成

如果你更愿意直接从 Figma 下载设计的代码并进行定制，你可以使用 Anima 的 “AI 定制” 功能。

请注意，这并不是必须使用 Anima Playground，这只是另一种自定义设计代码的选项，但可以直接在 Figma 中进行。

在Anima的Figma插件右下角，有一个紫色按钮，上面标有“添加提示”，旁边带有一个闪烁的图标。点击该按钮后，你可以打开“使用AI自定义”功能，来使用自定义请求或预设。

“AI自定义”功能在Anima插件中的Figma插件中

这些预设让你选择设计如何响应和互动（例如启用“使其有效”），从而获得设计的功能预览。你还可以添加代码示例和自定义指令（例如，指定你希望按钮具有什么互动）。

“AI自定义”功能允许你利用AI来修改和迭代代码，您可以直接从Figma下载代码并在其他地方运行它。

使用“AI自定义”中的预设选项快速设置代码规范

Anima 新的 Playground 功能展示了使用 AI 设计的潜在未来。我可以使用 AI 助手实时修改代码（甚至可以同时进行多处修改），如果我想尝试新的颜色或交互模式——所有这些都不需要向开发人员求助。

在使用此功能时，我并没有感觉到我的设计师角色被AI助手取代了，反而更像是与AI助手一起工作的伙伴。

不仅如此，它还会在需要时主动提供帮助，例如在遇到终端错误时。作为设计师，我对如何解决这种错误信息一无所知（这让我有点害怕），但AI助手给出了一个“尝试修复”的建议，我立刻选择了这个选项。

阿尼玛的AI助手会在代码有问题时提示修复代码

Anima推出的Playground功能，为我们提供了一种新的方式来改变我们的设计工作流程，让其更好地融入AI。这些变化将加速设计探索、利益相关方的反馈以及测试周期，这将有助于产品开发和用户体验的提升。