【Figma Make 入门指南：上半部分】利用 Figma Make 和 Gemini 在 3 小时内打造！快速生成着陆页初稿，让繁忙的董事长的"修改工作"事半功倍的全新一代网页制作流程

你好！我是 Liberogic 公司的 UI 设计师，哈西。

我最近的烦恼是，无障碍服务的新LP（着陆页）制作进展不顺利。

公司网站的构成负责人——我们的社长——虽然幸运地因为其他项目而超级忙碌，但照这样下去的话，事情就没办法推进了…。

好吧，为了让董事长的审核工作轻松一些，我们先自己做个初稿出来吧！

基于这样的想法，我们开始了一项工作——使用AI（Gemini）和设计自动化工具（FigmaMake）进行快速LP制作。这一次，我将以设计师的角度，为你分享整个流程和我真实的想法。

本次目标：通过初稿引出公司领导的意见反馈！

完美的东西从一开始就是不可能的，反正！嗯！首先重要的是作为首席执行官要抛出容易被吐槽的内容，肯定是这样的！

超高速LP制作的完整步骤（熟能生巧会更快！）

这次尝试的制作流程实际时间分配大概是这样的。耗时最长的部分是提升设计精度的「反复迭代」环节。

1. 【分析】 Gemini老师，这个LP怎么样？ （15分钟）
2. 【文案生成】 让Gemini生成包含改进内容的LP文案 （15分钟）
3. 【提示词创建】 让Gemini为FigmaMake生成「魔法咒语」 （5分钟）
4. 【设计生成】 FigmaMake，先试试一键生成！ （5分钟）
5. 【反复迭代循环】 通过分析和生成的往复来提升精度 （1小时30分钟）
6. 【Figma化】 用Html to Design插件将其导入Figma （5分钟）
7. 【Figma修正】 最终调整版面错位等问题 （30分钟）

那么，让我们详细看看每个步骤吧！

第1步：【分析】Gemini先生，这个LP怎么样？（15分钟）

首先，我们让Gemini阅读本公司现有的无障碍访问页面，获取直率的反馈意见。

【Gemini 提示词示例】

请分析以下URL网址的网页无障碍访问相关LP，并列出优点和改进点。（后略）

几秒后，分析结果就出来了。"『没有成功案例或客户评价，难以想象服务上线后的具体优势』……哎哟，这说得太到位了，一下子戳中要害……！但这种话我自己根本说不出来，感谢你，Gemini！" 它将我模糊意识到的问题准确地用语言表达了出来。

好的，先从了解现状开始。这个页面是我做的，但是……总之，我自己注意不到的问题，就让 Gemini 老师直接指出来吧！

第2步：【文本生成】让Gemini生成包含改进建议的LP文本 (15分钟)

复制粘贴 STEP1 的分析结果，然后请求生成包含改进方案的文本。

【Gemini 提示词示例】

请根据刚才的分析结果，创建网页可访问性登陆页面的文本结构方案。（中略）对于新增加的元素，请明确标记为【示例文本】。

"【客户评价样本】××公司：通过网站的咨询增加了1.5倍！"这样的具体文案一出现，一下子就有了LP的感觉。仅仅这样就会觉得自己完成了工作呢。

好的，我把刚才收到的修改清单直接交给 Gemini，让它变成一篇好文章。这就是 AI 的有效利用！……哎，为了等会儿别搞混，要让它加上「【示例文本】」这样的标记。我反应太快了……

第 3 步：【提示词创建】让 Gemini 生成要交给 FigmaMake 的「魔法咒语」(5 分钟)

将第 2 步制作的文本结构方案和想要设计的图像传达给 Gemini，让它为 FigmaMake 生成英文提示词。

文本完成后，终于要开始设计了！最有趣的部分！……不过，在那之前，得先给 FigmaMake 大人准备「请求函（提示词）」。我的蹩脚英文没法好好表达，所以这里就交给 Gemini 老师了。拜托了！

第 4 步：【设计生成】FigmaMake，接下来就靠你了！(5 分钟)

现在，复制粘贴魔法咒语，按下回车！……就是这样。会不会一下子就出现神级设计呢？……可能不会。不过，也可能会？这种期待感有点像抽奖，还挺有趣的。

复制生成的提示词，点击设计生成按钮。这几秒的等待时间，出乎意料地让人紧张。然后看到生成的第一版设计。

哇，完成了！！不过看起来还是太简洁了……。我继续进行设计方面的调整和文案修改。

