雖然AE有著優秀的動畫製作能力，但是如果你想使用它來做界面設計稿，還是很麻煩的，所以平時我們設計UI界面設計會通過Sketch、Photoshop、Illustrator來進行設計。

那麼，如何將這些文件導入 AE 才方便做動畫呢，看完這篇文章相信你會不在迷茫。

關於 AI 文件如何導入 AE 之前我寫過兩篇文章，改天一併發布出來。

如何將 Sketch 文件導 入AE

Sketch 憑藉這輕量、高效、易於上手、海量腳本等特點，現在已是UI設計師使用頻率最高的軟體之一。平時使用 Sketch 做好設計稿之後，除了無縫導入 Principle 、Flinto做交互動效之外，有時候還需要導入 AE 做一些複雜的動效設計。

那麼，接下來我們一起看下如何將 Sketch 文件導入 AE。

首先，我們需要安裝一個插件，來自 Google 團隊開發並維護的 AEUX(更名之前叫Sketch2Ae)，可以在腳本官網自行下載來獲取腳本：https://aeux.io/

或者在公眾號「墨染動效」，後台回復「腳本」即可下載墨染常用的腳本合集，也包括這篇文章里所有的。

下載解壓之後你會得到兩個文件，即「AEUX.sketchplugin」 和 「AEUX.zxp」。

「AEUX.sketchplugin」是Sketch插件，雙擊即可直接安裝，比較簡單。「AEUX.zxp」文件是 AE 擴展文件，安裝方法略微麻煩一點，需要藉助一個擴展安裝器才能完成。

我們 AE 里用到的其他擴展都可以使用該安裝器來安裝，例如用來動效落地&交接的 Bodymovin、Flow，安裝方法是一樣的，這裡以 AEUX 做為演示案例。

AE 擴展安裝器可以通過這個網址下載：https://aescripts.com/learn/zxp-installer/

可以在官網看到兩個系統的版本都有，大家按照自己的系統來下載即可。

安裝完成 ZXP Installer 這個擴展安裝器之後，打開，然後將「AEUX.zxp」文件拖進安裝器窗口即可自動安裝，或者使用快捷鍵「Cmd + O」打開擴展文件。

如上圖，安裝器打開之後有個提示窗口，這裡無需理會，可以點一下「CLOSE」按鈕，完成之後會出現以下提示框，即表示安裝成功。

然後，可以在 AE 的「窗口」菜單欄的「擴展」選項里找到名稱為「AEUX」的擴展，Sketch的插件可以從「插件(Plugins)」里調出來。

這裡有兩種方法導入，第一種是點擊「Send selection to Ae」，即可直接將選中的圖層&畫板內容導入到 AE ，該過程在幕後傳輸，比舊版本速度更快也更穩定。

第二種方法是點擊「Export AEUX.json」，此時會在電腦生成一個名為「AEUX.json」的文件，此時將「AEUX.json」文件拖入 AE 內的 AEUX 面板上方紅色區域，或者在面板中點擊「曲別針」按鈕載入「AEUX.json」文件即可。

二種方法並沒有太大的區別，第二種方法多了一個用途，例如將導出的文件發給沒有Sketch 的電腦使用。

接下來將對 AEUX 面板中其他的功能做個介紹

Sketch 插件 AEUX 面板

1. Detach symbols

Symbol(組件) 導入到 AE 里會以預合成的形式存在，如果出現錯位&變形的情況，可以使用該按鈕，將 symbol(組件) 解除之後再導入。

2. Flatten shapes

AEUX 支持布爾運算的導入，但是在一個組中混合不同的運算符（如添加然後減去 ），AE 並不一定能夠正確還原，所以較為複雜的布爾運算圖形，可以先點擊 Flatten shapes 合併布爾運算圖形，然後再導入 AE 。

3. Images to symbols

如果發現導入到 AE 的文件出現了裁剪&位移的情況，需要在 Sketch 導出前點擊 Images to symbols，AEUX 只能導出它在畫板上看到的內容，如果在 sketch 內圖像的一部分超出畫板邊界，將會被裁剪。

