文章详情

尽管我讨厌这么说，但在无花果中创建的设计和原型存在局限性。

设计师知道最终产品的外观，但是开发人员可能不得不猜测设计错过的小小的细微差别（例如，微型互动应该是多少毫秒）。或者，当我们与参与者测试设计时，无花果原型可能并不能完全代表现场网站，因为并非所有互动都是原型的（或者只是错误的）。

那是低代码和无代码工具发挥作用的地方。

这些工具使UX设计师有能力与现实的实时预览进行工作设计，因此他们可以快速迭代并获得利益相关者和用户的反馈（所有这些都不使用开发人员资源）。

有很多具有此功能的工具，例如Lodable和Anima，但是Anima确实开始改变UX设计师如何使用其新的操场功能在编码设计上进行编码的游戏。

Anima已经是Figma的设计工作流程中的主食 – 他们拥有超过100万个Figma插件用户，甚至帮助Figma创建了臭名昭著的开发模式。但是，新的游乐场功能使用AI辅助器来进行设计和代码更改，而无需在FIGMA文件中进行一次更新。

让我们检查一下这一新功能，以及设计人员如何使用AI辅助手势来为设计和增强设计，而不会失去创造性的控制（或感到被替换）。

在运行Anima插件之前，您的无花果设计应达到一个细节和忠诚度，然后在生成实时预览的代码之前。但是，即使没有100％准备就绪，操场功能也可以帮助它到达那里（正如我们将很快看到的那样）。

以下是一些快速的最佳实践，可以为Anima做好准备工作：

在设计准备并准备好后，是时候运行Figma的Anima插件了。在此步骤中，您需要在无花果上打开Anima，指定要生成代码的框架，然后选择项目的JavaScript框架。

注意：我在Anima中使用了一个“ Pro”计划，因此，如果您有不同的计划，我的插件界面可能与您的界面略有不同。

如何步骤：

好吧，现在在Anima中准备了Figma设计并设置了，现在该在Anima Playground开设设计了。

注意：操场功能都可以在所有Anima计划（甚至是免费计划，但有限制）上获得。

如何步骤：

注意：每次您在无花果上选择“在操场上打开”时，在Anima中进行了一个新文件和聊天 – 可通过左上角的面板图标按钮访问

一旦预览准备在Anima中，您就可以开始在左面板的AI聊天中进行代码和设计更改。您可以要求AI-Assiatnt“使Tab项目起作用”，甚至可以“将标题颜色更改为Hex值＃EBF2FF”。

我的无花果设计产生的初始预览anima包含一些交互，但并非所有元素都互动（例如“标头”选项卡）。因此，我要求Ai-Assistant进行更改。

注意：如果您不喜欢更改，则可以使用AI-Chat中的撤消按钮还原为先前版本（但这将删除当前版本）。

最后，您可以检查以确保使用平板电脑和移动视图的预期响应这些设计。

如果他们没有响应迅速，则可以为您提供断点 – 只需要求“对平板电脑和移动屏幕进行响应的响应”即可。如果您在无花果中添加了框架和自动路线，则对于操场功能应该可用。

如何步骤：

一旦您对Anima的设计预览感到满意，就该出口和共享代码了。

Anima为您提供了三种方法：

如果您希望直接从FIGMA量身定制和下载设计代码，则可以使用Anima的“自定义AI”功能。

注意：这不是用于Anima Playground的强制性，这只是自定义设计代码的另一种选择，而直接在无花果中。

在Anima Figma插件的右下角，有一个紫色按钮，上面写着“添加提示”。选择此按钮后，您可以将选项在“使用AI自定义”上切换以使用自定义请求或预设。

预设允许您选择希望设计的响应和交互方式（例如启用“使其工作”），以便您具有设计的功能性预览。您还可以添加代码示例和自定义说明（即，指定想要一个按钮的交互）。

“使用AI自定义”功能使您可以使用AI更改和迭代代码，因此您可以直接从Figma下载并运行其他地方。

Anima的新操场功能向我们展示了与AI设计的潜在未来。如果我想探索一种新的颜色或互动模式，我可以使用AI辅助物对代码进行实时更新（甚至同时进行多个更改），而无需向开发人员寻求帮助。

在使用此功能的同时，我并没有觉得自己作为设计师的角色被AI-Assedant取代了 – 感觉更像是我的合作伙伴。

不仅如此，它在需要时提供了主动的帮助，例如终端错误。作为设计师，我不知道如何解决此类错误消息（我很害怕），但是Ai-Assedant给了我提示“尝试修复”的提示，我毫不犹豫地选择了提示。

Anima的Playground功能的发布为我们提供了一种更改设计工作流程以合并AI的新方法。这些工作流程的变化将加速设计探索，利益相关者的反馈和测试周期 – 使产品开发和整体用户体验受益。