Rive 是什麼？Flash 收掉十五年，設計師終於等到能寫程式的動效工具

INTERACTIVE DESIGN · 2026

▲ Rive 把自己定義成四件事的組合：編輯器、檔案格式、runtime、渲染引擎。這張圖幾乎就是整篇文章的目錄。圖片來源：Rive

SHOWCASE · MADE WITH RIVE

六個真的在跑的東西

解釋之前先看東西。下面六個畫面全是 Rive 官方公開的案例，涵蓋樂團官網、手遊、金融 App、品牌指南網站與遊戲介面。每一個都是真的上線在跑的產品，不是概念稿，也不是 Dribbble 上那種只能看的動圖。

Megadeth 可探索的樂團宇宙

整張等距地圖可點可逛，彩蛋藏在建築裡。一份 .riv 撐起整個官網體驗。

遊戲 HUD 與武器面板

血量、彈藥、雷達全部綁 Data Binding，數值改了介面自己動，不必重出美術。

Magic Sort 手遊

Blu Studios 做的倒水解謎遊戲，下載超過六十萬次，首日留存 43%。

Hero 每日助理 App

整支 App 的介面與轉場都在 Rive 裡完成，單一捲動動線加上語音操作。

Dropbox 互動品牌指南

品牌規範做成可以玩的網站，連緩動曲線都能當場拖著看。

Kredivo App 內遊戲活動

印尼支付 App 的首場遊戲化行銷，八週從零上線，開發時間砍半。

想看更集中的作品量，Rive 官方每季會辦主題挑戰賽，得獎公布影片基本上就是一支社群作品輪播。這支是今年八月的直播與轉播介面挑戰賽，三分鐘看完別人能把 Rive 玩到什麼程度：

CHAPTER 01 · WHAT IS IT

交出去之後就不像了

每個做過動效的設計師都經歷過同一件事。你在 After Effects 裡把一顆按鈕的回彈調到剛剛好，那個 0.08 秒的過衝、那個微微的 overshoot，你來回改了四十次。然後你把檔案交出去。兩週後打開測試版，按鈕在跳，但跳得像另一個人做的。

問題不在工程師偷懶。問題在於你交出去的東西根本不是動畫，是一份「動畫的描述」。工程師要拿著那份描述，用另一套語言重新蓋一次。中間掉了什麼，沒有人說得清楚。

Rive 想解決的就是這件事。它不是一個匯出外掛，而是四樣東西綁在一起賣：一個編輯器、一種叫 .riv 的檔案格式、一組跨平台 runtime，以及一顆自己寫的向量渲染引擎。你在編輯器裡看到的畫面，就是最後上線那個畫面，因為跑的是同一套引擎。

Runtime 的清單長到有點誇張：JavaScript、React、React Native、Flutter、iOS、Android、C++、Unity、Unreal、Defold。工程師那邊要做的事情，通常就是把 .riv 檔載進來，然後餵資料。互動邏輯本身，你在設計端就寫完了。

CHAPTER 02 · WHY NOW

Flash 死後的第十五年

今年二月，Rive 官方發了一篇標題很不客氣的文章：Adobe Animate 已經進入維護模式，而 Rive 才是 Flash 應該長成的樣子。一家新創直接對著 Adobe 的墓碑講話，這在設計圈不算常見。

▲ Rive 官方畫的血統圖：SWF 到 Animate 到死亡，再到 Rive。圖片來源：Rive

要理解這句話為什麼有份量，得先想清楚 Flash 當年真正厲害的地方在哪。不是補間動畫，也不是那個時代的網頁小遊戲。Flash 厲害的是它讓設計、動畫、程式在同一個檔案裡共存，一個人就能從草稿做到能玩的東西。2010 年代那波移動裝置轉型把 Flash 判了死刑之後，我們過了十五年切割的日子：AE 做動畫、Lottie 轉檔、工程師再把互動刻一次。中間每一次交接都在掉東西。

Rive 過去幾年一直在往回蓋這條線，但缺最後一塊：程式。今年 1 月 13 日補上了。這也是為什麼我會覺得 2026 年才是 Rive 值得認真看的一年，而不是 2023 或 2024。

CHAPTER 03 · HOW IT WORKS

四段管線與一張狀態圖

Rive 的架構可以拆成四段，理解了這四段，後面所有功能都會歸位。

State Machine：從排時間軸變成畫規則

