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

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

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

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

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

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

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

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

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

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

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

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

并且 AE 的制作效率很低，如果要做的交互動(dòng)效是 Figma 或者 Protopie 能實(shí)現(xiàn)出來(lái)的效果，那么 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)效軟件的選擇

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

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

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

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

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

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

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

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

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

同時(shí)，再?gòu)?qiáng)調(diào)一個(gè)觀點(diǎn)，就是 UI 工具和交互工具是兩種東西，它們無(wú)法合并。因?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ái)給領(lǐng)導(dǎo)、客戶看看，落不落地根本不考慮。比如常見(jiàn)的大屏項(xiàng)目，大量看起來(lái)酷炫的動(dòng)畫(huà)效果都是飛機(jī)稿，只是為了過(guò)稿而做，只是一個(gè)延時(shí)宣傳片（約等于肯德基廣告，和實(shí)物是兩碼事）。

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

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

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

結(jié)尾

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

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

作者：超人的電話亭