使用者介面設計課程講義

Unit 10．AI 生成 ＼ Figma Make & Site

把「精稿＋Prototype」轉成 AI 也能生成的
Figma MakeAI GEN

精稿＋Prototype都排好了，換Figma Make 用 AI 生成同一種動態效果。

拾器從線框稿、情緒板、設計系統，一路做到精稿（ui08）與 Prototype（ui09），轉場跟互動都已經手動排好了。這一關教你把同一份精稿交給 Figma Make：用 AI 生成類似、甚至更多的動態效果，練習寫出讓 AI 聽得懂的提示詞，最後用 Figma Site 把成果一鍵發布成真的網址。

0個方案比較，找到適合自己的用量
0個介面分區，看懂 Make 在做什麼
0個從精稿到上線網址的完整流程

內容整理於 2026 年 9 月．中國科大視傳系｜使用者介面設計

拾
拾器 Pick It 這一關要決定：怎麼讓它動起來、怎麼上線
01為什麼學這關 02認識 Make 03方案怎麼選 04送進 Make 05做出動態 06Site 上線
這堂課怎麼上 Figma Make 不是按一個按鈕就好的魔法棒——先看免費跟付費方案怎麼選，再學怎麼把 ui08 的精稿、ui09 的 Prototype 交給 AI，一步步加提示詞加出動態效果；最後用 Figma Site 把成果變成真的網址，過程中的畫面都用 Figma 官方實際操作截圖對照。
怎麼下指令，AI 才聽得懂 這一關的提示詞習慣跟前面幾關不太一樣——Figma Make 是直接「生成畫面」的工具，指令最好包含三件事：這是什麼元件、要用哪些顏色字體、要有什麼動態效果。講得越具體，AI 生出來的版本越不會跑掉。
STAGE 01

Step 0．手動排好的 Prototype，AI 能不能做到類似效果

拾器從線框稿、情緒板、設計系統，一路做到精稿（ui08）跟 Prototype（ui09）——畫面、色彩、字體、轉場全部到位，是一份可以真的操作、有互動回饋的完整原型。這一關要做的事很不一樣：把同一份精稿交給 Figma Make，看 AI 能不能用生成的方式，做出類似、甚至更多的動態效果，兩種做法可以自己比較。

參考資料
操作提醒下面 02～03 關會先帶你認識 Figma Make 本身跟免費／付費方案；04～05 關才會真的動手把精稿交給 AI，生成、加動態效果；06 關再教怎麼用 Figma Site 發布上線。

同樣的動態效果，兩種做法的差別

現在．手動排（ui09 Prototype）
  • 轉場跟互動都在 Figma 裡一格一格連線設定
  • 效果精準可控，但每加一個新效果都要重新設定
  • 適合最終定稿、最關鍵的幾條動線
這一關．AI 生成（Figma Make）
  • 用一句話描述效果，AI 立刻生成建議版本
  • 可以快速產生、比較好幾種效果
  • 生成結果仍需要人工檢查是否符合預期
Figma Agent
Prototype 都排好了，轉場跟互動都能操作了，接下來呢？
可以把同一份精稿交給 Figma Make，看 AI 能不能用生成的方式，做出類似、甚至更多的動態效果——直接對話調整，會比在 Prototype 裡一格一格連線快很多；生成出來的版本，你可以自己比較要留手動排的那一版，還是 AI 生成的更好用。想正式發布的話，Figma Site 可以把結果一鍵變成真的網址。

這串對話從 ui09 延續過來，這一關開始會換成直接跟 Figma Make 對話

STAGE 02

Step 1．Figma Make 是什麼

Figma 在 2025 年的 Config 年度大會上發布 Figma Make——一個用自然語言直接生成頁面、元件甚至完整 App 流程的工具。以前要「手動拖拉」建立版面、元件、互動，現在可以用一句話說出需求，AI 就會生成對應的畫面，還能持續對話疊加指令、調整風格。

