使用者介面設計課程講義

UI/UX Design Figma

Figma Make & Site

Author

JinJin Wang

UI/UX Design Lead
November 26, 2025

Figma Make & Site

FIGMA官網

Figma 是目前最受歡迎的設計與原型製作工具之一。它不僅能協助設計師進行介面規劃與視覺設計，更重要的是，它讓設計與開發之間的協作變得前所未有的順暢。隨著 Figma 不斷更新，其功能也逐漸延伸至網站的實際製作階段。

本單元將介紹 Figma Site 與 Figma Make 兩項全新功能。Figma Site 提供了以設計為核心的網站製作流程，讓設計稿能快速轉化為可運行的網站，適合用於個人作品集、品牌介紹或課程展示等。

而 Figma Make 則是一套整合的製作與發佈工具，能讓使用者直接在 Figma 內建構互動頁面、設定動態效果，並一鍵上線，實現「從設計到上線」的一體化流程。透過這兩項工具的學習，學生將能理解現代網頁設計的整合思維，掌握視覺美感與實際操作兼具的設計能力，進而提升作品的專業度與實用性。

Figma Make

Figma Make 概述

    Figma 在 2025 年 5 月 7 日於舊金山 Moscone Center 舉辦的年度 Config 會議上震撼發布了五項全新產品，其中Figma Make 整合了生成式 AI、元件智慧化組裝與互動式流程建立能力，目的在大幅縮短介面設計、原型製作與設計資源準備的時間。相較於傳統 Figma 需要由設計者手動調整版面、建立元件與設定互動，Figma Make 能透過自然語言快速生成頁面、介面模組甚至完整 App Flow，讓設計從「手動拖拉」進入「智慧生成」的新工作模式。

    使用 Figma Make，用戶只需輸入簡單語句，就能快速生成互動式 App 原型，透過對話引導人工智慧，此工具不僅能生成介面，更能依據指令調整版面結構、替換設計風格、建立響應式配置，甚至結合已有的 Design System，自動套用品牌字體、色票與元件規範。對於需要快速提案，產出多版本 UI 的使用者而言，Figma Make 提供了前所未有的效率。

    在本單元中，我們將依序介紹 Figma Make 的核心概念、生成流程、實作步驟、操作技巧與常見應用情境，並透過實際案例展示如何利用 AI 生成完整介面、優化工作流程以及提升設計品質。無論是初學者或專業設計師，都能透過本課程迅速掌握 Figma Make 的運作方式，並有效提升設計產能。

    使用 Figma Make，您無需從零開始。您可以從 Figma Design 複製現有框架，從而賦予模型設計本身——同時保留其結構和元資料。然後，透過簡單的自然語言提示，Figma Make 可以將這些設計轉化為您可以實際使用的互動式體驗，並保持您設計的原始意圖。

    Skeuomorphic Design Example
    利用自然語言提示，將您的設計轉化為實際的體驗。
    Figma Make 簡介

    學習如何使用 Figma Make 將您的設計變為現實。此文件包含多個範例，可協助您快速入門。

    Figma Make 簡介

Figma Make 功能免費及付費使用說明與比較

Figma Free
（免費版）

Figma Free（免費版） Make 使用限制

  • ✔ 可使用 AI 生成頁面
  • ✔ 可生成 Mockups / Layout / 改色
  • ✔ 可做基本 Wireframe
  • ❗ 每月 有生成次數限制（AI 匯點，限額固定）
  • ❗ 無法大量生成 10–20 頁完整專案
  • ❗ 無法整合 Design System 做批量調整
    • 實測：免費版的 Make 每月大約能使用 20～30 次生成 (每日約6次)，請回饋實際可使用次數

    （依 Figma 官方動態限額、會依使用量與季節調整）

    學生自學、課堂練習完全足夠。但若需要「大量示範、生成整站」，會需要付費方案。

Figma Professional（Pro）

✔ 無限制使用 Make（但仍有「合理使用量」）

官方未公布硬數字，但實測：

  • 可生成大量頁面（20～50 頁沒有問題）
  • 支援整站生成 / Flow / 多版型
  • 可針對 Design System 執行「批量調整」
  • 可反覆使用 Make 重建 layout

Pro 使用 Make 最大的好處：

  • ✔ 可做完整課程專案（例如整套電商網站）
  • ✔ 生成速率較快、不會中斷
  • ✔ AI 限額比 Free 高數倍
Figma Organization / Enterprise（Org）

✔ Make 的所有功能完全解鎖

  • 可與 Design System Pro 套件結合
  • 可管理權限、團隊協作
  • 可大量使用 Make 自動套版