不过，还是说，真正的工作是从这里开始的。

第 5 步：【循环迭代】通过分析和生成的往复来提高精度 (1 小时半)

从这里开始，就进入了与 AI 的头脑风暴时间。在查看 Figma Make 生成的设计的同时，向 Gemini 咨询"我想更这样做"之类的想法，然后逐步改进提示词，这是一项踏实的工作。

"啊，不是那边！"不禁大声说出来了。也许整个办公室都听到了。可是，这样的来回交互越来越有趣了，真是奇妙。

是的，果然不能一次就通过啊！我早就知道了！但还是抱了一点希望！现在才是真正的开始，和 AI 携手同行。我像导演一样，Gemini 像教练的感觉？

而最终的输出如下

设计从最初的草图开始已经整洁了不少。不过...删除或添加不需要的部分还是很麻烦（可能是因为我在用日语转英语进行指示，所以很多时候意图没有被很好地传达...）。

我觉得在 FigmaMake 上可能无法继续进行更多操作，所以我决定先将其转换为 Figma 数据，然后进行修正，这样虽然有点笨拙，但也是一种解决方案。

第 6 步：【Figma 化】通过 Html to Design 插件导入到 Figma（5 分钟）

当设计方向基本确定后，我们就可以将数据导入到 Figma 中了。以下是具体步骤。

1. 用 FigmaMake 生成的设计首先作为网页发布。
2. 启动 Figma 插件"Html to Design"。
3. 输入已发布的 Figma Make URL，然后执行导入！

使用的是插件"Html to Design"。复制粘贴在 FigmaMake 上发布的页面 URL，点击按钮。就这样，网页就会被转换成 Figma 的图层，现在真是便利的时代啊…。

FigmaMake 的公开发布

首先发布 Figma Make。点击发布后，状态将切换为已发布。

输入 FigmaMake 的 URL（FigmaMake 已启动并发布了名为"Html to Design"的 Figma 插件），然后执行导入！

启动插件，粘贴刚才获取的 URL。然后点击导入按钮就完成了！

几分钟后，输出的设计会显示在 Figma 上。

最后将其设置为私密状态

一系列作业完成后，取消发布以返回未发布状态。

关键问题

目前，公开状态还不能添加密码保护或创建开发环境等功能，因此在进行企业网站改版等工作时，需要注意信息泄露等风险。

基本上，如果仅限于使用自有内容创建或使用虚拟信息作为原型，就不会产生影响，因此建议根据项目需求灵活选择（对于禁止外包的项目，绝对不要使用）。

好的，现在看起来相当不错了！接下来就是我的主场，是时候用 Figma 大显身手了！久等了，伙伴！

第 7 步：【Figma 修正】最终调整布局错位等问题（30 分钟）

刚导入的数据还很粗糙。有莫名其妙的分组、文本框超出边界等问题层出不穷。

接下来就是循序渐进地进行修修补补的工作。重新应用自动布局、将散乱的元素转化为组件、调整整体的间距…… 这些细微之处往往能大幅提升设计质量，让它成为一份「真正像样的原型」。

完成品如下

向下滚动 LP 时，设计的精细度会下降，这究竟是 AI 的局限，还是我的指令有问题呢…… 我打算继续尝试和摸索各种方法。

导入。…嗯，布局比想象中更加活泼，有点乱呢！不过这是 AI 努力的结果，所以没办法。接下来就靠我来整理得干干净净，这就是我发挥的时候了。

总结：通过实践所领悟的「AI 协作设计」的诀窍

在这次制作流程中，我深刻体会到AI不是"魔法棒"，而是"优秀的搭档"。

• 草稿创建的时间节约效果显著：比起从零开始反复推敲方案，效率快得多。
• 反复迭代是关键：要创造出色的设计，需要反复与AI对话的耐心。
• 最后由人工完成：不要盲目接受 AI 生成的内容，设计师需要带着明确的意图进行最终打磨，这决定了作品的质量。

顺便说一下，我战战兢兢地把这个初稿给CEO看后… "哦，很有意思！有了这个的话讨论就容易推进了！有初稿和没初稿完全不一样，谢谢你！" 他是这么说的。

太好了！我的努力没有白费…！今晚啤酒喝起来特别香！

本次就到这里！实际进行LP设计的部分将在社长进行审核修改后，完成设计并作为【后半】公开发布！

您也不妨尝试一下通过与AI协作进行新的设计制作吗？