參考資料
操作提醒點右邊的每一項，看 Figma Make 介面的四個分區在做什麼；不需要背起來，操作幾次自然就會記得每個區塊在哪。
Figma Make 首頁：What do you want to make? 輸入需求即可開始生成

Figma Make 首頁：輸入一句話描述需求，就能開始生成

互動練習．點開看 Figma Make 的四個分區

01．指令輸入區 Prompt Panel
位於側邊，是你跟 AI 溝通的核心，可以打「生成登入頁」「調成深色模式」這類自然語言指令，支援一步步疊加。
02．生成畫布 AI Generated Canvas
AI 生成的版面會立刻呈現在這裡，可以直接拖曳、修改，也能跟 Figma 原生工具融合使用。
03．元件候選區 Component Suggestions
AI 會依需求提供多種構成模組，如按鈕組、表單、導覽列等，點一下就能加入畫布、替換元件或套用設計系統。
04．操作歷程與版本管理 History & Variants
可以查看每次生成的版本、比較改動、還原到舊版本，放心大膽嘗試不同指令。
生成畫布跟對話框並排工作的實際畫面，右下角有 Ask for changes 追加指令欄位

生成畫布（左）跟對話框（右下角 Ask for changes）並排工作的實際畫面

STAGE 03

Step 2．先搞懂免費額度，再決定要不要升級

Figma Make 依帳號方案給不同的 AI 生成額度，學生自學、課堂練習通常免費版就夠用；如果要做整站示範或大量生成，才需要考慮付費方案。點右邊的按鈕比較三個方案。

參考資料
操作提醒實測：免費版每月大約可用 20～30 次生成（每天約 6 次），實際額度會依 Figma 官方動態調整，課堂練習跟期中作業通常足夠。

互動練習．點按鈕比較三個方案

STAGE 04

Step 3．兩種開始方式：直接生成，或從既有設計出發

想從零開始，可以直接在 Make 打字描述需求；如果已經有 ui08 的精稿或 ui09 的 Prototype，更推薦在 Figma Design 裡選取畫面，右鍵選「Send to Figma Make」——結構跟樣式會被完整保留，AI 只需要負責把它變成可以互動、甚至更豐富動態的頁面，不用整個重畫。

Figma Make 對話
操作提醒提示詞盡量包含「元件」「顏色字體」「核心功能」三件事，AI 生成的方向才不會跑掉——右邊的範例截圖就是一個寫得清楚的提示詞長什麼樣子。
選取畫面後，右鍵選單裡的 Send to Figma Make

選取畫面後，右鍵選單裡的「Send to Figma Make」

把 App 精稿畫面送進 Figma Make 的實際操作，手機版畫面一樣適用

把 App 精稿畫面送進 Figma Make，手機版畫面一樣適用

Figma Make
這是拾器已經完成的精稿，登入頁跟物品列表頁都在附件裡，色彩字體都已經套用設計系統：主色鼠尾草綠 #6B8F71、輔色大地棕 #9C7A54、標題字體 Chiron GoRound TC。物品列表在 Prototype 裡本來就能上下滑動，這次想請你在滑動時幫卡片加上懸停放大的效果，看看能不能比我手動排的更自然。
已經用附加的精稿生成同一版首頁，色彩字體都保留了設計系統裡的設定；物品列表滑動瀏覽時，卡片加上了懸停放大效果，跟你在 Prototype 裡手動排的動線基本一致，但轉場更平滑一點。如果想要更多動態效果，可以繼續加指令。

這是這一關第一次直接對 Figma Make 下指令，不是 Figma Agent

範例：一則寫得清楚的提示詞長什麼樣子

主題、目標使用者、核心功能一次講清楚，AI 生成的方向才不會跑掉；附上參考設計或圖片，效果會更準確。

完整提示詞結構範例：設計主題、目標使用者、核心功能重點，並附加設計參考

主題、目標使用者、核心功能，加上附加的設計參考

STAGE 05

