【製作並實踐 Figma Make：前半】用 Figma Make 和 Gemini 3小時！忙碌董事長的「批改」進度加快，用新一代Web製作流程高速製作 LP 的初稿

大家好！我是在 Liberogic株式會社從事 UI 設計師的 Hashy。

我最近的煩惱就是 Web 可用性服務的新 LP（著陸頁面）製作進展不順。

負責公司網站構成的董事長，幸好別的案子超級忙碌。但這樣下去根本無法前進…。

「好吧，為了讓董事長的審查輕鬆一點，我這邊就先把初稿做出來試試看！」

從這個突然的想法開始，我進行了使用 AI（Gemini）和設計自動化工具（Figma Make）的超高速 LP 製作。這次，我會從設計師的角度，毫無保留地向各位介紹全部步驟和我的真實心聲！

這次的目標：用初稿引出董事長的「批改」意見！

從一開始就期待完美的東西根本不可能啦！對！首先是投出一個讓董事長容易提意見的題目才最重要，應該是這樣啦！

超高速LP製作的完整步驟（熟練後會更快！）

這次嘗試的製作流程實際時間分配大概是這樣的。花費時間最多的是提高設計精度的「反覆」部分。

【分析】 Gemini老師，這個LP怎麼樣？ （15分鐘）
【文案生成】 請Gemini製作包含改善點的LP文案 （15分鐘）
【提示詞製作】 請Gemini創作投給FigmaMake的「魔法咒語」 （5分鐘）
【設計生成】 FigmaMake，先試試看一次！ （5分鐘）
【反覆循環】 透過分析和生成的往返來提升精度 （1小時30分鐘）
【Figma化】 用Html to Design外掛匯入到Figma （5分鐘）
【Figma修正】 調整版面配置錯誤等最終細節 （30分鐘）

那麼，讓我們詳細看一下各個步驟吧！

步驟 1：【分析】Gemini 先生，這個著陸頁面如何？(15 分)

首先，我將本公司現有的無障礙頁面提供給 Gemini 閱讀，獲得直言不諱的意見回饋。

【提供給 Gemini 的提示詞範例】
請分析以下 URL 網站的無障礙相關著陸頁面，並列出優點和需改善之處。（後略）

接著，幾秒後就收到分析結果。「『缺少導入案例和客戶心聲，服務導入後的具體好處難以想像』……哇，太準確了，直戳心頭……！但這是我自己說不出來的問題啊，謝謝 Gemini！」Gemini 將我隱隱約約感受到的課題精準地言語化了。

好吧，先從現狀把握開始。這個頁面是我做的，但……總之就是靠 Gemini 先生狠狠地指出我自己察覺不到的問題吧！

步驟 2：【文案生成】請 Gemini 生成包含改善點的著陸頁面文案 (15 分)

將步驟 1 的分析結果複製貼上，請求 Gemini 包含改善建議的文案製作。

【提供給 Gemini 的提示詞範例】
根據剛才的分析結果，請為無障礙著陸頁面製作文案結構提案。（中略）新增的要素請標註為【樣本文案】。

「【客戶心聲樣本】○○股份有限公司：網站經由的詢問增加 1.5 倍！」這類具體的文案一出現，著陸頁面就馬上有感覺了。光是這樣就覺得完成工作了呢。

好的，把剛才收到的修改意見清單直接交給 Gemini，讓它幫我改成優質文案。這就是 AI 的有效運用啊！…咦，為了之後不要搞混，得請它在前面加上『【範例文本】』的標記才行。我這人反應有點急…

步驟 3：【提示詞製作】請 Gemini 為 FigmaMake 唸出那句「魔法咒語」(5 分鐘)

根據步驟 2 製作的文本結構方案和想要的設計概念，請 Gemini 為 FigmaMake 生成英文提示詞。

文案完成後，終於要開始設計了！最開心的部分！…但在那之前，得先寫好給 FigmaMake 的『請求文（提示詞）』。我那蹩腳的英文肯定講不清楚，所以這裡就靠 Gemini 老師了。拜託你了！

步驟 4：【設計生成】FigmaMake，剩下的就拜託你了！(5 分鐘)

好，把那句魔法咒語複製貼上，按下回車鍵！…這樣啦。一次就出現神級設計，有可能嗎？…不太可能吧。不過也許會呢？這種期待的感覺，有點像抽卡一樣，還滿有趣的。

把生成的提示詞複製貼上，點擊設計生成按鈕。這短短幾秒鐘的等待，意外地讓人緊張。然後，第一個設計就出現了。