這是 Rive 的核心，也是設計師最大的門檻。你不再是「把 Idle 動畫排在 0 到 30 影格，Hover 動畫排在 30 到 45」，而是畫一張圖：這裡有 Idle、Hover、Pressed 三個狀態，箭頭標明什麼條件會從一個跳到另一個，中間怎麼混合。使用者實際做了什麼，狀態機自己決定該播什麼。

熟悉這個概念的人可能會覺得眼熟，因為 LottieFiles 也把類似的東西搬進了 Figma，我先前寫過 Figma State Machines 的完整介紹。差別在於 Rive 的狀態機從 2022 年就是產品核心，成熟度與可控程度都是另一個量級。

Data Binding：設計與工程之間的合約

2025 年 4 月推出的 Data Binding 是第二個關鍵。Rive 官方的說法很精準：把它想成設計與工程之間的一份合約，工程師把資料推到合約上，設計師把 UI 元件接上去。之後雙方各改各的，不用開會對規格。同年 7 月再加上 Lists、Images、Artboards 的綁定能力，等於一份 .riv 檔可以動態長出整串清單。

CHAPTER 04 · SCRIPTING

設計工具裡的一個真編輯器

▲ 2026 年 1 月 13 日，Scripting 正式成為 Rive 平台的一部分。圖片來源：Rive

多數設計工具處理程式的方式很敷衍：塞一個文字框，或者丟給外掛生態系去解決。Rive 的做法是把一個完整的程式環境搬進畫布旁邊（熱重載、命令面板、佈景主題、全螢幕模式，還能兩個人同時編輯同一支腳本）。對寫過程式的人來說這些都不稀奇，稀奇的是它們現在跟你的時間軸與設計系統住在一起。

語言選的是 Luau，Roblox 那套 Lua 的型別化分支。編輯器會從 Rive 引擎 API 自動生出型別定義，所以自動補全、驗證、重構都是真的能用，不是裝飾。官方這支入門影片把整個環境走過一遍，看完大概就知道自己吃不吃得下：

寫腳本前要先選一個 Protocol，這是 Rive 刻意加的護欄。目前有五種：Node 管自訂繪製、Converter 管形狀與變形資料、Layout 管排版邏輯、Test 管驗證、PathEffect 管路徑上的程序化效果。選好之後編輯器會生一份有型別的骨架，你能碰的範圍被框住了。這聽起來像限制，實際上是在防止一支腳本把整個檔案搞成大雜燴。

能做什麼？粒子系統、拖尾、程序化爆散；重力、碰撞、彈簧約束這類不是硬 key 出來的次級運動；自訂排版規則，像是「排到第幾個就換成堆疊」這種官方沒內建的邏輯。以前這些只能提功能請求然後等，現在可以自己寫。

AI Agent：給不寫程式的人的那道門

Rive 自己也知道「scripting」這個詞對設計師來說有多勸退，所以同一天推出了 AI Coding Agent：幫你生程式、在情境裡回答問題、把改動以 inline diff 呈現讓你逐條接受或拒絕、順便把建 view model 這種瑣事扛走。

今年 4 月底它們調整了一次策略，值得注意：Agent 開放給所有人，包含免費用戶，額度按小時回充。付費的 Cadet 方案反而被明確定位成「最便宜的匯出方案，不是 AI 方案」，新的 Cadet 不含 AI credits。Voyager 才有進階模型與每席每月 20 美元的 credits，並且可以帶自己的 API key。這個分層拆得很誠實，我蠻欣賞的。

CHAPTER 05 · GETTING STARTED

第一天該怎麼開始

最省時間的路徑不是從空白畫布開始，而是先去 Marketplace 找一個接近你想做的檔案，remix 一份下來拆開看。看別人的狀態機怎麼接，比看十支教學影片有用。Rive 官方這支互動選單的快速上手影片是我目前看過最適合第一天的：

實際的順序我會這樣排。先註冊免費帳號，編輯器功能是全開的，字體與音訊也免費。接著挑一個小到不能再小的目標，例如一顆有 Idle 與 Hover 兩個狀態的按鈕，把它從頭做到底，重點是走完整條路而不是做得好看。第三步才是接 Data Binding，讓一個數字從外面推進來改變畫面。做到這裡，你已經摸到 Rive 八成的價值了。

要有心理準備的是：免費帳號能做能學，但不能匯出 .riv。學習階段完全夠用，要真的出貨才需要升級。

CHAPTER 06 · IN PRACTICE

誰真的拿它出貨了