Step 4．用提示詞疊加動態效果

有了第一版畫面之後，「動態」是逐步用對話疊加出來的：先決定要幫哪個頁面加效果，再挑效果類型，講清楚「什麼元件、什麼時機、什麼動作」，Figma Make 才會生成對的互動。右邊選一個頁面、勾選想要的效果，看提示詞怎麼組出來。

Figma Make 對話
Figma Agent 小提醒一次只加 2～3 個效果，看過結果覺得 OK 再加下一批；一次描述太多動態，AI 有時候會抓錯對象或漏掉細節。

互動練習．選頁面、勾效果，組出你的提示詞

STEP 1．要幫哪個頁面加效果

STEP 2．要加哪些動態效果（可複選）

即時產出．提示詞

STAGE 06

Step 5．從「可以玩」到「有網址」

Figma Make 生成的是可以互動的原型；如果想變成正式可以分享的網站或作品集，Figma Site 能把設計稿直接變成響應式網站，不用寫程式碼。點開右邊每一項，看 Figma Site 的核心功能。

參考資料
操作提醒Figma Make 負責「生成與互動」，Figma Site 負責「排版與發布」——兩者可以互通，從 Make 生成的畫面能複製到 Site 繼續編排、發布。

互動練習．點開看 Figma Site 的五個核心功能

01．響應式版面（3 種斷點）
提供桌機、平板、手機三種斷點，切換不同裝置時自動重排內容，維持版面一致。
02．互動與動畫 Interactions
可在右側面板設定 Hover、Scroll effects、Tap／Navigate、輪播區塊、自訂游標等效果，進階使用者還能加 Code Layers。
03．與 Figma Design 完整互通
可以直接從 Figma Design 複製 Frame 到 Site，也能把 Site 的部分貼回 Design，讓設計與網站版本永遠一致。
04．內建模板與元件庫 Blocks
左側 Insert 面板提供 Hero、導覽列、Footer、作品集頁、商業網站頁模板，拖拉替換文字圖片就能完成基本網站架構。
05．一鍵發布 Publish
完成網站後按下 Publish 即可取得網址，支援 Figma 內建免費網址，付費帳號可設定自訂網域。

真實畫面．Figma Site 實際操作截圖

Figma Sites 提供桌機、平板、手機三種斷點的響應式版面

三種斷點的響應式版面

Figma Sites 內建 Blocks 模板庫，可拖拉插入 Hero、導覽列等區塊

內建 Blocks 模板庫，拖拉即可組頁

Figma Sites 一鍵 Publish 對話框，顯示網站標題、網址與發布狀態

一鍵 Publish，馬上拿到網址

課後作業與下一步

把拾器的操作方式，換成你自己期中案例的產品，走一次「精稿到上線網址」的流程

本週交付項目

  1. 用免費帳號的 Figma Make，把你自己期中題目已經完成的精稿或 Prototype（至少 2 個畫面）送進去，寫一則包含「元件、顏色字體、核心功能」的完整提示詞，生成第一版。
  2. 挑一個畫面，練習疊加至少 2 種動態效果（Hover、捲動淡入、頁籤切換等），並記錄你怎麼下指令、AI 生成的結果跟你想的是否一致。
  3. 修改到滿意為止——多花時間跟 AI 對話，比一次寫出完美指令更重要。
  4. 用 Figma Site 把最終版本發布成一個網址，附上連結或截圖，作為本作業的成果；本作業為期末作業的一部分，後續會延伸使用。
ui09．Prototype 互動原型設計回顧手動排出來的轉場與互動← ui11．Behance 期末發表說明下一個教學單元→ Figma Make生成與對話的入口↗ Figma Sites了解更多發布功能↗

從精稿與 Prototype 出發，用提示詞逐步生成、加動態效果，最後用 Figma Site 一鍵發布，是這一關示範的完整流程；實際操作介面以 Figma 官方畫面為準，方案額度可能隨時間調整。內容整理於 2026 年 9 月。