在 Figma 的學(xué)習(xí)社群中，有很多新人會(huì)問做動(dòng)效是用 Figma 還是用 AE 好？

這是個(gè)沒辦法直接回答的問題，因?yàn)樗鼈冞m用的范圍不同，而且各自都有局限性，所以做一篇分享來做完整的回復(fù)。

一、Figma 和 AE 的區(qū)別

理解 Figma 和 AE 首先就要理解交互動(dòng)效和特效動(dòng)畫之間的區(qū)別。

交互動(dòng)效是用于反饋交互操作的動(dòng)畫，是由頁面 UI 元素的位移、縮放、旋轉(zhuǎn)、透明度變更等效果實(shí)現(xiàn)，它的目標(biāo)是用于提高交互操作的可理解性和順滑度。

特效動(dòng)畫則是用非 UI 元素和特殊效果（如粒子、3D、扭曲）組成的視覺動(dòng)畫，雖然在應(yīng)用內(nèi)也需要通過交互操作觸發(fā)，但它的目標(biāo)是為了提升視覺的豐富性，在原有的交互效果基礎(chǔ)上增加"額外"的效果，來吸引用戶的注意。

對(duì)于 Figma 來說，它不是一個(gè)動(dòng)效軟件（比如 Protopie）而是一個(gè) UI 設(shè)計(jì)軟件，只能實(shí)現(xiàn)一些基礎(chǔ)的交互動(dòng)效，一種是預(yù)設(shè)的基礎(chǔ)頁面操作、跳轉(zhuǎn)效果，另一種是"閹割版"關(guān)鍵幀動(dòng)畫 Smart Animate。

雖然完整的關(guān)鍵幀動(dòng)畫可以實(shí)現(xiàn)很多復(fù)雜、有趣的效果，但 Figma 的關(guān)鍵幀動(dòng)畫限制很多（很多屬性缺失且不能生效），且沒有時(shí)間軸控制（一次動(dòng)畫內(nèi)的所有元素運(yùn)動(dòng)時(shí)長(zhǎng)、緩動(dòng)一致），不像 Protopie 或 AE 可以單獨(dú)控制動(dòng)畫中每個(gè)元素的時(shí)間線和緩動(dòng)，這就導(dǎo)致它只能實(shí)現(xiàn)一些簡(jiǎn)單的、殘缺的動(dòng)效。

而 Adobe AE 被開發(fā)出來的目標(biāo)，是實(shí)現(xiàn)復(fù)雜專業(yè)的影視動(dòng)畫特效，想做復(fù)雜的 UI 特效動(dòng)畫自然也不在話下。

但是，實(shí)現(xiàn)一些偏基礎(chǔ)、簡(jiǎn)單的 UI 動(dòng)效（Figma 做不了的那種），AE 就顯得非常不適用。它存在下面這些問題：

1. AE 只能制作視頻，制作交互動(dòng)效還需要先設(shè)計(jì)整個(gè)動(dòng)畫的順序、分鏡。
2. AE 做出來的動(dòng)畫只能"看"，不能"用"，看動(dòng)畫演示和真實(shí)操作的反饋感受差異巨大。
3. AE 導(dǎo)出的動(dòng)畫因?yàn)椴荒芙换ィ仨殕为?dú)設(shè)計(jì)手勢(shì)圖形和制作手勢(shì)操作動(dòng)畫。
4. AE 只能做非常規(guī)的動(dòng)效，實(shí)現(xiàn)基礎(chǔ)的頁面跳轉(zhuǎn)功能如翻頁、返回等很麻煩。
5. AE 是位圖軟件，需要額外的考慮 UI 元素的導(dǎo)入和導(dǎo)出，確保可用性。

這里面最嚴(yán)重的問題，就是 AE 做出來的動(dòng)效只能"看"不能"用"，基本等于是飛機(jī)稿，存在巨大的不確定性。所以在專業(yè)團(tuán)隊(duì)中，不會(huì)輕易拿 AE 來做交互動(dòng)效，而是集中在一些特殊的微動(dòng)效或如直播的禮物特效等。

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

AE 對(duì)于 Figma 的交互，就像 PS 對(duì)于 Figma 的設(shè)計(jì)，效果都能實(shí)現(xiàn)，但功能冗余、操作復(fù)雜。它們有各自適用的場(chǎng)景，要選擇哪個(gè)根據(jù)具體要做的效果和目標(biāo)決定。

