欧易数字货币交易所 更快、更好、更强

当前位置:首页资讯详情

无花果到功能:Anima的操场上的AI驱动迭代

2025-03-14
148
一种可以增强设计的AI助剂,而无需夺走您的创造力控制

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

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

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

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

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

Anima的游乐场功能使用AI辅助来进行现场设计更改

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

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

准备无花果设计 在Figma中运行Anima插件 在Anima游乐场开放和迭代 导出代码 替代方法:使用AI自定义

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

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

命名您的无花果层:Anima保留了图层名称,因此一旦您移动到代码,这有助于保持整洁和清洁 创建框架:框架可帮助Anima组织和理解元素之间的关系,但不要过度使用(太多嵌套帧会使代码复杂化) 添加自动路线:创建帧后,将自动划分添加到帧中,以便Anima知道应限制哪些位置元素以及当屏幕尺寸更改时帧应响应 使用组件:Anima在设计中检测到重复使用的组件,并且操场功能可以从一个提示中更改所有组件(我为我的设计使用了碳设计系统,但您也可以使用自定义设计系统) 通过命名和框架层为Anima的准备无花果设计

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

如何步骤:

按⌘+k或从FIGMA(如果使用UI3)中的底部工具栏中选择“动作”以打开FIGMA插件 搜索并选择“ Anima”→选择“运行” 选择主要帧(在“组件代码检查”视图中,然后Anima将自动开始生成代码 在无花果中选择Anima开始生成代码的框架 生成代码后,选择包含JavaScript Frameworks的下拉列表(在选择的FIGMA框架名称的右侧) 选择“反应”,“ Vue”或“ HTML”(这确定您的选择选项;我为我的设计选择了“ React”) 选择一个UI库(我选择ShadCn)→选择“ JavaScript”或“ Typescript”(我选择“打字稿”) 如果Anima需要为您的设计生成主题,请选择“是”或“否”(我选择了“是”) 我选择的默认样式是“ tailwind CSS”(选择选项不同,具体取决于您以前的选择) 选择最适合您的UX项目的UI库和JavaScript框架

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

如何步骤:

在Anima插件中选择的主要屏幕后,选择“在操场上打开”(如果禁用此按钮,则代码仍在主动生成) Anima在您的默认浏览器中打开;左面板中出现了一个新的“聊天”,而主视图中的代码和预览 在右下角的右角,在聊天功能中选择FIGMA图标→在出现的模态中选择“与Figma”(这是可选的) 将Anima与Figma配对,因此您可以将实时预览与无花果设计直接比较

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

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

最初的预览Anima Playground由我的无花果设计产生 我问了AI辅助者:“制作标题项目和文档项交互式”,聊天立即开始更新代码 AI辅助因子回答:“我将在保留所有现有样式和功能的同时,将标题项目和文档项目交互”” 然后我问AI助理:“使悬停状态成为标头项目和文档物品具有深灰色边界” AI助理的回答是:“我会更新悬停的国家,以便为标头和文档项目使用深灰色边框” 要求从Anima的操场上的Ai-Assistant进行实时设计更改

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

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

如何步骤:

在Anima Playground的预览部分中,选择“预览”右上方的“切换到设备模式” 要查看响应能力,请选择“全屏”以进行新的视图以积极调整屏幕的宽度 向AI辅助索取对断点的其他调整(如果需要) 在Anima Playground中使用响应模式,以确保设计适合不同的屏幕尺寸

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

Anima为您提供了三种方法:

直接推向GitHub:Anima为您提供了通过设置连接GitHub的选项,或者您可以在Playground在Playground的Promint右上角中选择“推到GitHub”以指定存储库名称 下载代码:“推入github”按钮旁边是“下载代码”按钮,它允许您下载zip文件以在其他地方运行 与合作者分享:根据您的Anima计划,您可以通过将其添加为贡献者或观众(在Anima应用程序中完成)来与队友分享该项目 将您的GitHub存储库集成到Anima Playground设置中

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

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

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

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

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

使用“自定义使用AI”中的预设快速配置代码规格

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

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

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

Anima的AI辅助人员将在发生时提示解决代码问题

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

免责声明:数字资产交易涉及重大风险,本资料不应作为投资决策依据,亦不应被解释为从事投资交易的建议。请确保充分了解所涉及的风险并谨慎投资。本站仅提供信息参考,不构成任何投资建议,用户一切投资行为与本站无关。