Topics

【让我们用 FigmaMake 来制作和使用它:第二部分】使用 FigmaMake 和 Gemini 耗时超过 3 小时!从着陆页的草稿到最终的网页设计,帮助忙碌的 CEO 推进他“已编辑”的工作。

  • column

这篇文章写于去年,当时我们正在搭建落地页。虽然最初是那时写的,但人工智能发展如此迅速,现在发布已经过时了……人工智能的发展速度令人惊叹。考虑到到2026年它还会加速发展,设计师们必须不断更新工作方式和信息,否则就会被时代抛弃……这真是太不可思议了。FigmaMake和Gemini3现在的功能远不止于此。我希望你能快速浏览这篇文章,把它当作一位充分利用人工智能但又被其发展速度所震撼的设计师的日记。我还会添加一些补充文字(也就是评论),所以请把它当作辅助音频解说来欣赏。

你好!

我叫 Hasshi,在 Liberogic有限公司 担任 UI 设计师。

我在之前的文章中热情洋溢地报道说,我仅用了三个小时就使用 FigmaMake 和 Gemini 创建了一个着陆页的粗略草稿。

这是前期工作的成果。

请点击此处查看前一篇文章。

[动手制作并使用 FigmaMake:第一部分] 3 小时即可学会 FigmaMake 和 Gemini!新一代网页制作流程,用于创建粗略的落地页,为忙碌的 CEO 加速“红墨水”流程

https://www.liberogic.jp/topics/20250723-figmamake/

本文是该系列文章的后半部分。

向总统汇报后,我感觉很好。

有了它,我们甚至可以在创纪录的时间内回应总统提出的不合理要求!

3个小时就能达到这样的质量,还有什么可抱怨的呢!

我也曾有过这样的想法,哈哈。

这一次,我满怀热情地把它呈给了总统。

《地狱的修订》我们将交付⭐️・:*+.\(( °ω° ))/.:+✨

总结,

总统发表那番言论后,我用 FigmaMake 精心制作的精美版面设计竟然消失得无影无踪。

我认为即使人工智能已经发展到今天,这种情况仍会继续发生。

经验教训:FigmaMake 非常适合创建仪表盘和线框图,但可能还不适合创建情感化的落地页。

人工智能近来发展迅猛,如今已能应用于多种领域,真是令人惊叹!

总统的演讲: “让一切看起来完美”的障碍

上次我向CEO展示了我设计的SaaS风格落地页方案,当时我信心满满,因为方案做得相当不错。

会长!我用人工智能在极短时间内生成了那份LP的草稿!您觉得结构怎么样?

哇,真快。(看着屏幕)……嗯,不过有点难。

这样会不会太死板?(不会,这是个需要信任的B2B服务,所以保持这种条理性和规范性是好事……)

难道不能让它更精彩一些,或者更有冲击力、更鲜明一些吗?另外,加些动态效果和装饰,让它看起来“漂亮”一些?

找到了。“让它看起来好看。”

这是所有设计师最害怕的一条指令,也是人工智能最难理解的一条指令。

我经常听到这样的评价:“看起来不错”或者“感觉很仓促”。理解这些话背后的深层含义很重要。如今,设计师的沟通能力也备受考验。我本人沟通能力较差,缺乏自信,所以这对我来说很困难,每天都像是在进行沟通训练……(如果沟通能力对设计师来说真的那么重要,我早就应该从小就好好培养他们了……唉。)

在与客户合作时,我们会深入了解对方的心理和需求,但总裁非常忙,没有太多时间倾听他们的意见。

由于总裁与员工之间的关系,管理可能会变得有些松懈,提出的要求也可能使用一些随意的词语。

然后我们进入共同努力消化和重新诠释这位繁忙总统讲话的阶段。

这只是个借口。这只是我找的借口。

内心独白(你说的“看起来不错”是什么意思?连双子座老师都看不懂!能不能别再只用“砰”、“嗖”之类的拟声词来给出修改意见了?)

这种感觉至今仍未改变。

FigmaMake VS CEO 的残酷评论

真正的战斗由此开始。

为了体现总统心中“美好的感觉”,我们对在 FigmaMake 中创建的基础模型进行了修正……

这就涉及到工具兼容性问题了。

FigmaMake 仅生成“逻辑正确的网页布局”使用自动布局创建了一个漂亮的盒子布局。

这是人工智能发展的另一个惊人之处。现在,如果你用同样的提示生成一段文本,准确率相当高。你真的能感受到人工智能的进步(见下图)。

它美观、有教育意义,而且作为模板主题易于使用。

然而,总统的要求

“我们来给背景增添一些纹理吧!” “我们来让元素延伸到边界之外。” “要不加些斜缝?”

例如,超越逻辑的情感装饰仅有的。

每次我尝试将装饰图像强行插入 FigmaMake 生成的数据中时,自动布局就会开始发出警报,整个布局都会崩溃。

内心独白 (糟了!我添加背景图的时候,下面的部分也移位了!FigmaMake,这不是你的错,你说得对。但我还是没能完全满足CEO的要求……!)

不得不亲手重现它的那种空虚感

“把这里的边距调小一点!” “把纽扣调得更晃动一些!”

一个接一个地进来恶魔评论(红色)为了解决这个问题,我不情愿地禁用了 FigmaMake 创建的自动布局,拆解了生成的组件,并手动重新排列了它们。

几个小时后,屏幕上只剩下……设计数据完全不同,甚至与 FigmaMake 都不相符。