可與 Figma Site（網站系統） 整合，適合：

  • 大型公司
  • 學校
  • 想做「大型網站＋整套 UI 系統」的課程

Figma Make 介面介紹

    Figma Make 介面延續 Figma 的主要布局，但針對 AI 生成工作流程加入更直覺的控制區域，可分為四大部分：

  1. 指令輸入區（Prompt Panel）

    2. 位於右側或下方，是使用者與 AI 互動的核心。可輸入需求，如「生成登入頁」、「調整為深色模式」等。支援自然語言與階層式指令。

  2. 生成畫布（AI Generated Canvas）

    3. Make 的主要工作區域，AI 生成的版面會立即呈現在此，可直接拖曳、修改，也能與 Figma 原生工具融合使用。

  3. 元件候選區（Component Suggestions）

    4. AI 會依據需求提供多種構成模組，如按鈕組、表單組、導覽列等。可點擊加入畫布、替換元件、或套用設計系統。

  4. 操作歷程與版本管理（History & Variants）

    5. 可查看每次生成版本、比較改動、還原至舊版本，讓快速迭代更安全、可靠。

使用教學（Overview & Workflow）

  1. Figma Make 的核心能力
    • 以文字描述生成 UI 版面
    • 根據指定風格自動調整顏色、字型、元件風格
    • 自動建立 UX Flow、串聯頁面
    • 套用品牌 Design System
    • 生成多版本設計供比較
    • 可持續將指令疊加於既有介面
  2. 適用的設計情境
    • 提案初稿：快速生成 Wireframe 或高保真介面
    • 多版本探索：一次生成多種 UI Layout
    • 新手學習：用指令取代複雜操作
    • MVP 產出：短時間建立可展示的產品流程
  3. 使用方式概念圖
    • Prompt → 生成版面 → 編輯調整 → 加入流程 → 套用元件 → 匯出/分享

Figma Make 操作步驟

  • 開啟 Figma → + Creat → Make
    • Skeuomorphic Design Example
    開啟 Figma → New Design File → Make
  • 或在畫面右上角找到 Make 按鈕
    • Skeuomorphic Design Example
    在右上角找到 Make 按鈕
  • 開啟後進入 Make 專屬工作區
    • Skeuomorphic Design Example
    Figma Make 畫面

Figma Make 網頁範例說明

Figma Make 網頁範例

    Figma Make 可將在Figma Design設計好的UI介面，快速轉換成可互動且完整的產品，在這裡的作用不是重做你的設計，而是根據你已有的風格：

    • 快速生成新頁面
    • 依需求製作互動
    • 讓整套 Flow 成為「完整產品」

    以下根據範例，進行網頁設計在Figma Design轉換成Figma Make的案例示範

    1. 開啟Figma Design檔案
      2. figma
      開啟Figma Design檔案
    2. 點選要轉為Make的頁面（Frame），按右鍵選『Send to Figma Make』
      3. figma
      按右鍵選『Send to Figma Make』
    3. 轉跳到Figma Make
      4. figma
      轉跳到Figma Make
    4. 加上文字描述，希望Make執行的指令
      5. figma
      加上文字描述，希望Make執行的指令
    5. 也可以使用下方『＋』Attach a design
      6. figma
      也可以使用下方『＋』Attach a design
    6. 點選要轉為Make的頁面（Frame），按右鍵選 Copy/ Paste as『Copy link to Selection』
      7. figma
      按右鍵選 Copy/ Paste as『Copy link to Selection』
    7. 將複製的連結貼上
      8. figma
      將複製的連結貼上
    8. 一次處理一張圖片，用詳細的指令說明要製作的內容
    9. 送出指令後，Make開始執行 AI 製作
      10. figma
      送出指令後，Make開始執行 AI 製作
    10. 產生第一版成果

      11. 第一次會產生類似的設計，但會有許多還需要調整的空間，包含排版、圖片、字體等，都可以再下指令進行調整與修改。

      figma
      產生第一版成果
    11. 進行第二版的指令修改

      12. 每次指令修改一個項目，比較不容易產生錯誤，如果沒有達到要求，可在更進一步更精準的要求。

      figma
      進行第二版的指令修改
    12. 可逐步新增頁面

      13. 加入新增頁面指令，並說明需要的內容描述

      figma
      加入新增頁面指令，並說明需要的內容描述
    13. 進行Publish發布網頁

      14. 可進行網站發布，方便溝通與討論

      figma
      進行Publish發布網頁
      figma
      進行Publish發布網頁
    14. 進入發布網頁觀看效果

      15. 可持續進行更新與修改至滿意為止，做到滿意需要花時間與AI對話，也可加入希望的動態效果

    15. 第二版 Figma Make實作｜網頁版本

