---
title: "Figma State Machines 實戰教學：做一張會互動的數據卡片"
slug: figma-state-machines-heart-rate
url: https://rar.design/posts/figma-state-machines-heart-rate
published_at: 2026-04-13
modified_at: 2026-04-14
author: "設計師 Riven"
category: "UI/UX 設計"
tags: ["figma"]
access: public_access
---

# Figma State Machines 實戰教學：做一張會互動的數據卡片

> 用 component variants 與 smart animate 組出三個狀態，再透過 LottieFiles 外掛匯出成 dotLottie。以 Heart Rate 類型為例的完整拆解

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-04-13

TUTORIAL · INTERACTIVE CARD做一張會自己跳動的數據卡片從 Figma 接完流程到匯出互動檔用 Figma State Machines 拆解「Heart Rate 卡片」這類型的互動是怎麼組成的：一個元件、三個狀態、兩段過渡，加上點擊觸發，最後匯出成可以直接在 web 或 App 裡跑的 dotLottie 檔。CONTENTS01為什麼從這個練習開始 02先拆解：三個狀態與兩段過渡 03Part 1｜畫出靜態版面 04Part 2｜用 Variants 建三個狀態 05Part 3｜接上互動與 Smart Animate 06Part 4｜透過外掛匯出 dotLottie 07除錯與限制 08重點整理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，循環。AIdleWAITING FOR TAP愛心收縮・數字未顯示TAP→BMeasuringIN PROGRESS愛心擴張・光暈發散TAP→CResult68 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 MEASUREA IDLEHeart RateMEASURING...B MEASURINGHeart Rate68BPM1 min agoC 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 01Idle → Measuring 的連線選取 Idle variant，從它的連接點拉一條線到 Measuring。觸發事件選 On Click（或 On Tap）。動畫類型選 Smart Animate，緩動建議 Ease Out，時間 300–400 毫秒。點擊之後愛心會從收縮狀態展開。STEP 02Measuring → Result 的連線一樣的做法，從 Measuring 拉線到 Result。觸發事件 On Click、Smart Animate、時間可以稍長 400–500 毫秒，讓結果「降落」的感覺比較明顯。BPM 數字會在這個過渡中從「—」切換出現，smart animate 會自動處理交叉淡入。STEP 03Result → Idle 的循環最後把 Result 拉回 Idle，同樣用 On Click。這樣整個卡片就是一個可以重複互動的循環元件。完成後可以先在 Figma 的 presentation mode 試跑一遍，確認三段過渡都順。到這一步為止，你做的所有事情都是 Figma 原生功能。如果今天沒有 LottieFiles 外掛，這個原型在 Figma 裡也能跑。真正的差別是下一步——怎麼把它從 Figma 裡「取出來」。▲ LottieFiles 官方完整教學：不寫程式做互動動畫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 等，建議先做小測試確認能不能過，不要在最後一步才發現。▲ 延伸參考：LottieFiles 官方的 Radial Menu 多狀態元件教學（Part 2，輸入與轉場）CHAPTER 08 · SUMMARY重點整理→數據卡片類型的互動是 State Machines 最適合練習的題材：一個元件、幾個狀態、點擊驅動切換。→用 component variants 建立狀態比用獨立 frame 乾淨很多，而且 variant 本身就是天然的 state，外掛能直接辨識。→smart animate 的補間效果建立在圖層結構上，三個 variant 的對應圖層要同名，動畫才會正確對位。→只用點擊與 hover 觸發事件最保險，這兩種 LottieFiles State Machines 明確支援。其他進階觸發建議先測試再投入製作。→先做最小可行版本再擴張細節。遇到失真問題通常可以用更簡單的圖層結構模擬得到。→匯出一定要選 dotLottie 格式才會保留互動。其他格式只剩畫面播放。RESOURCES延伸資源→ Figma State Machines 是什麼？完整功能介紹（前篇）→ LottieFiles for Figma 外掛官方頁→ dotLottie State Machines 規格介紹→ LottieFiles 外掛（Figma Community）COURSE ✦ Figma 完整教學Figma 完整課程｜RAR 設計攻略從 auto layout、component variants 到 Interactive Components，這篇文章用到的所有 Figma 基礎都在課程裡從零教起。原型互動與 prototype 是課程裡的重要章節。查看課程內容 →訂閱制 ✨ AI × 設計趨勢AI 覺醒設計應用攻略｜AIWAKENAI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →