Figma State Machines 實戰教學：做一張會互動的數據卡片
2026年4月13日 下午 4:41
UI/UX 設計TUTORIAL · INTERACTIVE CARD
做一張會自己跳動的數據卡片
從 Figma 接完流程到匯出互動檔
用 Figma State Machines 拆解「Heart Rate 卡片」這類型的互動是怎麼組成的：一個元件、三個狀態、兩段過渡，加上點擊觸發，最後匯出成可以直接在 web 或 App 裡跑的 dotLottie 檔。
CONTENTS
CHAPTER 01 · WHY
為什麼從這個練習開始
前一篇文章介紹了 LottieFiles 為 Figma 外掛新增的 State Machines 功能是什麼，這一篇要把它放進實戰。選「數據卡片」當練習題是有原因的。
第一，它是產品設計師最常需要做卻又最容易卡住的元件類型。心率、步數、電量、天氣、股價、下載進度——任何會變動的資訊呈現，都會遇到三個共同的課題：靜態版面怎麼排、中間的過渡怎麼動、數值更新的時候怎麼交代。
第二，它剛好涵蓋了 State Machines 最擅長處理的互動類型：一個元件、多個狀態、彼此透過使用者動作切換。不是整頁流程，不是複雜的數據 binding，就是一個可重用的小單元。
第三，練完之後你手上會有一個可以直接 import 到網頁或 App 的互動動畫檔。它不是死的示意稿，是真的會動、真的會回應點擊的資產。這是整個練習最值得的地方。
CHAPTER 02 · BREAKDOWN
先拆解：三個狀態與兩段過渡
動手之前先把結構寫下來。這張卡片本質上是一個有限狀態機——它永遠只在三種狀態其中之一，每個狀態由使用者的點擊觸發下一個切換。
A
待機狀態 Idle
卡片靜止、愛心是最小層、中央顯示「TAP TO MEASURE」或是破折號佔位。等待使用者點擊。
B
測量中 Measuring
愛心的多層結構展開、向外擴散一層一層淡出的光暈效果、中央文字切到「MEASURING...」。再點一次會看到結果。
C
結果 Result
愛心回到最大最亮的姿態、BPM 數字出現（例如 68）、下方補一行時間戳記「1 min ago」。再點一次回到 A，循環。
A
Idle
WAITING FOR TAP
愛心收縮・數字未顯示
TAP
→
B
Measuring
IN PROGRESS
愛心擴張・光暈發散
TAP
→
C
Result
68 BPM
顯示數值・1 min ago
← TAP · RESET ←
▲ 三個狀態之間完全由 tap 驅動，形成可循環的閉合流程
為什麼用純點擊驅動而不是讓 measuring 自動跳到 result？因為點擊跟 hover 是 LottieFiles State Machines 明確支援的觸發類型。時間延遲自動轉場可能可以也可能不行，與其賭它，不如設計一個一定會動的版本。
CHAPTER 03 · PART 1
畫出靜態版面
先做最後那個「結果」狀態——因為它是資訊最完整的版本，所有元件都會出現。之後只要微調就能變出另外兩個狀態。
STEP 01
建立卡片容器
開一個 400×500 左右的 frame，加上圓角（32–40px）。開 auto layout，讓後續所有內容可以垂直排列、間距好調。背景填漸層色，從粉紫到洋紅到帶點藍的上緣天空色，營造活力感。
STEP 02
放上標題區
上緣放 Heart Rate 標題，字級約 42–48px，粗體白色。右邊放一個返回鍵或展開箭頭做視覺平衡。這一區整體放在卡片容器的上 1/4。
STEP 03
做出同心愛心的視覺
這是整張卡片的視覺核心。做法是畫一個愛心 icon，然後複製 4–5 份，每一層放大 1.15 倍左右、降低不透明度。最外層可能只剩 10% 透明度。這幾個愛心全部用同一個中心點對齊，做出從內向外發散的層次感。整組愛心放在卡片中間，佔整個容器的 40–50% 高度。
STEP 04
放上 BPM 數字與時間戳
左下方放一個大大的數字（例如 68），字級 72–96px 加 BPM 後綴。底下小字「1 min ago」，用半透明白色。整個左下區域跟右上的標題形成對角呼應。
設計提醒
這一步的重點是把所有會動的元素做成獨立圖層，不要把它們 flatten 成一張圖。愛心要是獨立 vector、文字要是獨立 text layer、BPM 數字要單獨一層。Smart animate 是根據圖層名稱與結構來對位的，圖層乾淨後面才好接動畫。
CHAPTER 04 · PART 2
用 Variants 建三個狀態
靜態卡片完成後，把它變成 component，然後複製兩份變成三個 variant。每個 variant 對應一個狀態。以下是三個狀態大致的視覺差異——不是精確設計稿，是讓你心裡有個目標：
Heart Rate
—
TAP TO MEASURE
A IDLE
Heart Rate
MEASURING...
B MEASURING
Heart Rate
68
BPM
1 min ago
C RESULT
▲ 三個狀態的視覺差異示意：愛心層次、數值顯示、輔助文字都會變化
STEP 01
轉成 component 並建立 variant property
選取剛才做好的卡片，按 Create Component。在右側屬性面板新增一個 variant property，命名為 State，三個值分別是 Idle / Measuring / Result。複製兩份，就有三個 variant 了。
STEP 02
調整 Idle 狀態
回到 Idle variant，把愛心的多層結構收縮到最小——最外面幾層直接把 scale 設成 0.8、opacity 調到 0。中央的愛心保持顯示但稍微暗一點。BPM 數字改成「—」或隱藏，底下那行時間戳清空。這是等待使用者點擊的安靜狀態。
STEP 03
調整 Measuring 狀態
在 Measuring variant，把愛心的外層全部展開到設計時預期的大小跟透明度。中央愛心可以放大到約 1.05 倍，製造「正在跳動」的感覺。文字區切到「MEASURING」。這個狀態的視覺重點是「動能感」——每一層都比 Idle 更外擴、更亮。
STEP 04
調整 Result 狀態
這個版本就是 Part 1 畫的那個，基本上不用動——愛心是最大、BPM 是 68、時間戳是「1 min ago」。確認所有元素都在就好。
CHAPTER 05 · PART 3
接上互動與 Smart Animate
三個狀態都畫好之後，切到 Figma 的 Prototype 頁籤，開始把它們串起來。這就是真正讓卡片「會動」的關鍵步驟。
STEP 01
Idle → Measuring 的連線
選取 Idle variant，從它的連接點拉一條線到 Measuring。觸發事件選 On Click（或 On Tap）。動畫類型選 Smart Animate，緩動建議 Ease Out，時間 300–400 毫秒。點擊之後愛心會從收縮狀態展開。
STEP 02
Measuring → Result 的連線
一樣的做法，從 Measuring 拉線到 Result。觸發事件 On Click、Smart Animate、時間可以稍長 400–500 毫秒，讓結果「降落」的感覺比較明顯。BPM 數字會在這個過渡中從「—」切換出現，smart animate 會自動處理交叉淡入。
STEP 03
Result → Idle 的循環
最後把 Result 拉回 Idle，同樣用 On Click。這樣整個卡片就是一個可以重複互動的循環元件。完成後可以先在 Figma 的 presentation mode 試跑一遍，確認三段過渡都順。
到這一步為止，你做的所有事情都是 Figma 原生功能。如果今天沒有 LottieFiles 外掛，這個原型在 Figma 裡也能跑。真正的差別是下一步——怎麼把它從 Figma 裡「取出來」。
CHAPTER 06 · PART 4
透過外掛匯出 dotLottie
到了見證奇蹟的時候。這一段的具體 UI 步驟會隨外掛版本更新，以下寫的是原則，實際操作以你開啟外掛當下看到的介面為準。
STEP 01
安裝 LottieFiles for Figma 外掛
從 Figma Community 搜尋 LottieFiles 安裝。第一次使用需要登入 LottieFiles 帳號，免費註冊即可。
STEP 02
選取要匯出的範圍
在 Figma 裡選取你做好的卡片 component 或一個有在 prototype flow 裡的實例。確定你要匯出的互動入口是被選中的那個元件。
STEP 03
切換到 State Machine 模式
開啟外掛後，在匯出選項裡找到與 State Machine 有關的開關或選項。切換之後預覽區會變成可互動的模式——你可以直接在那個視窗裡用滑鼠點卡片，看狀態有沒有正確切換。這是匯出前的最後驗收。
STEP 04
匯出為 dotLottie 檔
預覽確認沒問題後，選擇 dotLottie（副檔名 .lottie）格式匯出。這個格式會把狀態邏輯一起封裝進去，才能在 web 或 App 端還原互動。如果選成 JSON、GIF、MP4 都會失去互動性，只剩畫面。
CHAPTER 07 · DEBUGGING
除錯與限制
第一次做的時候很可能會遇到預覽跟 Figma 原本看到的不太一樣。這是正常的，有幾個常見的狀況與應對方式。
複雜特效可能會失真。漸層通常沒問題，但某些進階的 blur、特殊混合模式、mask 效果可能在轉 Lottie 的過程會簡化或被略過。如果你的愛心有用到高斯模糊做光暈，先試試看能不能過，不行的話改用多層半透明色塊疊加模擬。
圖層名稱影響 smart animate。Figma 的 smart animate 是靠圖層名稱對位的。三個 variant 裡的對應元素要用同樣的名稱（例如都叫「heart-layer-1」「heart-layer-2」），這樣動畫才會正確地從 A 態變形到 B 態。名稱對不上的元素會變成淡入淡出，不會有補間。
先做最小可行版本測試。不要一次把整張卡片做到完美才匯出。建議先做一個只有兩個狀態、三個圖層的極簡版本，匯出測試能不能跑，再慢慢加細節。這樣遇到問題比較好定位是哪個元素不支援。
產品端要用 dotLottie player。最後的 dotLottie 檔要能正常跑 state machine，產品端必須使用支援狀態機的 dotLottie player 版本。如果你們的網站或 App 還在用舊版 Lottie player，要先升級執行環境，這層工程師要配合。
觸發類型保守選擇。點擊與 hover 是最保險的觸發類型，這兩種是外掛明確支援的。如果你想玩更進階的 After Delay 自動轉場、drag、keyboard 等，建議先做小測試確認能不能過，不要在最後一步才發現。
CHAPTER 08 · SUMMARY
重點整理
數據卡片類型的互動是 State Machines 最適合練習的題材：一個元件、幾個狀態、點擊驅動切換。
用 component variants 建立狀態比用獨立 frame 乾淨很多，而且 variant 本身就是天然的 state，外掛能直接辨識。
smart animate 的補間效果建立在圖層結構上，三個 variant 的對應圖層要同名，動畫才會正確對位。
只用點擊與 hover 觸發事件最保險，這兩種 LottieFiles State Machines 明確支援。其他進階觸發建議先測試再投入製作。
先做最小可行版本再擴張細節。遇到失真問題通常可以用更簡單的圖層結構模擬得到。
匯出一定要選 dotLottie 格式才會保留互動。其他格式只剩畫面播放。
RESOURCES