▲ BUCK 與 LinkedIn 合作的首支 Year in Review，全部用 Rive 建成，支援 207,360 種可能的使用者路徑與三種語言。圖片來源：Rive

開頭那六個畫面只是抽樣。Spotify Wrapped 2025、LinkedIn 的第一支年度回顧、Duolingo 那個 AI 視訊通話裡會翻白眼的 Lily、Brilliant 的數學家教角色 Koji，還有 Figma 自己的官網首頁，全都是 Rive。這幾個案子有一個共通的技術模式，值得抄：設計端交付的是「互動本身」，工程端只負責把資料推進去。二十萬種路徑不是工程師寫了二十萬個分支，是設計師把規則寫在檔案裡。

遊戲引擎端：設計師直接出 UI

遊戲圈是 Rive 最硬的戰場之一。傳統做法是美術出圖、程式在引擎裡重刻一次介面，改個按鈕狀態要跑一輪工單。Rive for Unity 今年一月上架 Unity Asset Store 之後，設計師可以把整套選單、狀態機、資料綁定做完直接丟進專案。下面這張官方圖把兩邊放在一起看，左邊是 Rive 編輯器裡的狀態機與資料面板，右邊是遊戲裡跑起來的樣子：

▲ 左邊是 Rive 編輯器的資料面板與狀態機，右邊是同一份檔案在 Unity 裡跑起來的遊戲選單。圖片來源：Rive

用 Claude Code 指揮 Rive 編輯器

這是我認為 RAR 讀者最該去試的一條。Rive 桌面版的 Early Access 內建了一個 MCP server，開著編輯器就會在本機起一個端點，Claude Code、Cursor 之類的 MCP 客戶端可以直接連上去下指令：建 View Model、生一個有二十個狀態兩層的 State Machine、鋪一套 Layout、畫形狀。指令跑完之後打一句 End Prompt，AI 才會真的動你的檔案，這道確認手續設計得不錯。官方六月釋出的這支實作影片直接示範了整個流程：

如果你還沒搞懂 MCP 到底在幹嘛，可以先看 MCP 是什麼；想直接動手的話，Claude Code 設計師完整指南 那篇的設定流程可以照著走。把重複的骨架工作交給 AI，把時間留給調手感，這條分工線我目前覺得很合理。

網站端：丟進 Framer 就會動

如果你的產出主要是網站，Rive 從 2022 年就原生支援嵌進 Framer，Webflow 與 Wix Studio 後來也跟上。這代表一個不寫 code 的設計師，可以自己把一支有狀態的互動動畫放上正式網站，中間沒有任何人需要介入。以接案來說，這是很硬的差異化。

CHAPTER 07 · PRICING

免費做，出貨才付錢

2025 年 10 月 Rive 動了一次定價手術，邏輯很清楚：編輯器永久免費，字體與音訊也全部免費，但匯出移到付費方案。創辦人的說法是，平台真正的成本與複雜度發生在「作品跑到正式環境」那一刻，所以把收費點放在那裡最公平。

有兩件事我覺得該講白。第一，Rive 檔案不會回頭連線驗證授權，你已經上線的東西不會因為停止付費就壞掉，這點官方寫得很明確。第二，runtime 是 MIT 授權開源，沒有另外的 runtime 授權費。

真正的成本不在錢

九美元不是門檻，思維切換才是。狀態機這個概念對習慣時間軸的人來說是實打實的重學，而且會有一段「明明每個狀態都對，接起來就是不對」的撞牆期。Rive 官方甚至寫過一篇除錯教學，開頭第一句就說：大部分的 bug 不在程式裡，在你檔案的接線方式。這句話我讀了很有共鳴。

另外幾個現實限制：MCP 目前只在桌面版 Early Access，網頁版沒有；Libraries 這種團隊級的設計系統功能要 Voyager 起跳；免費版只有一個 project，開始接案就會不夠用。

CHAPTER 08 · COMPARED TO

跟你手上那幾把刀怎麼分工

對照 After Effects

AE 是影格思維，你在導演一段固定長度的表演，最後輸出的是影片或一份要被翻譯的描述。Rive 是即時思維，你在定義一套會被使用者觸發的行為。要做品牌動畫、片頭、廣告，AE 沒有對手。要做會被戳的東西，AE 從一開始就不是為此設計的。

對照 Lottie

