・課程前言：設計師即開發者的 No-Code 新時代
| 專題實作講義：Framer AI 從設計到網頁發布的無縫落地 | |
|---|---|
| 課程編號 | AI-W2B-02-Framer |
| 專題路徑 | 視覺導向（Designer-Led No-Code Path） |
| 核心工具 | Figma + Framer + Framer AI |
| 課時分配 | 原理講授 45 分鐘 + 實作指導 75 分鐘 |
| 0. 課程前言：設計師即開發者的 No-Code 新時代 | |
|
在 2026 年的前端生成生態中，Framer 代表了「視覺派（Visual-First）」的頂峰。它消除了傳統設計手稿到程式碼發布之間的交接溝通（Hand-off），讓設計師能夠在保留極致視覺質感、複雜滾動動畫與微互動的前提下，直接將 Figma 稿件轉化為具備正式網域的高效能網站。
本講義專注於 Framer AI 的核心應用，帶領大家掌握從 Figma 稿件預處理、Framer AI 佈局重構、自然語言 Prompt 調教，到一鍵發布的全流程。
|
|
・ 前置準備：Figma 稿件的 AI 預處理
💡 解析核心原理：Framer AI 的解析品質完全取決於輸入端（Figma）的結構化程度。若 Figma 稿件充滿自由懸浮（Absolute Position）圖層，匯入 Framer 後將導致跑版與響應式破裂。
| Figma 稿件狀態 | 輸入端圖層結構 | AI 解析機制 | 最終網頁與 RWD 成果 |
|---|---|---|---|
|
❌ 混亂的 Figma 稿件 (未結構化稿件) |
自由懸浮圖層 (Absolute Position) |
AI 誤判絕對定位 |
跑版破裂 / 無法響應 (RWD 完全破裂) |
|
✅ 100% Auto Layout 稿件 (結構化稿件) |
Auto Layout 容器 (Flexbox 排版) |
AI 解析 Flexbox 邏輯 |
自動生成乾淨 Stacks (具備彈性斷點) |
・ Auto Layout 轉化法則 (Flexbox 原理)
全 Auto Layout 覆蓋原則：所有文字、按鈕、卡片、列表乃至整頁 Section，均必須包裹在 Auto Layout 中。
| 尺寸約束模式 (Constraint) | 技術定義與邏輯 | 最佳套用元件範例 | AI 解析與 RWD 影響 |
|---|---|---|---|
| Fixed (固定尺寸) | 元件具備固定寬高，不隨父容器放縮而改變尺寸。 | Icon、固定頭像、標籤圖示、特定形狀圖案。 | 防止關鍵視覺元件變形或過度拉伸。 |
| Hug Contents (包裹內容) | 元件尺寸由內部子元素大小與 Padding 間距決定。 | 按鈕 (CTA Button)、標籤 (Badge)、卡片高度、選單項目。 | 自動適應多國語系文字長度，確保 Padding 比例穩定。 |
| Fill Container (填滿容器) | 元件寬度或高度自動伸展以填滿父級容器剩餘空間。 | 文章內文、自適應 Banner、Grid 內的卡片寬度。 | 轉譯為彈性 width: 100%，完美對應動態 RWD 縮放。 |
・圖層語意化命名對照表
AI 會讀取 Figma 圖層名稱作為生成 HTML5 標籤與 Framer Stacks 結構的語意依據：
| ❌ 混亂命名 (AI 無法識別) | ✅ 語意化命名 (AI 優先解析) | 🌐 HTML5 / Framer 語意對應 | 💡 AI 解析效益與作用 |
|---|---|---|---|
| Frame 12345 | Header / Navbar | <nav> 導覽列 Stack | 自動辨識為頂部導覽列，預設固定定位或 Sticky。 |
| Group 8 | Hero_Section | <section> 主視覺區塊 | 建立獨立的主區塊容器，便於設定全螢幕 Height。 |
| Rectangle 12 | CTA_Button | Primary Component / <button> | 識別為互動組件，自動加上 Hover/Pressed 狀態。 |
| Text_copy_3 | Section_Title | <h1> / <h2> 語意標題 | 自動建立 SEO 標題層級，優化網頁搜尋引擎結構。 |
| Frame 99 | Card_Grid | Direction: Row / Column Stack | 自動推導 Flexbox 排版方向與 Grid 間距 (Gap)。 |
💡 預處理黃金心法：好的 Figma 結構決定了 80% 的轉譯品質。只要確保 100% Auto Layout + 語意化命名，即可在進入 Framer 時獲得近乎零跑版的乾淨網頁底座！
・Framer AI 核心功能與 Prompt 工程
💡 二次優化機制：當設計稿匯入 Framer 後，即可借助 Framer 內建的大型語言與佈局模型（Framer AI Engine）進行自動化佈局重構成型、RWD 斷點生成與自然語言風格調教。
| Framer AI Engine 核心分枝 | 功能定義與自動化運作範疇 | 解決之設計痛點與轉譯效益 |
|---|---|---|
|
引擎功能 01 Make Responsive |
自動生成跨裝置 RWD 斷點，並轉譯橫向/縱向排版。 | 消除手動為每個螢幕尺寸重複排版的繁瑣工序。 |
|
引擎功能 02 Stack Restructure |
自動掃描圖層關係，重組為 Flexbox 驅動的 Stacks 容器。 | 修正絕對定位造成的跑版問題，建立約束邊界 (Min/Max Width)。 |
|
引擎功能 03 Text & Style Prompts |
解析自然語言指令，微調全站或區域之字級、顏色與 CMS。 | 無需深層選取圖層，即可快速進行批量樣式與資料調整。 |
・ 自動響應式重構 (Make Responsive)
| 核心機制單元 | 詳細運作流程與技術動作 | AI 自動化轉譯成果 |
|---|---|---|
|
運作機制 (Mechanism) |
1. 選取匯入的 Frame 區塊。 2. 點擊右側控制面板的 Make Responsive 按鈕。 3. AI 深度掃描內部圖層結構關係。 |
• 自動將內層轉化為以 Flexbox 驅動的 Stacks。 • 自動建立邊界限制（如 Min Width / Max Width），確保拉伸不破版。 |
|
斷點推導 (Breakpoints) |
1. 點擊畫布頂部的 + Breakpoint。 2. AI 自動演算法推導並生成彈性畫布：
|
• 自動將 Desktop 的橫向排列（Row）轉譯為 Phone 的縱向排列（Column）。 • 自動調整欄位間距 (Gap) 與內距 (Padding)。 |
・ Framer 自然語言 Prompt 指令撰寫速查表
可於 Framer Canvas 頂部 AI 控制框或選取特定元件後輸入，進行局部或全域微調：
| Prompt 微調類別 | 💡 常用 Prompt 指令範例 (可直接複製) | AI 執行效益與調整範疇 |
|---|---|---|
| 佈局重構 | 「將這個 Card Grid 在 Phone 斷點改為單欄縱向排列，間距（Gap）設為 16px。」 | 重構手機端卡片網格，將原本的多欄改為單欄縱向流動，修正擠壓。 |
| 字體級距 | 「自動調整手機端標題字級，h1 降為 28px，h2 降為 22px，內文維持 16px。」 | 自動批量更換手機端排版階層，解決小螢幕文字過大折行問題。 |
| 視覺樣式 | 「將此按鈕加上 Hover 狀態：放大 1.05 倍，並加入 0.2 秒的背景光暈轉場。」 | 無需手動建立 Variant，自動生成 Hover 懸浮微互動與 Transition 動畫。 |
| CMS 欄位 | 「為這個 Blog 區塊生成 3 筆範例文章的 CMS 動態卡片與封面圖。」 | 自動建立 CMS 資料集與欄位綁定，充填真實範例圖文（Mock Data）。 |
・實作 SOP 5 大步驟
1 匯出與匯入
➔
2 AI 結構重組
➔
3 RWD 斷點適配
➔
4 微互動與動畫
➔
5 SEO 與發布
・ Step 1：Figma 至 Framer 複製與匯入(Copy & Import)
| 執行動作類別 | 詳細操作指引與流程說明 | 參數 / 快捷鍵 / QC 指標 |
|---|---|---|
| 1.1 Figma 稿件選取 | 開啟專題 Figma 稿件，確認目標 Section 區塊已完成 100% Auto Layout 與語意化命名。點選欲匯出的根層級 (Root Frame)。 |
Selection: Root Section 必須選取最高階層 Frame |
| 1.2 呼叫官方外掛 | 在 Figma 中開啟 Quick Actions 選單，搜尋並執行官方開發之 Figma to Framer 外掛插件。 |
Cmd + P (Mac) Ctrl + P (Win) 搜尋：Figma to Framer |
| 1.3 轉換與複製資料 | 點擊外掛 UI 面板上的 "Copy to Framer" 按鈕。外掛將自動將 Figma 的 Auto Layout 屬性與向量素材包裝為 Framer 可解析的剪貼簿 JSON 數據。 |
💡 提示：複製成功後，系統會顯示 "Copied to clipboard!" 提示。
|
| 1.4 貼入 Framer Canvas | 切換至已開啟的 Framer 專案畫布 (Canvas)，直接按下貼上快捷鍵，將數據無縫轉譯為 Framer 圖層結構。 |
Cmd + V (Mac) Ctrl + V (Win) 驗收：確認圖層完整載入 |
・ Step 2：AI 結構重組與 Stacks 修復
| 執行動作類別 | 詳細操作指引與流程說明 | 關鍵屬性 / 避坑要點 |
|---|---|---|
| 2.1 跑版檢查與重組 | 檢查貼上後的視覺效果。若出現圖層重疊或位置偏移，選取該 Frame，於右側控制面板的 Layout 區塊點擊 + 號，強制轉換為標準 Stack。 |
Layout: Stack 轉譯為 Flexbox 排版 |
| 2.2 尺寸約束調整 |
依據響應式邏輯調整尺寸屬性：
|
Width: Fill / Hug Height: Hug 避免寫死像素固定值 |
| 2.3 消除絕對定位 | 檢查圖層之 Position 屬性。除特殊裝飾性背景圖案外，其餘內容元件均需確保設定為 Relative，避免拉伸時發生碰撞錯位。 |
❌ Position: Absolute ✅ Position: Relative 根除跑版主因 |
| 2.4 邊界限制設定 | 為大尺寸 Banner 或卡片設定適當的邊界最大寬度（Max Width），防止超大螢幕延伸時版型過度拉寬變形。 |
Max Width: 1200px 保持寬螢幕最佳閱讀體驗 |
・ Step 3：AI 驅動 RWD 斷點適配 (Desktop / Tablet / Phone)
| 執行動作類別 | 詳細操作指引與流程說明 | 斷點數值 / 手動 QC 項目 |
|---|---|---|
| 3.1 新增跨裝置斷點 | 點擊 Framer Canvas 右上角的 + Breakpoint 按鈕，依序建立平板與手機螢幕適配畫布。 |
Desktop: 1200px+ Tablet: 810px Phone: 390px |
| 3.2 啟用 AI 自動重構 | 選取畫布上的 Section，點擊右側面板的 Make Responsive 按鈕。Framer AI 將自動推導橫向 (Row) 轉縱向 (Column) 排版，並自動更新 Phone 斷點佈局。 |
🤖 AI 動作：自動重算 Gap、Padding 並調整圖層折疊順序。
|
| 3.3 文字與圖片 QC |
切換至 Phone (390px) 斷點進行手動細節檢核：
|
QC: 檢測橫向滾動條 確保手機端無溢出 (No Overflow) |
| 3.4 導覽列組件切換 | 將頂部導覽列於 Phone 斷點切換為適應行動端的漢堡選單 (Hamburger Menu) 互動組件。 |
Navbar ➔ Mobile Overlay 確保手機端導覽體驗順暢 |
・ Step 4：AI 動畫與微互動 (Effects & Transitions)
| 執行動作類別 | 詳細操作指引與流程說明 | 動畫參數 / 模組化設定 |
|---|---|---|
| 4.1 滾動登場動畫 | 選取目標卡片或文字區塊，於右側控制面板點擊 Effects ➔ Appear Animation 或 Scroll Variant。 |
Trigger: Scroll Into View 提升頁面動態滾動質感 |
| 4.2 設定 Transition 參數 | 配置登場動畫參數：設定初始狀態為透明度 Opacity: 0、Y 軸偏移 Offset Y: +20px，並設定 0.4 秒的淡入位移轉場。 |
Duration: 0.4s Ease: Ease-Out 保持自然平滑的動畫曲線 |
| 4.3 懸浮 Hover 微互動 | 為按鈕或卡片加上 Hover 懸浮效果：設定滑鼠懸停時微幅放大 Scale: 1.03，並加入背景光暈或陰影加深。 |
Hover State: Scale 1.03 賦予視覺明確的可點擊反饋 |
| 4.4 頁面重複組件化 | 選取頂部 Header 或頁尾 Footer，按右鍵點擊 Create Component，將其轉為全站通用組件，實現修改單一組件即同步更新全頁面。 |
Cmd + Option + K 建立可重用 Component |
・ Step 5：SEO、OpenGraph 與一鍵部署
| 執行動作類別 | 詳細操作指引與流程說明 | 欄位填寫規範 / 發布網址 |
|---|---|---|
| 5.1 進入頁面設定 | 點擊 Framer 介面左上角 Settings 齒輪圖示 ➔ 選取 Page Settings，進入全站與單頁 SEO 控制台。 |
Settings ➔ Page Settings SEO 與社群卡片設定中心 |
| 5.2 填寫 Meta 搜尋資訊 |
設定網頁 Title 與 Description：
|
Title: 2026 數位展示館 優化搜尋引擎 (Google) 檢索 |
| 5.3 上傳 OG 與 Favicon 素材 | 上傳 OpenGraph Image（LINE / Facebook 社群分享預覽圖）與 Favicon（瀏覽器頁籤圖示），提升專案正式度與品牌辨識度。 |
OG Image: 1200 x 630 px Favicon: 32 x 32 px 社群分享卡片必備 |
| 5.4 一鍵正式上線部署 | 點擊畫布右上角的 Publish 按鈕，設定自訂的免費次網域（如 *.framer.app）或綁定自訂 Domain，點擊發布取得公開網址。 |
Demo: *.framer.app ✓ 產出公開 Demo URL |
・常見坑點與除錯對照表 (Troubleshooting)
本週作業
🚨 除錯原則：當轉譯或佈局出現異常時，優先檢查 Figma 圖層結構（Mask、Fixed Width、無嵌套包覆）與字體授權，通常 90% 以上的問題均可在前處理與屬性調整中修復。
| 異常現象 (Issue) | 根本原因 (Root Cause) | 排除 SOP 修正指引 (Solution) |
|---|---|---|
|
⚠️ 貼上後圖片變成空白或框線
|
ROOT CAUSE Figma 圖片採用了複雜遮罩（Mask）或未下載的雲端圖檔。 |
FIX SOP 在 Figma 中選取圖片 Frame，按下 Cmd + Option + C 複製為 PNG，再貼回 Framer。 |
|
⚠️ 手機端斷點出現橫向滾動條（跑版）
|
ROOT CAUSE 某些內層元素設定了超過 390px 的 Fixed Width 固定寬度。 |
FIX SOP 將該元素寬度改為 Fill 或設定 Max Width: 100%。 |
|
⚠️ Framer AI Make Responsive 失敗
|
ROOT CAUSE 原 Figma 稿件缺乏階層結構，全塞在同一層 Root Frame 中（無 Auto Layout / Stacks）。 |
FIX SOP 在 Framer 中手動選取相關元素，按下 Cmd + Option + G 包裹為 Stack 後再讓 AI 處理。 |
|
⚠️ 字體與 Figma 原稿不一致
|
ROOT CAUSE 原稿使用了本地特殊字體，Framer 雲端庫無此字型。 |
FIX SOP 於 Framer 左上角 Settings ➔ Fonts，手動上傳 .woff2 字體檔或切換為 Google Fonts。 |
・ Deliverable 作業驗收標準
本週作業
完成實作後，請勾選確認滿足以下 4 大核心提交驗收指標，並將公開連結與成果提交至課程平台。
| 驗收狀態 | 交付成果項目 (Deliverable) | 詳細驗收標準與規格細節 | 提交與 QC 審查規範 |
|---|---|---|---|
|
Framer 正式上線網址
(Public Demo URL)
|
發布至 Framer 免費次網域（如 *.framer.app）或自訂網域，且可順利透過一般瀏覽器直接開啟訪問。 |
|
|
|
3 斷點響應式覆蓋
(Responsive Breakpoints)
|
完整適配並涵蓋 3 大裝置斷點：
|
|
|
|
SEO 基礎配置
(Search Engine Meta)
|
於 Page Settings 完成基本 Search/Social 元數據設定：
|
|
|
|
至少 1 處動態效果
(Animations & Micro-Interactions)
|
頁面中包含至少一處動畫微互動效果：
|
|
📌 課程平台提交提醒：請登入課程後台，將 Public Demo URL 貼入本週作業提交欄位，助教團隊將依據上述 4 項標準進行線上評分與反饋！