这是经过多次修改后的第一稿。设计与第一稿完全不同。

此外,虽然所有现有元素都已自动布局,但从 FigmaMake 复制到 Figma 时,由于某些原因,某些部分的自动布局会被取消,这意味着您必须再次执行自动布局。

我意识到修复这个问题需要花费大量时间。

内心独白 (咦?难道一开始就用 Photoshop 或 Figma 手动绘制不是更快吗……?我怎么只用了三个小时就完成了……?)

那天晚上,我在办公室深夜意识到这一点时,感到一阵空虚。这时,我的资深同事给了我一罐能量饮料。

上司:“我下班了,要回家了!”

那个学长匆匆跑开了。他不会帮我的……

结论:FigmaMake 的优势和劣势

经历了这一连串的修复工作后,我了解了 FigmaMake 这个工具的特点。

如果用错地方,实际上会增加改正所需的工作量。

✅ FigmaMake 的优点在于(=它完成速度超快)

  • 管理界面、仪表盘界面、应用界面等。
    • 简洁的网格布局、表单、表格等都能达到最佳效果。
    • 它能立即创建一个逻辑结构,因此您可以创建出质量非常高的东西,您会认为它可以直接用于 SaaS 管理屏幕(当然,还需要进行一些调整)。
  • 初始线框图和结构方案
    • 如果您处于“检查是否有任何缺失或不必要的元素”的阶段,LP 可以很好地使用(在设计完全开发之前)。
    • 它还非常实用,因为它允许你在最终确定需求时创建各种模式。
    • 它对于口头表达客户的要求、当场赋予其形式以及微调图像都非常有用。

❌ FigmaMake 的不足之处(= 需要手动操作)

  • 为着陆页创建视觉效果
    • 我仍然不擅长设计出带有“装饰”和“装饰元素”的吸引人的作品。
    • 生成的界面简洁易用。您可以添加渐变和图案等装饰,但如果不提供清晰的说明,最终效果可能看起来像是上世纪10年代的风格。
    • 设计过程中,提高提示信息的准确性需要时间。
  • “感觉良好”这种模糊微妙感受的体现
    • 这仍然需要人类设计师的翻译技能。
    • 如果我更频繁地使用提示,我想我就能更流畅地创建它们,并提供更精确的说明(我现在还做不到这一点)。

总结:尽管如此,这仍然是一个很好的起点。

所以,由于“根据总裁模糊的指示进行LP生产”,直接使用FigmaMake生成的数据非常困难。是。

然而,正如我在之前的文章中写到的,它确实非常有用,因为它“让我能在三个小时内从一张白纸变成一个粗略的提纲,并让总统同意我的想法”。以前,这会花费大量时间,而且要让工作取得进展也需要很长时间。

还有人要求一些“明亮清爽”的东西。观点的出现,仅仅是因为存在一个起点。这就是(积极思考)的全部内容。

这次我学到了什么

  • FigmaMake 是创建“结构”方面的专家。
  • 装饰设计是考验设计师技能的地方。
  • 目前还没有任何人工智能能够对总统的“良好感觉”做出反应。

下次我打算再试试 FigmaMake,这次我打算重新设计一下我们内部管理工具的界面。(如果是管理员界面……我相信它一定会很棒!)

关于LP设计变更……

是的,我会继续努力手工完成这项工作!

说到人工智能的发展……这是使用与创建第一篇文章时相同的提示生成的设计。

短短几个月内,第一代产品的质量就突飞猛进,这着实令人惊讶。

准确率的爆炸式增长着实令人担忧。如今,我恨不得每天都学习设计,才能跟上人工智能的快速发展。

这是最终完成的网站。

该LP本身符合WCAG2.2AA标准。我确实这么做了。
Lighthouse 的得分也很高(虽然需要花点时间,但一定要试试!有时候你会得到满分!)
而且,令人费解的是,多语言支持
如需多语言支持,请参阅这篇文章。请也看看这个!
如今浏览器翻译已成为常态,但如果无需切换浏览器就能低成本地使用翻译网站,那就太方便了!

你怎么认为?
你不觉得结果相当不错吗?🎵

我写了很多不同的东西,但我觉得事先有个草稿确实帮我减少了工作量! 以前,我会在草稿阶段花很多时间,然后还得把它放到设计里修改内容,现在这样省了我不少事。 下次用AI的时候,我一定会先生成一些好的提示。 我还奖励自己喝了杯啤酒。

撰稿人

UI设计每天都在更新!我还在思考如何将无障碍设计融入LP设计中。最近我没怎么接触Marker,一直在想:“我应该也提升一下我的JS水平吗?” 我很喜欢北村拓海!

Hasshi

网页设计师 / 2018年加入 / Kokoro 仍是一位崭露头角的设计师

查看这位员工的文章

我们以可靠的团队结构和快速的响应能力而自豪。

在 Liberogic,我们经验丰富的员工积极推动项目进展,这也是我们受到客户高度评价的原因。
我们确保项目经理和主管得到合理分配,以确保整个项目的顺利进行。 我们避免因全额承诺而导致不必要的成本增加,并将资源分配给合适的人员和合适的岗位,并以快速掌握工作内容、创建和提交预算而闻名。

请注意,我们不积极参与SES式的现场工作。

我们支持几乎所有主流的项目管理和聊天工具,包括 Slack、Teams、Redmine、Backlog、Asana、Jira、Notion、Google Workspace、Zoom 和 Webex。

案例研究