【Adobe XD】自動アニメーションでサイドメニューを作ろう!

今回はこのような自動アニメーションでサイドメニューを作っていこうと思います。

 

簡単にできるのでGIFを使って説明していきたいと思います。

作り方

メイン画面作成

まずは簡単なメイン画面を作ります。そして右上にメニューアイコンを設置しましょう。

3本のラインで作成するか、フリーアイコンをダウンロードしてきてもいいですね。

ICOOON-MONOさんなどのサイトもおすすめです。

サイドメニューの作製

まずは基本的なフレームを作って、そこに要素を付け足していきます。

サイドメニューの角に閉じるためのXのアイコンを取り付けましょう。

メニュー全体をXアイコンと共にグループ化します。

アートボードの複製

アートボード名を選択し、上のように複製します。

アートボードの外側に配置することでメイン画面から見えないようにします。

このように見えない状態になります。アートボードをクリックすることで編集も可能です。

プロトタイプの画面でメニューアイコンと2つ目のアートボード

Xアイコンと1つ目のアートボードをつなげます。

 

今回の自動アニメーションの設定は下のようにしています。タグをクリックして変更できます。

タップ 自動アニメーション イーズアウト 0.3秒

設定を自身で変えてみてみるのもいいと思います。この設定だとこのようになります。

これでサイドメニューの自動アニメーションは完成ですね!

簡単でしたね。

実は下のように、少し工夫すると文字に動きを加えられます。

少し見づらいかもしれませんが、

上のようにサイドメニュー内の文字を右にずらすだけでこのようになります。

僅かですが、文字が遅れて来るように出来ました。

これで完成です!

 

まだまだ自動アニメーションで出来ることはたくさんあるので、ご紹介していきますね。

ではまた!

 

Adobe XDおすすめの本

 

僕はこのスキルシェアでAdobe XDなどを学びました。おすすめです。

タイトルとURLをコピーしました