Figma Make 範例二｜WireFrame線框稿轉成設計檔

    Figma Make 依據 WireFrame線框稿進行設計

    以下根據範例，進行初稿圖檔轉換成Figma Make的案例示範

    1. 上傳WireFrame線框稿
      2. figma
      上傳WireFrame線框稿
    2. 進行第一次指令

      3. 優化介面設計，使其更具設計感及使用者操作理解與舒適度

    3. 加入配色指令

      4. 以#007487、#3ca1ad、#b7d8dd、#b7d8dd為主色，進行配色

    4. 進一步加上文字描述，希望Make執行的指令

      5. 使每個選項都可以點擊和具備功能

    5. Figma Make指令網址
    6. 進入發布網頁觀看效果

      7. 可持續進行更新與修改至滿意為止，做到滿意需要花時間與AI對話，也可加入希望的動態效果

Figma Make APP範例說明

Figma Make APP範例

    Figma Make 可將在Figma Design設計好的UI介面，快速轉換成可互動且完整的產品，在這裡的作用不是重做你的設計，而是根據你已有的風格：

    • 快速生成新頁面
    • 依需求製作互動
    • 讓整套 Flow 成為「完整產品」

    以下根據範例，進行網頁設計在Figma Design轉換成Figma Make的案例示範

    1. 開啟Figma Design檔案
      2. figma
      開啟Figma Design檔案
    2. 點選要轉為Make的頁面（Frame），按右鍵選『Send to Figma Make』
      3. figma
      按右鍵選『Send to Figma Make』

      第二種選擇位置

      figma
      按右鍵選『Send to Figma Make』
    3. 轉跳到Figma Make
      4. figma
      轉跳到Figma Make
    4. 加上文字描述，希望Make執行的指令

      5. 指令範例：

      設計主題為：追光日誌 Light Diary ，APP 開發與設計。
      希望追星人有個能互相交流的社群，在這裡找到你的夥伴。
      了解追星的市場需求。提供安全、友善、正能量的環境。
      智能通知：可選擇只推送重要資訊（票務、演唱會、行程）。

    5. 也可以使用下方『＋』Attach a design
      6. figma
      也可以使用下方『＋』Attach a design
    6. 點選要轉為Make的頁面（Frame），按右鍵選 Copy/ Paste as『Copy link to Selection』
      7. figma
      按右鍵選 Copy/ Paste as『Copy link to Selection』
    7. 將複製的連結貼上
      8. figma
      將複製的連結貼上
    8. 一次最多可以處理三張圖片，用詳細的指令說明要製作的內容
      9. figma
      送出指令後，Make開始執行 AI 製作
    9. 送出指令後，Make開始執行 AI 製作
      10. figma
      送出指令後，Make開始執行 AI 製作
    10. 產生第一版成果

      11. 第一次會產生類似的設計，但會有許多還需要調整的空間，包含排版、圖片、字體等，都可以再下指令進行調整與修改。

      figma
      產生第一版成果
    11. 進行第二版的指令修改

      12. 如果沒有達到要求，可在更進一步更精準的要求。不過免費版，每天只能使用六次左右，請謹慎使用。

      1. 在登入前的首頁加入為動畫效果。
      2. 歡迎紀錄頁面，登入與註冊的按鈕文字沒有對齊，起？請縮小並對齊。
      3. 登入後每一頁都需有下方固定式選單。
      4. 每一個按鈕與連結都要連到實際頁面，如我的動態的圖片，點擊需到動態頁面，收藏，訊息，行程也都可以點擊
      figma
      進行第二版的指令修改
    12. 選擇右上方 Figma Design按鈕，可複製 Figma Make的設計畫面到Figma Design，可再繼續編輯。
      13. figma
      可複製 Figma Make的設計畫面到Figma Design
      figma
      可複製 Figma Make的設計畫面到Figma Design
    13. 進行Publish發布網頁

      14. 可進行網站發布，方便溝通與討論

      figma
      進行Publish發布網頁
      figma
      進行Publish發布網頁
    14. 進入發布網頁，觀看效果

      15. 可持續進行更新與修改至滿意為止，做到滿意需要花時間與AI對話，也可加入希望的動態效果

Figma Make APP範例二

  • 必須先完成主要的畫面設計，依照風格制定進行Figma Make的延伸產出。
  • 同上一範例做法，第一次先置入三張圖，因免費版每日次數有限，每次指令盡量說明清楚。

