Topics

【實際運用 Figma Make:後篇】Figma Make 與 Gemini 花了 3 小時仍未完成!從忙碌社長的「紅字修改」所需的 LP 草稿,到完成網頁設計的歷程

  • column

本文是我去年建置 LP 時所撰寫的內容。雖然是當時的文章,但 AI 進步速度很快,如今公開時內容已經過時了……。看到 AI 進步的速度之快,真的很驚人。想到 2026 年還會進一步加速,設計師的工作方式與資訊掌握也必須跟上腳步,否則恐怕會被甩在後面……。真是令人驚嘆。現在的 Figma Make 與 Gemini 3 能做到的事情已經更多了。這篇文章是一位設計師的日記,他一邊善用 AI,一邊被 AI 的進化弄得手忙腳亂,還請您輕鬆地隨意翻閱。另外,凡是新增補充的部分,都會以這種補充文字(也就是所謂的吐槽)呈現,請當作副音訊來享受。

您好!

我是 Liberogic Inc. 的 UI 設計師,hashi。

上一篇文章中,我曾興致勃勃地報告:「我用 Figma Make 與 Gemini 在 3 小時內做出了 LP 草稿!」

以下是上次的成果。

上一篇文章請參考這裡。

【實作與活用 Figma Make:上篇】結合 Figma Make 與 Gemini,3 小時完成!快速打造供忙碌社長進行「紅字修改」的 LP 初稿,新世代的網頁製作流程

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

本文是其後半部分。

向社長報告完後,我心情好得哼起歌來。

這樣的話,就算社長突然丟來無理的要求,我也能火速應對!

只花三小時就做到這個品質,應該沒話說吧!

……我也曾經這樣天真地以為呢 笑

這次要分享的,是我興致勃勃地把成果交給社長之後的經過。

為大家帶來「地獄般的修正篇」⭐️・:*+.\(( °ω° ))/.:+✨

先說結論,

我用FigmaMake做出的那個漂亮版面,因為社長的一句評語,就消失得無影無蹤。

我想就算AI已經進步到現在,這種事情依然會發生。

這次的教訓:FigmaMake非常適合用來製作「儀表板或線框圖」,但要做「充滿情感的LP」,或許還言之過早……

最近的AI進化速度很快,現在的AI也能以更多元的方式運用呢。真是讓人驚訝!

社長簡報:「做得有感覺一點就好」的牆

前陣子做的那份還算工整、SaaS風格的LP提案。我可是信心滿滿地拿給社長看。

社長!那份LP的初稿,我善用AI,火速做好了!架構大概是這樣,您覺得如何?」

喔,很快嘛。(邊看畫面)……嗯,不過感覺有點太生硬呢。」

生硬?(不,這是需要信賴感的B2B服務,整齊一點應該比較好…)

可以再多一點讓人期待的感覺嗎?像是砰!地衝擊感,俐落帥氣的那種。還有這裡,再加點動態效果,做得「很有感覺」一點吧。

果然來了。必殺技「做得有感覺一點」。

這是所有設計師最害怕、而AI最無法理解的指令排行榜第一名。

常常被要求「有感覺一點」或「有點土」。讀懂那些話背後的意思很重要呢。設計師現在連溝通能力也被考驗的時代來了。像我這樣不擅交際、又不會察言觀色的人,很多事都很困難,每天都在修行……。(如果設計師需要溝通能力,我小時候就該多練一練的……。唉。)

如果是客戶案件,接下來會進一步深入挖掘對方的深層想法與需求,但社長日理萬機,很難抽出時間進行訪談。

因為社長與員工的上下關係,溝通容易變得隨便,有時候只會得到含糊的關鍵字和委託內容。

接著進入大家一起重新咀嚼忙碌社長的台詞、再整理成型的階段。

這只是藉口吧。不過是我的藉口而已。真的。

內心的獨白(「感覺不錯」是什麼意思!?連Gemini老師都讀不出來吧!只用「咚」跟「唰」這種擬聲詞下修改指示,能不能拜託你停止啊!?)

這份心意至今仍未改變。

FigmaMake 對決 社長的犀利評語

真正的戰鬥從那時才開始。

為了將社長腦中的「感覺不錯」具體化,我們在FigmaMake做出的基礎上不斷進行修改……。

這時工具之間的相性開始露出獠牙。

FigmaMake 生成的內容,終究只是「邏輯上正確的網頁版面」。是以 Auto Layout(自動版面配置)緊密組合而成、整齊漂亮的盒狀結構。

這點正是 AI 進化驚人之處。現在用同樣的提示詞生成,品質已經好很多。真的能感受到 AI 的進步呢(下方附上參考圖片)。

作為參考學習的部分很美觀,作為模板主題也相當好用。

然而,社長的要求是

「背景也撒點紋理吧!!」 「讓元素超出框線!」 「試試看加上斜向的狹縫如何?」

諸如此類,無視邏輯、只顧情緒的裝飾層出不窮。

每次硬把裝飾圖片塞進 FigmaMake 生成的資料裡,Auto Layout 就哀嚎不已,整體版面也跟著七零八落。

內心的吶喊 (啊啊!一放進那張背景圖,下面的區塊都跑位了!FigmaMake 你沒有錯,你是對的。只是,我還無法完全回應社長的要求…!)

最終只能「手動」重做的空虛感

「這裡的留白再縮緊一點!」 「按鈕要再彈跳一點!」

為了應付接連不斷湧入的嚴苛修改意見(紅字修正),我含淚解除了 FigmaMake 生成的 Auto Layout,拆解生成的元件,然後手動重新排版。

數小時後。畫面上留下的,是連 FigmaMake 的影子都看不到一絲,完全不同的設計檔案。

以下是經過多次修改的初稿。它的設計與最初的初稿完全不同。

