BLOG
STUDIO TOKI のブログ

Adobe XD プロトタイプを学ぼう!

STUDIO TOKI のブログ

こんにちは!
火曜日担当のWEB・デザインチームです。

前回プロトタイプの共有方法を紹介しましたが、XDには共有意外にもクリック後の処理や アニメーション機能など便利な機能があります。今回は基本的なプロトタイプを紹介します。 この処理を知ると、クライアントなどによりわかりやすく、サイト上の動きを伝えることが出来ます。 設定方法もとても簡単なので、是非実践してみましょう!

クリックをしたらリンクに飛ぶ処理

まずは、プロトタイプのタブを①クリックします。次にボタン部分を②クリックすると、ハンドルが出ます。
そのハンドルをリンク先へ、繋げます。

ボタンからアートボードに掛けて、線が繋がったら、準備完了です。動きの確認は①の再生ボタンをクリックします。 ボタンをクリックすると、しっかりと、動きが反映されます。

ファーストビューを調整したい!

ファーストビューの調整もできます。実際にコーディングするまでファーストビューの表示領域はイメージしずらいですが、 簡単に調整出来ます。

まずは、①アートボードをクリックします。次に左側に表示される、【ビューポイントの高さ】というものがでます。この数値を 調整すれば、準備完了です。

ほかにも①の部分をマウスで調整することも出来ます。

準備が出来たら、先程同様に【プロトタイプ】→【再生ボタン】をクリックして確認してみましょう。

まとめ

今回はプロトタイプの基本的な使い方を紹介しました。プロトタイプの処理はまだまだあるので、 使いこなせば、スムーズにイメージ像をクラアントなどに伝えられます。今後もXD関連の使い方を紹介していきます。

itoakihiroをフォローする
レンタル撮影スペース「STUDIO TOKI」
タイトルとURLをコピーしました