以下根據範例，進行圖檔轉換成Figma Make的案例示範

  1. 第一次指令盡量說明清楚，包含目的、對象、內容、風格等。
    2. figma
    Figma Design 範例檔案

    以附圖的風格設計一款網銀APP，Internet Banking，目的為：
    1. 提升使用體驗（UX）：讓使用者能在最短時間內完成常見操作（轉帳、查看餘額、設定目標）。
    2. 改善資訊層級（UI）：以清晰的卡片式介面呈現多帳戶與交易資訊，降低認知負擔。
    3. 建立信任感與安全感：透過明確的視覺層級與即時回饋，讓使用者在進行金錢操作時感到安心。
    4. 提升互動效率：簡化轉帳與儲蓄設定的步驟，減少不必要的頁面跳轉。
    5. 本地化設計語言：結合台灣使用者習慣，設計更貼近在地金融操作的介面與流程。
    讓使用者在首頁 3 秒內即可理解主要餘額與帳戶狀況。
    🎯 操作效率 簡化「轉帳」流程，最多 3 步即可完成。
    🎯 體驗一致性 所有操作按鈕、回饋訊息與彈窗具一致風格與層級。
    🎯 視覺現代化 以柔和對比色與留白營造乾淨、輕盈的品牌感。
    🎯 安全回饋明確 完成交易後立即顯示確認與提醒，降低錯誤操作疑慮。
    🎯 易於學習 新用戶首次使用即可完成主要任務（登入、轉帳、查帳）。
    設計對象為：
    👨‍💼 上班族理財型 – 注重效率、安全與行動操作
    👩‍🎓 年輕族群方便支付型 – 習慣使用行動裝置，重視介面設計與操作簡單
    👵 中高齡穩健使用型 – 不太熟科技，需要簡化流程與明確引導
    🧑‍💻 中小企業主／自由工作者型 – 需要轉帳、對帳方便，關心安全與速度
    請以此原則設計

  2. 觀察產出狀態後，加入修正指令

    3. 請出現首頁後停留。點擊後進入登入頁，每個按按鈕及選項都需要有功能及可以連結

  3. 加入品牌感設計

    4. 上方header統一放置Internet Banking logo，每一頁需統一設計

  4. 加入動態效果

    5. 請在首頁做logo的動畫效果

  5. Figma Make指令網址
  6. 進入發布網頁觀看效果

    7. 可持續進行更新與修改至滿意為止，做到滿意需要花時間與AI對話，也可複製設計檔至Figma Design

