つい最近スターバックアプリのリデザインをしてみて、その際にアニメーションの作成のためにAdobe XDからAfter Effectsに書き出す必要があったのですが、とてもシンプルで簡単でした。その方法をご紹介します。
やり方
まずはXDでデザインします。今回はシンプルなナビゲーションアプリを作ってみました。
After Effectsに書き出す方法
全てのアートボードを選択して、上部のタブから
ファイル → 書き出し → After Effects
と選択するだけです。各アートボードごとにコンポジションが作られます。
各要素に名前をつけよう
書き出す前には各レイヤーの要素にわかりやすいように名前をつけましょう。なぜかというとAfter Effectsに書き出したあとは、各要素がズラッと全面に並ぶことになるので探すことに苦労します。
書き出す前にグループ化
一緒に動かす要素同士はXDでグループ化したほうが、後々探しやすいです。グループ化した要素は緑のNull?オブジェクトにピックウイップで繋がっています。なのでコレ自体を動かせば、繋がった要素は共に動いてくれます。
マスキングも受け継がれる
今回のデザインはマスキングを使っていないのですが、XDでマスキングをした要素はAfter Effectsでもマスキングされたまま書き出されます。このようにプリコンポーズになって書き出されます。
今回作ったデザインも実際にこのような感じで、After Effectsでアニメーションを作ったのでその作り方を後日ご紹介したいと思います。思っているよりも簡単にできますよ。
ではまた!
Adobe XD おすすめの本
リンク
僕はスキルシェアでAdobe XDやIllustratorを学びました。
今だけ2ヶ月無料でのお試しもありますよ!
Udemyも動画をダウンロードしていつでも学ぶことが出来るのでおすすめですよ!
[…] Adobe XDの機能の一つに「Photoshopで編集」という2つのソフトを連携して使用できる出来る機能があります。どちらもAdobe製品なので連携がとてもスムーズで便利です。前回はXDからAfter Effectsとの連携をご紹介しましたが、今回はPhotoshopとの連携した使い方をご紹介します。 […]