Figma和AE哪個適合做動效？保姆級的深度分析來了！

在 Figma 的學習社群中，有很多新人會問做動效是用 Figma 還是用 AE 好？

這是個沒辦法直接回答的問題，因為它們適用的范圍不同，而且各自都有局限性，所以做一篇分享來做完整的回復。

更多動效干貨：

一、Figma 和 AE 的區別

理解 Figma 和 AE 首先就要理解交互動效和特效動畫之間的區別。

交互動效是用于反饋交互操作的動畫，是由頁面 UI 元素的位移、縮放、旋轉、透明度變更等效果實現，它的目標是用于提高交互操作的可理解性和順滑度。

特效動畫則是用非 UI 元素和特殊效果（如粒子、3D、扭曲）組成的視覺動畫，雖然在應用內也需要通過交互操作觸發，但它的目標是為了提升視覺的豐富性，在原有的交互效果基礎上增加“額外”的效果，來吸引用戶的注意。

對于 Figma 來說，它不是一個動效軟件（比如 Protopie）而是一個 UI 設計軟件，只能實現一些基礎的交互動效，一種是預設的基礎頁面操作、跳轉效果，另一種是“閹割版”關鍵幀動畫 Smart Animate。

雖然完整的關鍵幀動畫可以實現很多復雜、有趣的效果，但 Figma 的關鍵幀動畫限制很多（很多屬性缺失且不能生效），且沒有時間軸控制（一次動畫內的所有元素運動時長、緩動一致），不像 Protopie 或 AE 可以單獨控制動畫中每個元素的時間線和緩動，這就導致它只能實現一些簡單的、殘缺的動效。

而 Adobe AE 被開發出來的目標，是實現復雜專業的影視動畫特效，想做復雜的 UI 特效動畫自然也不在話下。

但是，實現一些偏基礎、簡單的 UI 動效（Figma 做不了的那種），AE 就顯得非常不適用。它存在下面這些問題：

1. AE 只能制作視頻，制作交互動效還需要先設計整個動畫的順序、分鏡。
2. AE 做出來的動畫只能“看”，不能“用”，看動畫演示和真實操作的反饋感受差異巨大。
3. AE 導出的動畫因為不能交互，必須單獨設計手勢圖形和制作手勢操作動畫。
4. AE 只能做非常規的動效，實現基礎的頁面跳轉功能如翻頁、返回等很麻煩。
5. AE 是位圖軟件，需要額外的考慮 UI 元素的導入和導出，確保可用性。

這里面最嚴重的問題，就是 AE 做出來的動效只能“看”不能“用”，基本等于是飛機稿，存在巨大的不確定性。所以在專業團隊中，不會輕易拿 AE 來做交互動效，而是集中在一些特殊的微動效或如直播的禮物特效等。

并且 AE 的制作效率很低，如果要做的交互動效是 Figma 或者 Protopie 能實現出來的效果，那么 AE 制作出相同效果的所需的時間會比它們多幾倍，其中有很多時間要用于處理交互的順序和手勢的操作表現。

AE 對于 Figma 的交互，就像 PS 對于 Figma 的設計，效果都能實現，但功能冗余、操作復雜。它們有各自適用的場景，要選擇哪個根據具體要做的效果和目標決定。

二、動效軟件的選擇

那么更重要的問題，就是當我們要做動效的時候，應該選哪個軟件？這就要根據動效的類型和使用場景來決定。

1. Figma 的動效應用：

用于制作簡單的頁面交互和跳轉的演示，比如包含十幾個頁面的項目，可以對它們進行連線和頁內滾動設置，用于發給其它團隊成員查看或評審中的演示。

Figma 還可以用 Smart Animate 制作一些非常規的關鍵幀動畫跳轉，但這種跳轉因為缺陷很多，只適合做基礎的動畫 DEMO，用于對復雜動畫的交互做前期方案評審。

至于 Figma 相對進階的一些交互效果，比如色彩模式切換，文本變量應用，條件判斷等，純粹是雞肋，沒有任何去操作實現的必要。

2. Protopie/Principle 的動效應用：

Protopie 和 Principle 是專業的動效軟件，就是用來實現動效的工具。當我們制作復雜動效的最終可交付（提供參數）版本，那么就應該用它們來實現。

它們實現動效的方式都是對元素屬性的變更，比 Figma 更完整全面，實現邏輯也更清晰，都是開發可以通過前端代碼還原出來的效果。

但它們并不適合做十幾或幾十個頁面的跳轉演示，因為產品設計的邏輯就不兼容這個目標。尤其是 Principle 只聚焦再單次交互動畫上，不提供基本的頁面跳轉選項（只能做關鍵幀動畫）。

同時，再強調一個觀點，就是 UI 工具和交互工具是兩種東西，它們無法合并。因為復雜交互動效的實現對圖層的要求和設計階段是沖突的，它們“尿不到一壺”里。所以只要是設計需要項目落地的復雜交互動效，直接使用動效軟件即可。

3. Adobe AE 的動效應用：

AE 做動效包含兩種場景，一種就是為了當飛機稿做的。比如很多新手的偽需求，要做個動效傳到網上還是放在作品集里面。

或者這個效果就是做出來給領導、客戶看看，落不落地根本不考慮。比如常見的大屏項目，大量看起來酷炫的動畫效果都是飛機稿，只是為了過稿而做，只是一個延時宣傳片（約等于肯德基廣告，和實物是兩碼事）。

另一種場景，就是實現一些需要用特殊效果制作出來的小動畫，比如微動效中的矢量變形、或者 IP 動畫中的骨骼控制、3D 圖標的運動效果等。

這些動效是需要落地的，但 UI 和動效軟件完全實現不了，只能用 AE 來做。至于實現是要使用 Lottie，還是導出視頻、GIF、關鍵幀，就是別的話題了。

對于專業設計師來說，會根據動效的需求選擇合適的工具來制作，不會只學習一種，也不會糾結哪個工具更厲害。

結尾

UI 動效的設計可以說技法就那點東西，對動效的理解比軟件使用、技法掌握更重要。而且這技能對一般應聘而言幾乎沒有太大的影響（比較雞肋），所以很多新手把大量時間投入到這里面收益率是很低的。

想要提升學習效率，獲得真實有效的知識和理解，還是建議大家參與我們的正式課程。在別人投入大量時間卻原地踏步的時候，能真正抓住重點和建立系統的專業知識體系，具體課程看這里 ?? https://pro.uisdc.com

歡迎關注作者的微信公眾號：「超人的電話亭」