Figma Make APP範例三

  • Figma Make｜設計師 AI Prompt-to-App 工具｜Figma Make｜設計師 AI Prompt-to-App 工具｜以心情日記APP為範例說明
    • Figma Make｜設計師 AI Prompt-to-App 工具｜Figma Make｜設計師 AI Prompt-to-App 工具｜以心情日記APP為範例說明
    • 必須先完成主要的畫面設計，依照風格制定進行Figma Make的延伸產出。必須先完成主要的介面設計，確定設計樣式後，再由設計稿導入Figma Make進行延伸設計。每位同學都需以Figma Make製作，進行不同風格的設計提案。
    • 同上一範例做法，第一次先置入三張圖，因免費版每日次數有限，每次指令盡量說明清楚。

    以下根據範例，進行圖檔轉換成Figma Make的案例示範

    1. 第一次指令盡量說明清楚，包含目的、對象、內容、風格等。
      2. figma
      Figma Design 範例檔案｜say app
      第一次的Figma Make指令，盡量完整，整理簡報重點 包含：主題名稱、目標、風格、內容等

      設計一款心情日記ＡＰＰ，以ＡＰＰ手機尺寸置中設計，依照附圖風格與內容設計。
      名稱為：[Say] ＝讓每一天 都有話可說
      在快節奏和資訊爆炸的時代，我們常常習慣閱讀他人，卻忘了傾聽自己
      它提供使用者透過書寫、記錄與反思，重新與自己對話 不只是日記本，
      而是一個能承載情緒的心靈對話平台，無論是一句簡短的心情記錄照片
      或是深夜的一段自語，Say 都聽你「說」。
      設計目標：
      1.低門檻的情緒出口
      -每日一句靈感卡，引導使用者思考與表達
      -心情標籤與顏色記錄，視覺化心情軌跡
      -小動畫或角色陪伴，讓使用者覺得被鼓勵
      美觀與簡潔並重的介面
      以柔和紫為主調，搭配留白與圓角設計
      呈現輕盈、平靜的視覺感。
      2.美觀與簡潔並重的介面
      以柔和紫為主調，搭配留白與圓角設計
      呈現輕盈、平靜的視覺感。
      3.可回顧的狀態軌跡
      -每月回顧功能，幫助使用者察覺自己的情緒變化
      -成就系統例如：連續書寫天數、心情種子成長
      -安全加密，確保私密性與便利性
      風格設定
      溫柔：#AE89B8，清新：#CDDEB3，穩重：#503C57

    2. 觀察產出狀態後，加入修正指令

    Figma Site

    Figma Site 概述

      Figma 在 2025 年 5 月 7 日於舊金山 Moscone Center 舉辦的年度 Config 會議上震撼發布了全新產品 Figma Sites，徹底打破了設計與開發之間的藩籬。這款創新工具允許設計師直接將 Figma 設計檔轉換為功能完整的網站，無需編寫複雜程式碼，為數位產品開發帶來革命性變革。

      Figma Sites 最大的突破在於消除了設計師與開發者之間長期存在的溝通障礙。設計師現在可以完全掌控自己的創意，從概念到最終產品的每一個細節，確保設計意圖得到完美執行。

      Skeuomorphic Design Example
      Figma Sites
      Skeuomorphic Design Example
      Figma Sites
      Intro to Figma Sites｜Figma 網站入門

      Figma Sites 讓您在一個平台上建立高品質網站。學習如何創建美觀的響應式佈局，在 Figma Design 和 Figma Sites 之間無縫切換，應用預置交互，使用 AI 驅動的代碼層與團隊協作，並將您的網站發佈到世界各地。

    Figma Sites｜基本介紹與概念總覽

    一、什麼是 Figma Sites？

    Figma Sites 是 Figma 推出的全新網站製作工具，讓設計師能在 Figma 的同一個環境中，直接從畫面設計 → 建站 → 加互動 → 發布網站。

    它打破傳統「設計 → 切版 → 前端開發 → 上線」的流程，讓網站製作更快速、直覺，特別適合以下族群：

    • UI/UX學生與初學者
    • 想快速做 Landing Page、作品集、活動頁的人
    • 不懂程式也想做網站的視覺設計師
    • 需要快速 demo 的產品設計團隊
      • Figma Sites 的核心概念是：

      👉 用設計工具做網站

      👉 輕量網站、互動展示、作品集最快速的解決方案

    二、Figma Sites 的主要功能
    1. 直接用視覺設計介面做「真正網站」

      2. 延續 Figma 設計介面，使用 Frame、Auto layout、元件即可組成網站頁面。

    2. 響應式頁面（Responsive Layout）
      • Sites 提供桌機、平板、手機 3 種斷點。
      • 切換不同裝置時，自動重排內容、維持一致性。
        • Skeuomorphic Design Example
        Sites 提供桌機、平板、手機 3 種斷點
    3. 互動與動畫（Interactions）

      4. 可在右側面板設定：

      • Hover（滑鼠懸停）
      • Scroll effects（滾動出現、淡入效果）
      • Tap / Navigate（點擊跳轉）
      • 滑動區塊（marquee）
      • 自訂游標（Custom cursor）

      進階使用者可加入 Code Layers 製作更多互動效果。

    4. 與 Figma Design 完整互通
      • 可以直接從 Figma Design 複製 Frame 到 Sites
      • 也可以把 Sites 的部分貼回 Design

        • 讓設計與網站版本永遠一致。

    5. 內建模板與元件庫（Templates & Blocks）

      6. 左側「Insert」區提供：

      • Hero區塊
      • 導覽列 Navigation
      • Footer
      • 資訊區塊
      • 作品集頁
      • 商業網站頁模板

        • 可以快速拖拉、替換字與圖就能完成基本網站架構。

      Skeuomorphic Design Example
      內建元件庫
    6. 一鍵發布（Publish）

      7. 完成網站後按下 Publish 即可取得網站網址。支援：

      • Figma 內建免費網址
      • 設定自訂網域（付費帳號）
      Skeuomorphic Design Example
      一鍵發布（Publish）Figma 內建免費網址
    三、Figma Sites 相關資源整理
    1. 官方資源
    2. 可使用的 Figma Sites 模板

    參考書目

    Figma Make 資源

    Figma Make 資源

    HomeWork｜課後作業

    進行Figma Make的練習

    01

    無論要以哪一種方式進行期末作業，都請以Figma Make進行練習，AI協同創作是未來的趨勢。

    02

    以Figma Make製作網站/APP

    請以Figma Make製作網站/APP。

    03

    製作到滿意為止

    修改至滿意為止，做到滿意需要花時間與AI對話，可加入更多動態效果，將每個頁面都製作完成。