二、動(dòng)效軟件的選擇

那么更重要的問題，就是當(dāng)我們要做動(dòng)效的時(shí)候，應(yīng)該選哪個(gè)軟件？這就要根據(jù)動(dòng)效的類型和使用場(chǎng)景來決定。

1. Figma 的動(dòng)效應(yīng)用：

用于制作簡(jiǎn)單的頁面交互和跳轉(zhuǎn)的演示，比如包含十幾個(gè)頁面的項(xiàng)目，可以對(duì)它們進(jìn)行連線和頁內(nèi)滾動(dòng)設(shè)置，用于發(fā)給其它團(tuán)隊(duì)成員查看或評(píng)審中的演示。

Figma 還可以用 Smart Animate 制作一些非常規(guī)的關(guān)鍵幀動(dòng)畫跳轉(zhuǎn)，但這種跳轉(zhuǎn)因?yàn)槿毕莺芏?，只適合做基礎(chǔ)的動(dòng)畫 DEMO，用于對(duì)復(fù)雜動(dòng)畫的交互做前期方案評(píng)審。

至于 Figma 相對(duì)進(jìn)階的一些交互效果，比如色彩模式切換，文本變量應(yīng)用，條件判斷等，純粹是雞肋，沒有任何去操作實(shí)現(xiàn)的必要。

2. Protopie/Principle 的動(dòng)效應(yīng)用：

Protopie 和 Principle 是專業(yè)的動(dòng)效軟件，就是用來實(shí)現(xiàn)動(dòng)效的工具。當(dāng)我們制作復(fù)雜動(dòng)效的最終可交付（提供參數(shù)）版本，那么就應(yīng)該用它們來實(shí)現(xiàn)。

它們實(shí)現(xiàn)動(dòng)效的方式都是對(duì)元素屬性的變更，比 Figma 更完整全面，實(shí)現(xiàn)邏輯也更清晰，都是開發(fā)可以通過前端代碼還原出來的效果。

但它們并不適合做十幾或幾十個(gè)頁面的跳轉(zhuǎn)演示，因?yàn)楫a(chǎn)品設(shè)計(jì)的邏輯就不兼容這個(gè)目標(biāo)。尤其是 Principle 只聚焦再單次交互動(dòng)畫上，不提供基本的頁面跳轉(zhuǎn)選項(xiàng)（只能做關(guān)鍵幀動(dòng)畫）。

同時(shí)，再?gòu)?qiáng)調(diào)一個(gè)觀點(diǎn)，就是 UI 工具和交互工具是兩種東西，它們無法合并。因?yàn)閺?fù)雜交互動(dòng)效的實(shí)現(xiàn)對(duì)圖層的要求和設(shè)計(jì)階段是沖突的，它們"尿不到一壺"里。所以只要是設(shè)計(jì)需要項(xiàng)目落地的復(fù)雜交互動(dòng)效，直接使用動(dòng)效軟件即可。

3. Adobe AE 的動(dòng)效應(yīng)用：

AE 做動(dòng)效包含兩種場(chǎng)景，一種就是為了當(dāng)飛機(jī)稿做的。比如很多新手的偽需求，要做個(gè)動(dòng)效傳到網(wǎng)上還是放在作品集里面。

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

另一種場(chǎng)景，就是實(shí)現(xiàn)一些需要用特殊效果制作出來的小動(dòng)畫，比如微動(dòng)效中的矢量變形、或者 IP 動(dòng)畫中的骨骼控制、3D 圖標(biāo)的運(yùn)動(dòng)效果等。

這些動(dòng)效是需要落地的，但 UI 和動(dòng)效軟件完全實(shí)現(xiàn)不了，只能用 AE 來做。至于實(shí)現(xiàn)是要使用 Lottie，還是導(dǎo)出視頻、GIF、關(guān)鍵幀，就是別的話題了。

對(duì)于專業(yè)設(shè)計(jì)師來說，會(huì)根據(jù)動(dòng)效的需求選擇合適的工具來制作，不會(huì)只學(xué)習(xí)一種，也不會(huì)糾結(jié)哪個(gè)工具更厲害。

結(jié)尾

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

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

作者：超人的電話亭