つい最近スターバックアプリのリデザインをしてみて、その際にアニメーションの作成のためにAdobe XDからAfter Effectsに書き出す必要があったのですが、とてもシンプルで簡単でした。その方法をご紹介します。

やり方

まずはXDでデザインします。今回はシンプルなナビゲーションアプリを作ってみました。

After Effectsに書き出す方法

全てのアートボードを選択して、上部のタブから

ファイル　→　書き出し　→　After Effects

と選択するだけです。各アートボードごとにコンポジションが作られます。

各要素に名前をつけよう

書き出す前には各レイヤーの要素にわかりやすいように名前をつけましょう。なぜかというとAfter Effectsに書き出したあとは、各要素がズラッと全面に並ぶことになるので探すことに苦労します。

書き出す前にグループ化

一緒に動かす要素同士はXDでグループ化したほうが、後々探しやすいです。グループ化した要素は緑のNull?オブジェクトにピックウイップで繋がっています。なのでコレ自体を動かせば、繋がった要素は共に動いてくれます。

マスキングも受け継がれる

今回のデザインはマスキングを使っていないのですが、XDでマスキングをした要素はAfter Effectsでもマスキングされたまま書き出されます。このようにプリコンポーズになって書き出されます。

今回作ったデザインも実際にこのような感じで、After Effectsでアニメーションを作ったのでその作り方を後日ご紹介したいと思います。思っているよりも簡単にできますよ。

ではまた！

Webデザイン入門オンライン講座