Lottie 解決的是「怎麼把 AE 動畫變小、變成能在 App 裡播的東西」，本質上仍是線性播放。Rive 是狀態驅動，播什麼由當下情境決定。Rive 支援匯入 Lottie，但他們去年底特地寫了一篇文章講清楚：那個功能是給你搬家用的，不是要你長住。

對照 Figma Motion

今年 Config 之後，Figma Motion 讓很多人以為不需要另一個動效工具了。分工其實蠻清楚的：Figma Motion 的主場是原型、提案、網頁層級的動效，優勢是跟你的設計檔零距離。Rive 的主場是跨平台出貨（遊戲引擎、車機、低階裝置、需要吃即時資料的介面）。這些地方 HTML 那一套通常撐不住，這也是 Rive 官方反覆強調的定位。

實務上我不會叫任何人二選一。稿子在 Figma、動效在 Rive、網站在 Framer，這三段拼起來剛好把整條線補完。

CHAPTER 09 · TAKEAWAYS

你交出去的是成品還是參考

在設計圈待了快十年，我看過太多動效被「翻譯」掉的案例。那個過程消耗的不只是時間，更多是設計師對細節的堅持（當你知道調再細也會在交接時掉，你就會停止調）。

Rive 難的地方從來不是介面，是你要換一個腦袋：不再排時間軸，而是定義「這東西在什麼情況下該長什麼樣」。那件事比較像寫規格，不太像做動畫。撞牆期是真的存在的。

但跨過去之後，你交出去的檔案就是最終上線的那個東西，不是一份等著被別人重做一次的參考。這幾年 AI 讓「產出畫面」變得越來越不值錢，能定義行為、能交付可執行成品的設計師，位置反而更穩。從這個角度看，Rive 今年補上程式那一塊的時機，剛剛好。

RELATED READS

延伸閱讀

EXTRA · LINKS

官方資源

COURSE

Framer 網站設計課：從零開始

Rive 動畫要放上正式網站，最短的路徑就是 Framer。這堂課帶你把網站這一段先蓋起來。

了解課程 →

SUBSCRIPTION

AI 覺醒設計應用攻略

AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。

了解訂閱 →

常見問題

Q：Rive 是免費的嗎？

A：編輯器免費，而且是全功能免費，字體與音訊也不收費。免費帳號有 3 個協作檔與 1 個 project 的限制，最關鍵的是不能匯出 .riv 檔。要把作品放到正式產品上，需要年繳每月 9 美元的 Cadet 方案起跳。

Q：不會寫程式可以用 Rive 嗎？

A：可以，而且大部分人都是這樣用的。狀態機、Data Binding、Layouts 全部是視覺化操作，不寫一行程式也能做出完整的互動元件。Scripting 是給想要更多控制權的人的延伸選項，加上 AI Agent 之後，門檻又降了一階。

Q：Rive 跟 Lottie 差在哪？

A：Lottie 是把 After Effects 動畫壓縮成可播放格式，本質是線性播放。Rive 是狀態驅動，同一個檔案會根據使用者行為與外部資料決定當下該呈現什麼。Rive 支援匯入 Lottie 檔，但官方定位那是遷移用的功能，不是長期工作流。

Q：Rive 做的東西效能會不會很吃資源？

A：Rive 自己寫了一顆向量渲染引擎，設計目標就是在遊戲引擎、車用系統、低階裝置這些 HTML 方案撐不住的環境跑得順。.riv 是向量格式，檔案通常比同等的影片或圖片序列小很多。實際表現仍取決於檔案怎麼組，官方有專門的檔案最佳化指南。

Q：Rive 可以跟 Figma 一起用嗎？

A：可以，Figma 的圖形能直接複製貼上到 Rive 編輯器。實務上常見的分工是：視覺與版面在 Figma 完成，互動與動效搬到 Rive 做，最後輸出給前端或直接嵌進網站建構工具。

Q：Rive 能接 Claude Code 嗎？

A：能。Rive 桌面版的 Early Access 內建 MCP server，Claude Code、Cursor 等 MCP 客戶端可以連上本機端點，用自然語言請 AI 建 View Model、State Machine、Layout 或形狀。要注意這功能目前只在 Windows 與 macOS 的桌面版提供，網頁版沒有。

Q：Rive 適合接案設計師嗎？

A：適合，而且可能是投報率最高的族群之一。你能交付的東西從「一份動效參考」變成「可以直接上線的互動元件」，議價空間完全不同。要留意的是免費版只有 1 個 project，同時接多案會不夠用。