Figma Prototype 是什麼？它和 Wireframe、Design 差在哪裡
Figma Prototype 是用來模擬使用流程的互動原型，可以把靜態設計稿變成可點擊、可滑動、可測試的版本。它適合拿來驗證互動、說明流程、讓團隊或客戶理解產品會怎麼被操作，但不能取代真正開發。
Figma Prototype 的核心用途
Figma Prototype 的重點不是把畫面做得更漂亮，而是讓畫面之間有互動關係。按鈕可以前往下一頁，彈窗可以打開或關閉，長頁面可以捲動，tab 可以切換狀態，這些都能幫助你在開發前先檢查流程是否合理。
我會建議新手先把 figma prototype 當成「流程測試工具」來用。先確認使用者能不能完成登入、購買、預約、填表這類任務，再去追求更細緻的動畫。
Wireframe、Mockup、Prototype 的差異
| 類型 | 主要用途 | 通常回答的問題 | 適合階段 |
|---|---|---|---|
| Wireframe | 規劃資訊架構與版面 | 內容放哪裡？流程大方向對不對？ | 早期討論 |
| Mockup | 呈現視覺設計 | 畫面長什麼樣？品牌與 UI 風格是否一致？ | 視覺確認 |
| Prototype | 模擬互動流程 | 點了之後去哪裡？流程能不能走完？ | 測試與交付 |
Prototype 不能取代真正開發
Prototype 能讓互動方向被看見，但它不等於 production behavior。像表單驗證、資料同步、權限判斷、效能限制、例外狀態，仍然需要工程規格補足。設計師交付 prototype 時，最好同時說明觸發條件、狀態變化與動畫意圖，避免工程師只能靠猜。
開始前先整理畫面：建立可維護的 Prototype 工作區
製作 Figma 互動原型前，先整理畫面會比直接拉線更重要。把要測試的 screens 複製到 Prototype 專用頁面、依流程排列 Frame、命名清楚、建立常用元件，可以避免後面線路混亂、修改困難。
把要測試的 screens 複製到 Prototype 專用頁面
建議保留原本 Design 頁面，再另外建立一個 Prototype page。把這次要測試的登入、購買、預約或設定流程複製過去。這樣做的好處是，設計稿可以繼續修改，prototype 則專心維持測試流程。
- 保留原始設計頁面，避免互動設定干擾主設計稿。
- 只複製這次測試需要的畫面，不要把整個專案都搬過去。
- 如果畫面仍在變動，先標註版本或日期，方便回頭比對。
用流程順序排列 Frame，避免線路混亂
Frame 的排列方式會直接影響後續維護。登入流程可以從左到右排，購買流程可以依步驟往下排，錯誤狀態可以放在主流程附近。不要把相關畫面散在畫布各處，否則 Prototype 連線會像打結一樣難查。
用清楚命名降低後續維護成本
Frame 名稱應該反映使用者任務，例如「Login 01 輸入帳號」、「Login 02 密碼錯誤」、「Checkout 03 付款確認」。只叫 Frame 1、Frame 2，短期很快，長期會讓 flow description、handoff 與團隊溝通全部變慢。
先建立常用元件，後面才不會逐頁修改
導覽列、底部 tab bar、按鈕、商品卡片、表單欄位這些重複物件，最好先做成 local components。後面要調整文字、狀態或互動時，不需要逐頁手改。若你還不熟元件庫，可以先看 元件庫建立流程，再回來處理 prototype。
Figma Prototype 基本操作：從 Design 切到 Prototype 面板
Figma Prototype 的基本入口在右側 Prototype 面板。選取物件或 Frame 後，可以建立互動連線、設定 trigger、action、transition，並用 Preview 檢查流程是否能正常操作。
選取物件或 Frame 後切到 Prototype
先點選要設定互動的按鈕、卡片、icon 或整個 Frame，再到右側面板切換到 Prototype。新手最常卡住的地方是選錯圖層，明明想讓按鈕可以點，卻選到按鈕裡面的文字，結果點擊範圍變得很奇怪。
認識右側互動設定與藍色連線節點
切到 Prototype 後，物件旁邊會出現藍色節點。把節點拉到目標 Frame，就可以建立一條互動連線。右側會出現互動設定，通常包含 trigger、action、destination、transition 與 animation duration。
設定 Starting Frame
Starting Frame 是 prototype 開始播放的起點。每條 flow 都應該有清楚的起點，尤其是同一個檔案裡有登入、註冊、購買、設定等多條路徑時。起點沒設好，測試者一開連結可能會看到錯的畫面。
按播放鍵 Preview 原型
設定完第一條互動後，按右上角播放鍵 Preview。不要等全部畫面都串完才測試，因為連線方向、點擊範圍、轉場效果只要一開始錯，後面會一路錯下去。我的習慣是每新增兩到三個畫面就預覽一次。
建立第一個互動：把按鈕、卡片或 icon 連到下一個 Frame
最基本的 Figma prototype 連線，是選取觸發物件後拉線到下一個 Frame，並設定 On click 與 Navigate to。完成後，使用者在 Preview 裡點擊該物件，就會從 A 畫面進到 B 畫面。
選取觸發物件
觸發物件可以是按鈕、卡片、icon、文字連結，也可以是整個 Frame。若是按鈕，建議選取完整按鈕元件，而不是只選文字或 icon。點擊範圍太小會讓測試者以為 prototype 壞掉。
拉線到目標 Frame
從藍色節點拖曳到目標 Frame，Figma 會自動建立互動關係。目標 Frame 應該是下一個使用者會看到的畫面，例如從「商品列表」前往「商品詳情」，或從「登入表單」前往「登入成功」。
設定 On click 與 Navigate to
On click 適合大多數點擊行為，Navigate to 則表示前往某個 Frame。第一版 prototype 建議先用這組設定完成主要流程，等主路徑穩定後，再加入 Overlay、Scroll to、Back action 或 Smart Animate。
測試是否能從 A 畫面進到 B 畫面
進入 Preview 後，點擊剛剛設定的按鈕。若沒有反應，先檢查三件事：是否選對觸發物件、連線是否接到正確 Frame、Prototype 面板是否真的有 On click 設定。很多問題都不是功能不會用，而是圖層選錯。
觸發條件怎麼選：On click、On drag、Hover、Touch down 的使用情境
Trigger 決定互動何時發生。On click 適合按鈕與連結，On drag 適合滑動或拖曳，Hover 適合桌機狀態，Touch down 與 Touch up 適合手機觸控回饋。選錯 trigger，prototype 會和真實操作不一致。
On click：按鈕、連結、CTA
On click 是最常用的觸發條件，適合按鈕、導覽連結、卡片點擊、CTA、關閉 icon。初學者可以先用 On click 把主流程串起來，因為它最直覺，也最容易讓測試者理解。
On drag：滑動卡片、拖曳流程
On drag 適合模擬滑動卡片、拖曳排序、滑動解鎖、輪播拖曳等互動。使用時要注意，拖曳方向與目標畫面要對得上。若只是點擊切換，不要硬用 On drag，測試者會不知道該拖哪裡。
While hovering：桌機 hover 狀態
While hovering 適合桌機介面，例如選單展開、按鈕 hover、卡片浮起、提示文字出現。手機介面沒有滑鼠停留狀態，因此行動版 prototype 不應該依賴 hover 來完成關鍵任務。
Touch down / Touch up：手機觸控回饋
Touch down 可以模擬手指按下瞬間的回饋，Touch up 則適合放開後觸發下一步。這類互動適合細緻的行動體驗，但第一版流程測試不一定需要。過早加入太多觸控回饋，反而會拖慢製作速度。
| Trigger | 適合情境 | 常見錯誤 |
|---|---|---|
| On click | 按鈕、連結、CTA、卡片 | 點擊範圍只設到文字 |
| On drag | 滑動、拖曳、輪播 | 互動方向不符合使用者預期 |
| While hovering | 桌機 hover 狀態 | 拿來做手機關鍵流程 |
| Touch down / Touch up | 手機按壓回饋 | 把簡單流程做得過度複雜 |
轉場與動畫設定：Instant、Dissolve、Move in、Smart Animate 怎麼用
Transition 決定畫面切換的感覺。Instant 適合穩定流程測試，Dissolve 適合淡入淡出，Move in 與 Push 適合頁面進出，Smart Animate 適合同一物件在不同狀態間自然變化。
Instant：流程測試最穩定
Instant 沒有動畫，點了就切到下一個畫面。做初版 figma prototype 時，我通常會先用 Instant，因為它最不容易干擾測試。使用者如果連流程都走不完，漂亮動畫沒有太大意義。
Dissolve：狀態切換與淡入淡出
Dissolve 適合提示訊息、成功狀態、圖片淡入、空狀態切換等不需要方向感的變化。使用時要避免 duration 太長，否則測試者會覺得介面反應慢。
Move in / Push：頁面進出與側邊欄
Move in 適合底部抽屜、側邊選單、頁面從右側進入。Push 則適合讓新畫面把原畫面推開，例如某些行動頁面切換。這類轉場要和產品平台習慣一致，不能只是看起來炫。
Smart Animate：卡片展開、icon 變化、狀態轉換
Figma Smart Animate 會比較前後兩個 Frame 中相同圖層的差異，讓位置、大小、透明度或顏色自然變化。它適合卡片展開、icon 旋轉、按鈕狀態、圖片縮放、側欄展開等情境。
Smart Animate 失效的常見原因
Smart Animate 最常失效的原因是圖層名稱不一致、層級改變、前後畫面缺少對應物件，或把物件拆成不同群組。要讓動畫穩定，前後 Frame 的圖層結構越一致越好。
| 轉場類型 | 適合情境 | 不適合情境 |
|---|---|---|
| Instant | 早期流程測試、快速切頁 | 需要表現狀態變化的互動 |
| Dissolve | 提示、淡入淡出、狀態訊息 | 需要方向感的頁面切換 |
| Move in / Push | 側邊欄、底部抽屜、頁面進出 | 小元件狀態切換 |
| Smart Animate | 卡片展開、icon 變化、狀態轉換 | 圖層結構混亂的大型畫面 |
常見真實互動類型：Overlay、Back、Scroll to、外部連結與滾動頁面
真實產品很少只有一頁接一頁。Figma Prototype 可以用 Overlay 做彈窗，用 Back action 返回上一頁，用 Scroll to 做頁內定位，用 Open link 連到外部文件，也能設定固定導覽列與滾動區塊。
Overlay：彈窗、選單、底部抽屜
Overlay 適合不需要切換整頁的互動，例如確認彈窗、下拉選單、登入提示、篩選面板、底部抽屜。設定時要選擇 overlay 的位置、背景是否變暗、點擊外部是否關閉。
Back action：返回上一個畫面
Back action 適合返回上一個實際來源畫面，比固定 Navigate to 更彈性。當同一個商品詳情可能從首頁、搜尋頁、收藏頁進入時，返回按鈕用 Back action 通常比手動指定目標 Frame 更合理。
Scroll to：頁內定位與錨點式互動
Scroll to 適合長頁面中的錨點互動，例如點擊目錄跳到規格區、FAQ、評論區。使用前要先確認目標物件在同一個可滾動 Frame 裡，否則很容易看起來沒有反應。
Open link：連到外部頁面或文件
Open link 可以連到外部網址、文件、研究資料或產品頁。交付時可以用它連到需求文件、問卷或測試說明。不過外部連結會把使用者帶出 prototype，關鍵流程不要依賴它完成。
Fixed position：固定導覽列、底部 tab bar
長頁面常需要固定頂部導覽列或底部 tab bar。設定 fixed position 後，使用者捲動畫面時，該物件會停留在固定位置。這對行動 app prototype 很重要，因為底部 tab 通常不應該跟著內容一起滑走。
Horizontal / Vertical scroll：橫向卡片與長頁面滾動
Vertical scroll 適合長頁面，Horizontal scroll 適合橫向卡片、商品輪播、分類列。設定時要確認 Frame 的內容超出容器範圍，並開啟 overflow scrolling。很多 scroll 失效，其實是因為內容根本沒有超出 Frame。
| 互動類型 | 什麼時候用 | 設定重點 | 常見錯誤 |
|---|---|---|---|
| Overlay | 彈窗、選單、底部抽屜 | 位置、背景、關閉方式 | 用整頁切換取代彈窗 |
| Back action | 返回上一個來源畫面 | 讓返回依實際路徑運作 | 硬指定單一返回頁 |
| Scroll to | 頁內定位、目錄跳轉 | 目標要在可滾動區域內 | 目標放在錯誤 Frame |
| Open link | 外部頁面、文件、問卷 | 確認權限與網址 | 讓使用者中途離開測試 |
| Fixed position | 固定導覽列、底部 tab | 設定固定位置 | 導覽列跟著內容滑走 |
| Horizontal / Vertical scroll | 橫向卡片、長頁面 | 內容超出容器並開啟滾動 | Frame 高度與內容高度一樣 |
Prototype Flows 管理：一個檔案如何放多條測試路徑
Prototype Flows 可以讓同一個 Figma 檔案管理多條測試路徑。每條 flow 應該有獨立 starting point、清楚名稱與描述，讓測試者知道自己要完成哪個任務。
每條 flow 都要有獨立 starting point
登入、註冊、購買、改密碼、取消訂閱都應該有自己的 starting point。不要把所有畫面硬串成一條超長路徑，因為測試者只想測某個任務時，會被迫走過不相關畫面。
Flow 命名要反映使用者任務
好的 flow name 應該像任務名稱，例如「新會員註冊」、「購買單一商品」、「忘記密碼重設」。不要只寫 Flow 1、Flow 2。命名清楚，PM、工程師、客戶才知道每條路徑的目的。
用描述補充測試目標與注意事項
Flow description 可以補充測試目標、起始條件、帳號狀態、需要觀察的行為。例如「請從未登入狀態完成預約，注意日期選擇與錯誤提示」。這段文字會讓 prototype link 更像可執行的測試入口。
避免所有畫面只串成一條超長流程
超長流程看似完整，其實最難維護。中間任何一個畫面更動，都可能影響後面一串連線。比較穩的做法是依任務拆 flows，再用共同元件維持一致性。
Interactive Components：用元件互動處理 tab、toggle、dropdown、hover state
Interactive Components 適合處理重複出現的元件狀態，例如 tab、toggle、checkbox、dropdown、hover state。它能減少 Frame 數量，讓 Figma 互動原型更好維護。
什麼情況適合用 Interactive Components
當某個互動會在多個畫面重複出現，而且只是元件狀態改變，不一定需要整頁切換，就適合用 Interactive Components。像每個頁面都有的 tab、開關、選單、按鈕 hover，用元件互動會比複製多個 Frame 乾淨很多。
Tab 切換：用 variant 管理不同狀態
Tab 通常有 active、inactive、hover 等狀態，可以用 variants 管理，再用互動設定切換 variant。若 tab 只影響小範圍內容，Interactive Components 很適合；若 tab 會改變整頁內容，frame-to-frame 可能更直覺。
Toggle / checkbox：用 component state 表示開關
Toggle、checkbox、radio button 都適合用元件狀態表示。你可以建立 on、off、disabled 等 variants，再設定點擊切換。這比每個畫面都複製一份開關狀態更好維護。
Dropdown：用 overlay 或 variant 選擇
Dropdown 可以用 overlay，也可以用 variant。若選單位置需要浮在畫面上，overlay 通常比較像真實產品；若只是元件內展開一小段內容，variant 會更好管理。判斷標準不是功能名稱，而是選單會不會影響周圍版面。
Hover state：桌機介面的微互動
Hover state 適合桌機按鈕、卡片、選單項目。要注意的是，hover 不應該承載必要資訊。使用者如果不 hover 就無法完成任務，這個設計在觸控裝置上通常會出問題。
| 互動情境 | 建議做法 | 原因 |
|---|---|---|
| Tab 小範圍切換 | Interactive Components + variants | 減少重複 Frame |
| 整頁內容切換 | Frame-to-frame prototype | 流程更清楚 |
| Toggle / checkbox | 元件狀態切換 | 可重複使用 |
| Dropdown 浮層 | Overlay | 更接近選單浮在畫面上的行為 |
| 桌機 hover | Hover state variant | 適合微互動，不適合關鍵流程 |
Variables 與條件邏輯：做出更接近產品狀態的進階原型
Variables 可以讓 Figma Prototype 記錄狀態，conditional statements 可以依條件決定下一步。它們適合模擬登入狀態、開關、分支流程與 variant swap，但不適合在第一版原型裡硬做過深邏輯。
Variables 可以記錄哪些 prototype 狀態
Variables 可以用來記錄文字、數字、顏色或布林狀態。在 prototype 裡，最常見的是記錄使用者是否登入、某個功能是否開啟、目前選到哪個狀態。若你已經在管理設計 token，可以延伸閱讀 Figma variables 與 token。
Boolean 適合處理開關、登入狀態、顯示／隱藏
Boolean 只有 true 或 false，很適合處理開關類狀態。例如是否登入、是否訂閱、是否展開進階設定、是否顯示錯誤訊息。這種狀態如果用一堆 Frame 硬串，通常會越做越亂。
Conditional statements 適合處理分支流程
Conditional statements 適合處理「如果符合條件就走 A，否則走 B」的互動。例如已登入使用者點擊收藏會直接成功，未登入使用者會先看到登入提示。這能讓 prototype 更接近真實產品，但也會增加維護成本。
Interaction chaining 適合連續動畫或多步驟互動
Interaction chaining 可以把多個互動接在一起，例如點擊後先改變狀態，再顯示提示，接著前往下一個畫面。適合成功提示、載入過程、連續狀態轉換。若只是一般頁面切換，不需要每一步都用 chaining。
進階功能不要放在第一版原型裡硬做
我的判斷是，variables 應該服務測試目標，而不是展示設計師會多少功能。第一版 prototype 先確認主流程，第二版再補狀態與條件。若一開始就把登入、權限、例外、動畫全部做滿，團隊通常會很難改。
大型 Prototype 維護技巧：50 個畫面以上怎麼不崩潰
大型 prototype 要靠元件化、命名規則、批次修改與 flow map 維持秩序。當畫面超過 50 個時，不能只靠手動拉線與逐頁修改，否則任何小改版都會變成重工。
先元件化常見導覽、按鈕與卡片
導覽列、底部 tab、按鈕、表單欄位、卡片、狀態標籤都應該優先元件化。尤其是會出現在多個 flows 的區塊，只要還是散落圖層，後面就一定會改到漏。元件狀態可搭配 Figma component variants 管理。
用 Select Matching Layers 批次選取同類物件
Select Matching Layers 適合用來批次選取相同屬性的圖層，例如多個畫面中的同名按鈕、同樣文字樣式、同類 icon。大型 prototype 裡，這種批次選取比人工一個一個找可靠得多。
用 Multi-edit text 快速修改多個畫面文字
Multi-edit text 適合一次修改多個相同文字圖層，例如按鈕文案、tab 名稱、表單 label。使用前要先確認選到的是同一類文字，不然很容易把不該改的地方一起改掉。
每次新增流程都先更新 flow map
Flow map 可以很簡單，只要標出每條 flow 的起點、主要畫面、分支與結束狀態。每次新增或移除流程先更新 flow map，再進 Figma 拉線。這個動作看起來慢，其實會省掉大量回頭找線的時間。
Preview、分享與 Handoff：做完 Prototype 之後怎麼交付
Prototype 完成後，要用 Preview 檢查流程，再用 prototype link 分享。交付時不只給連結，還要補 flow description、互動規格、測試任務、權限設定與工程實作限制。
分享 prototype link 前要檢查權限
分享前先確認連結權限，包含誰能看、誰能留言、誰能編輯。若測試者沒有 Figma 帳號，需確認連結是否允許瀏覽。不要等會議開始才發現客戶打不開 prototype link。
用 flow description 說明測試任務
Flow description 不要只寫「登入流程」。可以寫成「請從未登入狀態完成登入，觀察錯誤提示是否清楚」。測試者拿到任務後，才知道要注意什麼，而不是隨便點一圈。
把 prototype 嵌入 Notion、Confluence 或規格文件
Prototype 可以嵌入文件，讓 PM、工程師與設計師在同一份規格裡看流程。嵌入時最好附上版本、更新日期、測試範圍與已知限制，避免有人拿舊 prototype 討論新需求。
交付工程師時要補互動規格，不要只丟連結
工程 handoff 至少要補觸發條件、狀態變化、動畫時間、例外情境、資料狀態與平台限制。Prototype link 只能展示互動意圖，不能完整說明所有規則。只丟連結，工程師通常會回頭問一堆本來可以先寫清楚的問題。
哪些動畫可能不適合照 prototype 直接開發
有些 Smart Animate 效果在 Figma 裡很好看，但實作成本、效能或平台限制不一定合理。像過度複雜的連續動畫、很多元素同時變形、仰賴精準時間差的效果，都應該在 handoff 時標出優先級。
| 交付項目 | 要檢查什麼 | 常見遺漏 |
|---|---|---|
| Prototype link | 權限、起點、可瀏覽範圍 | 對方打不開 |
| Flow description | 任務、測試目標、注意事項 | 只寫流程名稱 |
| 互動規格 | trigger、action、transition、狀態 | 只靠動畫猜邏輯 |
| 工程限制 | 動畫可行性、平台差異、例外狀態 | 把 prototype 當成開發規格全文 |
Figma Prototype 常見錯誤與排除方式
Figma Prototype 失效多半來自設定錯誤、圖層選錯、起點不對、Frame 沒有滾動條件、overlay 位置設定錯誤或分享權限不足。先用問題、原因、解法逐一排查，通常可以很快找出卡點。
Preview 後不能點
先檢查觸發物件是否選對、互動是否設定在正確圖層、trigger 是否為 On click，以及點擊範圍是否太小。若按鈕由多層圖層組成，建議把互動放在外層 group 或 component 上。
Smart Animate 沒有效果
檢查前後 Frame 是否有相同圖層名稱、相同層級與可對應的物件。若你在其中一個 Frame 把物件拆開，另一個 Frame 還是群組，Smart Animate 就很難判斷該怎麼補間。
滾動頁面不能滑
確認 Frame 高度小於內容高度，並設定 overflow scrolling。若內容沒有超出 Frame，Figma 不會產生可滑動效果。固定導覽列也要另外設定 fixed position，不能只放在畫面最上面。
Overlay 出現在錯的位置
檢查 overlay 的 position 設定，是置中、相對觸發物件，還是手動位置。底部抽屜通常需要從下方進入，桌機 dropdown 則可能需要對齊觸發按鈕。位置設定不清楚，測試者會以為選單跑版。
分享後別人看不到
多半是連結權限或檔案權限問題。檢查對方是否有瀏覽權限、是否需要登入 Figma、是否開到正確 flow。若 prototype 嵌入文件，也要確認文件本身與 Figma 檔案都有開放權限。
| 問題 | 可能原因 | 解法 |
|---|---|---|
| Preview 後不能點 | 選錯圖層、沒有設定 trigger、點擊範圍太小 | 把互動設定在完整按鈕或外層元件 |
| Smart Animate 沒有效果 | 圖層名稱或層級不一致 | 整理前後 Frame 的圖層結構 |
| 滾動頁面不能滑 | 內容沒有超出 Frame、未設定 overflow scrolling | 調整 Frame 高度並開啟滾動 |
| Overlay 出現在錯的位置 | 位置或對齊方式設定錯誤 | 重新設定 overlay position |
| 分享後別人看不到 | prototype link 或檔案權限不足 | 檢查瀏覽、留言、編輯權限 |
不建議放進本文的內容
Figma Prototype 教學應聚焦在互動原型製作、測試與交付。帳號註冊、定價比較、完整設計系統治理、前端框架實作都會稀釋主題，讓讀者更難完成第一個可用原型。
Figma 完整入門介面教學
如果讀者還不熟 Figma 基礎操作，可以先看 Figma 基礎教學 或 Figma 完整入門路線。Prototype 文章不需要重講整個介面，否則會拖慢真正想做互動的人。
Figma 定價與方案比較
定價與方案會影響團隊使用方式，但不是 prototype 製作的核心問題。除非某個功能和權限直接相關，否則不需要展開比較。
設計系統完整建置流程
Prototype 會用到 component、variant、local components，但不需要展開完整 design system 治理。若要處理版面自適應，可另外閱讀 Figma Auto Layout 教學。
前端開發實作教學
Prototype 可以幫助工程理解互動意圖，但不需要延伸到前端框架或程式碼實作。設計交付的責任是把狀態、觸發、轉場與限制說清楚，不是把工程流程全部寫完。
Figma Prototype 是什麼？
Figma Prototype 是把靜態設計稿串成可點擊、可滑動、可測試的互動流程。它常用來展示產品操作、做使用者測試、和 PM 或工程師確認互動方向。
Prototype、Wireframe、Mockup 有什麼差別？
Wireframe 主要看資訊結構，Mockup 主要看視覺設計，Prototype 主要看互動與流程。三者可以接續使用，但解決的問題不同。
Figma Prototype 可以做登入流程嗎？
可以。你可以用多個 Frame 串接輸入、錯誤狀態、忘記密碼、成功登入與返回流程。進階一點，也可以用 variables 模擬登入狀態。
Figma Prototype 可以做滾動頁面嗎？
可以。重點是設定正確的 Frame 高度與 overflow scrolling，並視需求把導覽列或底部 tab 設為 fixed position，讓它們在捲動時維持固定位置。
Smart Animate 失效怎麼辦？
先檢查圖層名稱、圖層層級與前後 Frame 是否都有同一個物件。Smart Animate 需要找到可對應的圖層，若前後結構差太多，就容易失效。
什麼時候該用 Overlay？
彈窗、下拉選單、底部抽屜、提示訊息這類不需要切換整頁的互動，通常適合用 Overlay。它能保留原畫面脈絡，只在上方顯示額外內容。
什麼時候該用 Interactive Components？
tab、toggle、hover、dropdown、checkbox 這類重複出現的狀態互動，很適合用 Interactive Components。它可以減少 Frame 數量，也比較方便維護。
Figma Prototype 可以分享給沒有 Figma 帳號的人嗎？
視分享權限而定。你可以設定連結瀏覽權限，讓對方開啟 prototype link；但留言、編輯或特定檔案權限仍需要另外控管。
Figma Prototype 可以取代真正開發嗎？
不能。Prototype 適合溝通互動方向與測試流程，但不等於正式產品行為。表單驗證、資料狀態、權限、效能與例外處理仍需要工程實作與規格文件。
一個 Figma 檔案可以有多個 prototype flow 嗎？
可以，而且大型專案很建議這樣做。每個 flow 應有獨立 starting point、名稱與描述，方便測試登入、購買、設定等不同任務。
Prototype 做得越像真的產品越好嗎？
不一定。早期測試應該先讓任務清楚、流程可走完。過度動畫可能讓使用者注意力偏移，也會讓後續修改變慢。
Figma Prototype 和工程 handoff 要怎麼接？
Prototype link 只能展示互動意圖，handoff 時仍要補狀態、觸發條件、動畫時間、例外情境與實作限制。工程師需要的是可判斷、可實作的規格，不只是可以點的畫面。