而且,雖然現有的所有元素都已套用 Auto Layout,但從 FigmaMake 複製到 Figma 時,部分元素不知為何會解除 Auto Layout,因此還得重新套用 Auto Layout,增加了額外的工作。

回過神來,修改已花去相當多的時間。

內心的聲音 (咦?這個……從一開始就用 Photoshop 或 Figma 手動製作會比較快吧……?我那三小時的神速作業到底算什麼……?)

在深夜的辦公室裡,意識到這個事實時的空虛感,真是難以言喻。而在這樣的我身邊,遞給我能量飲料的是前輩。

前輩:「我工作結束了,先走啦!!」

前輩瀟灑地離去。原來不會來幫忙啊……。

結論:FigmaMake 的「擅長」與「不擅長」

經過這次的反覆修正,我們已掌握 Figma Make 這項工具的特性。

若用錯場景,反而會增加修正的工時。

✅ Figma Make 擅長的事(=能快速完成)

  • 管理後台、儀表板 UI、應用程式畫面等
    • 規整的格線版面、表單、表格等,表現非常出色。
    • 它能瞬間建立「邏輯清晰的結構」,做出讓人覺得「SaaS 的管理畫面直接拿來用也行」的品質(當然仍需要手動調整)。
  • 初期的線框圖、架構草案
    • 若處於「確認元素是否齊全」的階段,即使是 LP 也相當夠用(前提是尚未開始精細設計)。
    • 此外,在釐清需求的過程中也能快速產出多種版本,非常方便。
    • 將客戶的需求具體化,當場做出雛形來對齊彼此的想像時,它真的非常好用。

❌ Figma Make 不擅長的事項(=必須手動作業)

  • LP(著陸頁)的視覺細節打磨
    • 仍不擅長透過「點綴」或「裝飾」來呈現吸引力的設計
    • 生成的成果終究是整理得井然、易於使用的 UI。雖然也能加入漸層或圖樣等裝飾,但若未給予明確指示,成品可能會停留在 2010 年代左右的風格。
    • 要提高設計製作時提示詞的精準度,需要花費時間。
  • 將「感覺不錯」這種模糊的語意具體化
    • 在這方面,仍需要人類設計師的轉譯能力。
    • 如果能將提示詞用得更熟練,應該就能下達更精準的指示,製作得更順暢(以我目前的程度還做不到)

總結:儘管如此,作為「初稿」來說表現相當優秀

因此,對於「依社長模糊指示製作 LP」的情況,直接使用 Figma Make 的生成資料實在很困難。

不過,正如上一篇文章所述,在「從空白狀態花 3 小時做出大致的雛形,並從社長那裡問出需求」這一點上,它確實很有幫助。而過去我在這個階段花了相當多的時間,導致作業推進得很慢。

「要做得氣勢十足、俐落帥氣」這樣的需求,也正是因為有初步草稿在,才會冒出來的意見呢(正面思考)。

這次的學習心得

  • FigmaMake 是打造「結構」的專家。
  • 「裝飾(點綴)」正是設計師大展身手的地方。
  • 目前還沒有 AI 能應付社長那種「感覺不錯」的要求。

下次我打算不屈不撓地挑戰「內部管理工具的 UI 更新」,再次向 FigmaMake 復仇!(如果是管理畫面……管理畫面一定能大放異彩吧……!)

LP 的設計修改……。

嗯,今後也會繼續腳踏實地、親手努力!

至於 AI 的進化……。這是用與製作前篇文章時相同的提示詞所生成的設計,就是這個。

才幾個月,初次生成的品質就大幅提升了。這真的讓人很驚訝呢。

精準度大幅提升,真讓人有點害怕呢。我最近每天都想努力鑽研設計,不輸給AI的進步。

接著是這次完成的網站,請看這裡

LP本身也符合WCAG 2.2 AA,而且
Lighthouse 分數也很高(雖然檢測需要一點時間,但歡迎大家試試看!偶爾還能拿到滿分喔!)
而且不知為何自動支援了多語言!
關於多語言支援的做法,請參考這篇文章也請一併看看喔!
雖然最近瀏覽器翻譯已成主流,但不需切換,就能便宜又快速地做出翻譯網站,真的非常方便!

覺得如何呢?
是不是完成度相當高呢🎵

東想西想寫了很多,不過果然有初稿作為基礎,確實大幅減少了工時!! 如果是以前,WF階段就會花很多時間,之後轉換成設計、再修改內容等工序也減少了許多。 下次使用AI時,我打算先產生完善的提示詞再開始挑戰。 來點獎勵,喝杯啤酒吧。

關於撰寫本文的人

UI設計每天都在更新!我也在思考如何將LP設計與無障礙(accessibility)結合。最近我離開了標記(markup)工作一段時間,正在想「我是否也該提升自己的JavaScript能力?」。我最喜歡北村匠海!

Hashi

網頁設計師 / 2018年入職 / 內心至今仍是一名新手設計師

查看此員工的文章

我們的優勢在於穩健的團隊體制與快速的應對能力

Liberogic 由經驗豐富的資深人員積極推動專案,因此獲得客戶的高度評價。
我們會妥善指派專案經理與總監,致力於順利推進整體專案。 我們採取依據專案需求適才適所分配資源的方式,避免因全程投入而增加不必要的成本,並且在掌握業務內容、製作與提交估價方面的速度也廣受好評。

注: 本公司不積極承接類似 SES 的駐點業務等,敬請事先諒解。

可搭配 Slack、Teams、Redmine、Backlog、Asana、Jira、Notion、Google Workspace、Zoom、Webex 等幾乎所有主要的專案管理工具與聊天工具使用。

使用 Figma 建立設計系統時,是否遇到什麼困難?

案例分析