哦，完成了！！但還是有點簡樸呢…。我繼續進行設計面的調整和文字修改。

但是，嘛，果然從這裡開始才是真正的工作。

步驟 5：【重複迴圈】來回分析和生成以提高精度 (1 小時 30 分鐘)

從這裡開始進入 AI 腦力激盪時間。邊看著用 FigmaMake 生成的設計，邊向 Gemini 諮詢「我想要更這樣」的想法，然後逐步改進提示詞，這是一項扎實的工作。

「啊，不是那樣！」不知不覺間自言自語的聲音就變大了。大概整個辦公室都聽得到吧。不過奇妙的是，這樣的來回互動反而漸漸變得有趣起來。

是的，果然一次過關沒那麼容易！我早就知道了！但我還是有點期待。從這裡才是真正的開始，與 AI 並肩作戰。我就像導演，Gemini 像教練那樣？

最終的輸出結果如下

比起首次作圖已經整齊許多。只是…刪除或新增不必要的部分有點麻煩（可能是因為我用日語轉英語下指示，所以很多時候意圖沒有好好傳達…）。

覺得在 FigmaMake 上面已經無法做更多了，所以我採取了強行的方法：先轉換成 Figma 資料，然後再進行修正。

步驟 6：【轉換為 Figma】用 Html to Design 外掛匯入到 Figma（5 分鐘）

設計方向大致確定後，終於要把資料移到 Figma 了。以下是作業步驟。

先把用 FigmaMake 生成的設計作為網頁公開。
啟動 Figma 的「Html to Design」外掛。
輸入 Figma Make 公開的 URL，執行匯入！

使用外掛程式「Html to Design」。複製貼上 Figma Make 公開頁面的 URL，點一下按鈕。就這樣，網頁就會轉換成 Figma 的圖層，真的是方便的時代啊…。

Figma Make 的公開

首先公開 Figma Make。點擊公開後，狀態會切換為已公開。

啟動 Figma 外掛程式「Html to Design」，輸入公開的 Figma Make URL，執行匯入！

啟動外掛程式並貼上之前取得的 URL。然後點擊匯入按鈕就完成了！

過了幾分鐘後，輸出的設計就會顯示在 Figma 上。

最後將公開狀態改為非公開

一連串作業完成後，取消公開以恢復為非公開狀態。

注意事項

目前公開狀態沒有密碼保護或開發環境等功能，所以在進行企業網站改版時需要注意資訊洩露等風險。

基本上，如果只製作自家內容或使用虛擬資訊製作原型，就不會產生影響。因此建議根據不同的案件來靈活運用（對於不允許外包的案件，絕對不要使用）。

好的，進度相當不錯呢！接下來輪到我的主場 Figma 出手了！讓你久等了，夥伴！

第 7 步：【Figma 修正】最終調整版面配置等問題（30 分鐘）

匯入的資料仍然很粗糙。存在莫名其妙的分組、文字框超出邊界等問題，到處都是需要調整的地方。

從這裡開始進行單調的修正工作。重新套用自動佈局，將散亂的元素轉換為元件，調整整體的間距……。這一番功夫能大幅提升設計品質，將其變成一份「像樣的原型」。

完成的成果如下

在 LP 下方設計的細節程度下降，不知道是 AI 的限制還是我的指示有問題……。今後也會繼續嘗試各種方法。

開始匯入…… 嗯，版面配置的表現比想像中還要生動呢！不過那是 AI 盡力的結果。接下來我會好好整理，這就是我的用心之處。

總結：實際製作中領悟的「AI 協作設計」要訣

在這次制作流程中我深刻體會到，AI 不是「魔法棒」，而是「優秀的夥伴」。

製作初稿所省下的時間效果驚人：比起從零開始與構成案糾纏，效率高得多。
反覆試驗的循環是關鍵：要製作優秀的設計，需要耐心地與 AI 對話並反覆調整。
最後還是靠人力：不能盲目接受 AI 的成果，需要設計師帶著意圖進行最終修飾，這才是決定品質的關鍵。

順帶一提，我戰戰兢兢地把這份初稿拿給社長看… 「哦，很有趣耶！這樣的話談起來輕鬆多了！有叩き台就差很多，謝謝你！」社長這麼說。

太好了！辛苦沒有白費…！今晚的啤酒特別好喝！

這次就到這裡為止！實際轉換成 LP 的部分，在社長提出修改意見後，我們會完成設計並作為【後半】發佈！

各位也來試試看用 AI 協業的新型設計制作方法吧？