Adobe XDといえば、WebサイトやアプリなどのUI/UXデザインができる

Adobeが提供しているソフトウェアですが、自動アニメーションという機能を使って

このような簡単なカウントダウンタイマーを作っていこうと思います。

２パターンで比較していくのでチェックしてみてください。

今回はマスキングとリピートグリッドを使ったやり方を紹介します。

Adobe XDは無料で利用出来るので、この機会に試してみてもいいかもしれませんね。

作り方

まずはソフトを開いて、IPhoneX/XSのアートボードを開きます。

左のタブから楕円形を選択して、Option/Alt を押しながらドラッグするとキレイな円が出来ます。

ちょうどいい円をアートボードの中央に作っていきます。

次に最後のGO!を円に入る大きさに作っていきます。

フォントのサイズは四角の下の小さい丸を上下にドラッグすると、簡単に大きさを変えられます。

リピートグリッド

GO！を右上のリピートグリッドで選択して必要な文字の数だけ下に伸ばしていきます。

文字の間のピンクの帯をドラッグすると文字同士の幅を変えられます。

ここではー４０にしておきます。そして、GO!の下に残りの数字を入れていきます。

マスキング

円の中央にに３がくるよう配置します。

そのあと、一番大きいGO!が収まる大きさの長方形を３の上に配置します。

理由は長方形が小さいとマスキングした際に文字が途切れてしまうからです。

長方形と文字をShiftを押しながら両方選択して、Shift＋Command⌘/Ctrl + M でマスキングできます。

下が寂しいので、ちょっとしたフレーズを入れてみました。

アートボードの名前を Option を押しながらドラッグすると、アートボード全体の複製が出来ます。

後は、３，２，１，GO!となるように文字をリピートグリッド内でスライドさせていきます。

このようになります。マスキングしているので、長方形内の文字しか見えません。

これで最後です。

左上のプロトタイプを選択します。

３のアートボードの名前を選択して、青いタグを２のアートボードにつなげます。

設定は、時間　１秒　自動アニメーション　イーズアウト　0.3秒にします。

イーズアウトは自分で変えてみて試してください。

後は最後のアートボードまで青タグを同じようにつなげてください。

右上の再生ボタンを押して、

はい完成です！

簡単でしたね、次は違ったパターンをご紹介します。

ではまた！

Adobe XDおすすめの本

僕はAdobe XDやイラストレーターなどの使い方をこのサイトで学びました。

英語の勉強にもなりますよ！とてもおすすめです。