AE 擴展 AEUX 面板

可以看到，上圖中我導入了一個首頁的設計稿，圖層數量多達168個，如此多的圖層是不方便我做動效設計的，所以接下來我們一起看看這個「AEUX」面板里的參數，調整到適合做動效的樣子。

1. New Comp

「New Comp」選項是會使用 Sketch 的文件創建一個新的合成，選擇該選項之後會自動按照 「Come size multiplier」設置的幾倍圖參數，導入在 Sketch 內選擇的內容並創建新合成。

2. Current

而「Current」是在當前的合成內導入文件 Sketch，如果已有合成或者已經導入一次，後續再需要導入選「Current」會更便捷。

3. Options

該選項下有三個參數：

「Detect parametric shapes」 檢測形狀參數，勾選之後導入的形狀會保留圓角跟大小屬性，在AE內展開形狀圖層的「內容」即可看到。

不勾選導入的形狀會已路徑的形式存在，不能更改圓角屬性，兩者各有各的好處，這個再後續的 AE 章節會講到。

「Precomp groups」 將群組創建成預合成，經過測試發現，勾選之後跟沒有勾選沒什麼區別，都不能自動把sketch內的群組建立成預合成，可能是這個版本存在的BUG，只有它跟下一個選項「Auto build artboards」關聯使用才有效果。

「Auto build artboards」自動創建畫板，勾選之後在 Sketch 里點擊 「Send to Ae」，AE 內容會自動創建預合成，不勾選在 AE 的「AEUX」面板頂部拖入框內有一段文本提示，如上圖會顯示你本次導入的圖層個數。

此時，「Precomp groups」這個選項就起作用了，勾選之後點擊頂部的 「BUILD COMP」按鈕，則會把 Sketch 內的群組創建到預合成內，不勾選則圖層是展開的列表。

4. Groups

「Groups」版塊有四個選項：

「Convert to precomp」：創建合成

這個功能不是說隨便選中某一個圖層，只要一點擊就可以將它們建立一個新的合成，而是要選中圖層列表裡已經變成參考線圖層的父級圖層，就是下圖中圖層名稱前面帶藍色「＃」的圖層。

如果你是對整個合成裡面的所有圖層都做創建預合成操作，也不用在這100多個圖層列表裡一個個去找，只需要「Cmd + A」全選，然後點擊「Convert to precomp」即可全部搞定。

「Un-Precomp group」：將合成解除，變成圖層列表

跟上一個功能剛好相反，有時可能對一些合成內部內容單獨編輯，不使用預合成會更方便，即可選中合成，讓它變回圖層列表。

「Toggle Visibility」：可以一鍵隱藏和顯示所有的父級圖層

可以看到上圖中的父級圖層前面的眼睛被點亮了，再次點擊「Toggle Visibility」這個功能就可以關閉，這個功能的好處在於如果給父級圖層做動畫，開啟顯示後選中父級圖層畫面上會有範圍框，方便做動畫。

因為這裡的父級圖層前面都有藍色的「＃」，也就是參考線圖層，即使是顯示了，最終也不會被渲染導出，所以開啟也不影響最終的效果。

「Delete group layers」：刪除父級圖層

該功能是可以一鍵將合成中 Sketch 導入的父級圖層刪除，因為前面好幾個功能都是基於父級圖層，這裡請謹慎操作。

可以看到從最初的「Sketch2Ae」到現在的「AEUX」，經過很多版本的迭代&更新，已經變得越來越強大，已經大大的提高了動效設計效率，相信「AEUX」在後續的版本更新中會更好更強大。

最後，我也順便把導入的文件做了個小動效，吶，就是下面這張了~~

好了，今天的分享就這裡，如果覺得對你有所幫助，不妨來一波轉發、留言、點贊三連~~~

更多動效設計內容，關注並星標 墨染動效 公眾號，方便第一時間查看消息~~~

長按識別關注

推薦閱讀：