Figma State Machines 完整介紹：原型流程一鍵變成可互動的 dotLottie 檔
2026年4月13日 下午 1:54
UI/UX 設計FEATURE · DESIGN TOOLING
原型不是給開發者重做的草圖
而是可以直接出貨的互動本身
LottieFiles 把 Figma 原型流程變成一個檔案就能跑的互動動畫。一鍵匯出 dotLottie state machine，網頁、iOS、Android 都能直接播。
CONTENTS
CHAPTER 01 · THE PROBLEM
原型動畫的老問題
設計師花了三天，把一個按鈕的 hover、press、loading、success 四個狀態都在 Figma 裡接好了流程。每一段過渡的時間、緩動、位移都調到滿意。打開 prototype mode，按下播放，畫面如預期跑了一遍。
然後呢？
然後就交給工程師，請他「照這個感覺做出來」。工程師看著錄影檔，估了三天，做出來的版本卡卡的、時間軸抓不準、緩動曲線跟原本對不上。設計師再開一輪 review，標註截圖、加註解、解釋邏輯。一個小元件來回三五次是常態。
這不是誰的錯，是整個工具鏈的問題。Figma 的原型只活在 Figma 裡，跨出設計檔的那一刻它就死了，剩下一段沒辦法執行的影片參考。
過去十年我們一直在處理同一件事：把設計師腦子裡的互動翻譯給開發者，再眼睜睜看著翻譯版本失真。
CHAPTER 02 · WHAT IS IT
Figma State Machines 是什麼
LottieFiles 在他們的 Figma 外掛裡加了一個新模式，可以把你在 Figma 裡接好的 prototype 流程，直接匯出成一個會跑互動的 dotLottie 檔。不是錄影、不是 GIF、不是 JSON 動畫片段，是一個帶有狀態邏輯的動畫檔案。
這個檔案丟到網頁、iOS、Android 上都能播，而且使用者點擊、滑鼠移上去、放開的時候，動畫真的會回應。它本身就是一個 state machine——記得自己現在在哪一個狀態、根據觸發事件決定下一個跳到哪。
用一句話講：設計師在 Figma 裡接好的原型互動，現在會以可執行的形式，跨平台地活下去。
核心差異
傳統 Figma to Lottie 只能匯出單向播放的動畫片段。Figma State Machines 匯出的是帶有狀態與觸發邏輯的互動單元——按一下會切到 loading、放開會回到 idle、success 之後會自動跳轉。這層邏輯過去都得寫程式才能做。
CHAPTER 03 · CAPABILITIES
三種你可以做的事
官方說 Figma State Machines 主要支援設計師最常用的三種互動模式。我整理了一下，分別說明它們的應用情境。
01
Frame 對 Frame 的原型流程
最常見的場景。你在 Figma 裡用 prototype mode 把多個 frame 串起來，每個連線設定好觸發事件（點擊、hover、自動跳轉），加上過渡動畫。匯出之後，這整套流程會變成一個可以互動的動畫單元。toggle 切換、抽屜展開、tab 切頁這類元件特別適合。
02
Frame 內巢狀物件的觸發
不是整個 frame 切換，而是 frame 裡面某個元素被點到才會動。例如卡片裡的愛心圖示按下會收藏、輸入框被點到會展開鍵盤提示。這種精準到「子物件」層級的互動，過去得透過 component variant 拼湊，現在可以直接匯出。
03
Component Variant 的狀態切換
如果你已經把按鈕、開關、輸入框做成有 variant 的 component，那你的設計檔本身就是一個天然的 state machine。default、hover、active、disabled 這些 variant 各自就是一個狀態，匯出後會直接被識別成不同 state，連結邏輯也會被保留。對於有設計系統的團隊來說，這條路最順。
CHAPTER 04 · HOW TO USE
實際操作流程
整個流程比想像中簡單。如果你已經有在 Figma 裡接好的 prototype，匯出大概只要兩三分鐘。
STEP 01
安裝 LottieFiles for Figma 外掛
在 Figma Community 搜尋 LottieFiles 安裝。第一次開啟需要登入 LottieFiles 帳號，免費註冊即可。
STEP 02
把你的 prototype 流程整理乾淨
確認每個 frame 之間的連線都設定了觸發事件，過渡動畫的時間與緩動都調好。建議幫起始 frame 命名一個 flow starting point，比較好辨識。
STEP 03
在外掛裡切換到 State Machine 模式
開啟外掛後選擇匯出原型流程的選項，切到 State Machine 模式。這裡會顯示一個預覽，你可以直接在預覽視窗裡點擊、hover，測試互動是不是符合預期。
STEP 04
測試通過後匯出 dotLottie 檔
官方建議匯出 dotLottie 格式（副檔名 .lottie），檔案小、跨平台支援好，而且 state machine 的邏輯都封裝在裡面。也可以選擇匯出成 JSON、GIF、MP4，但只有 dotLottie 保留互動性。
STEP 05
需要微調就丟進 Lottie Creator
如果想進一步調整時間軸、緩動曲線、或新增更複雜的條件邏輯，可以把檔案打開在 Lottie Creator 裡編輯。Figma 適合做結構，Lottie Creator 適合做精修。
CHAPTER 05 · HANDOFF
對開發者交付的影響
這個功能真正改變的不是「設計動畫」，而是「設計動畫怎麼進入產品」這條路。
LottieFiles 同時更新了 Figma Dev Mode 整合。開發者打開設計檔的 Dev Mode 之後，可以直接拿到三樣東西：
EMBED CODE
針對 web、iOS、Android 各平台自動產生的嵌入程式碼片段，貼進專案就能用。
CDN ASSET LINK
直接連到 LottieFiles 的 CDN，設計師那邊更新檔案，產品線上的版本同步生效，不需要重新部署。
VS CODE INTEGRATION
官方推出 VS Code 外掛，開發者不需要切回瀏覽器，在編輯器裡就能拿到動畫資產與程式碼片段。
設計與開發之間最大的成本不是技術，而是「來回」。每一輪標註、解釋、修正、再驗收都在燒時間。當動畫變成一個可以直接 import 的檔案，這些來回就消失了。
CHAPTER 06 · LIMITATIONS
限制與注意事項
先把預期校準一下。Figma State Machines 雖然讓設計師多了一條交付路徑，但它不是萬能的。
不是每個 Figma 功能都支援。有些進階的 Figma 特效（複雜遮罩、特殊混合模式、blur 變化等）在轉成 Lottie 的過程會失真或被略過。最穩的做法是先做一個小元件測試匯出，確認支援度再投入大規模製作。
適合元件層級，不適合整頁。State machine 的價值在於「一個元件有多種狀態」，例如按鈕、開關、卡片、loading 動畫。整頁切換或複雜的多步驟流程還是用真實的程式碼處理比較合理。
需要 dotLottie player。產品端如果還在用舊版的 Lottie player，要先升級到支援 state machine 的 dotLottie player 才能跑互動。原本只用單向播放的 Lottie 場景不受影響，但要用 state machine 就一定得升級執行環境。
免費帳號有額度限制。LottieFiles 採訂閱制，免費方案的匯出與 workspace 容量都有限制，團隊要長期用建議直接看付費方案。
CHAPTER 07 · APPLICATIONS
設計師可以怎麼用
講完功能與限制，回到比較實際的問題：在你目前的工作流裡，這個工具什麼時候會用到？
場景 01 · 設計系統的微互動
design system 裡那些「應該要動」的元件——按鈕的 hover 反饋、開關的切換、checkbox 的勾選動畫、loading spinner——全部可以變成設計師可控的資產，產品端只要 import 一次，整個系統的微互動就統一了。
場景 02 · 行銷網頁的互動點綴
產品官網、landing page 上那些 hover 變色的圖示、scroll 觸發的小動畫、滑鼠移上去會展開的 feature 卡片。這些東西過去要嘛交給前端寫 CSS，要嘛找 motion designer 出 After Effects。現在設計師自己在 Figma 裡接好，就能直接出貨。
場景 03 · App 的功能引導動畫
onboarding 教學、empty state 的圖示、權限請求頁面的示意動畫。這些通常需要呼應使用者操作，過去的解法是放一段不會互動的 Lottie，現在可以做成真的會回應點擊與滑動的版本。
這個工具的真正價值不是讓設計師「能做更多動畫」，而是讓設計師對成品的最終樣子擁有更多控制權。少了一道翻譯，失真就少了一層。
CHAPTER 08 · SUMMARY
重點整理
LottieFiles for Figma 新增 State Machines 模式，可以把 Figma 原型流程匯出成可互動的 dotLottie 檔。
支援三種互動：frame 對 frame 流程、frame 內子物件觸發、component variant 狀態切換。
匯出的 dotLottie 檔在 web、iOS、Android 都能直接播，不需要工程師重做。
搭配 Figma Dev Mode 整合，自動產生嵌入程式碼、CDN 連結、VS Code 整合，大幅縮短交付路徑。
適合元件層級的微互動，不適合整頁流程。產品端需升級到支援 state machine 的 dotLottie player。
設計系統的微互動、行銷網頁的點綴動畫、App 的功能引導，是目前最值得試的三個應用場景。
RESOURCES
