XDの使い方まとめ:初心者〜現場レベルまで目指せ完全網羅!!

Creative

この記事はXDの基本的な使い方〜ちょっとした応用を色々とまとめた一覧記事です。
この記事を全て読み進めていく事で、初心者の方がXDでワイヤーフレームの作成が出来る様になる様なイメージで記載していきます。そして現場でも使えるレベルを目指していきます。

詳しい内容は各種詳細記事のリンクをクリックして下さい。

XDを始める前に必須なツールと基礎知識

UI kitsで感覚を養おう

Adobeが公式公開しているXDの無料素材の「UI kits」です。
デザインシステムを利用して効率化を図る事が出来ます。
またXDを勉強するのに非常に向いたサイトなので何処かに保存しときましょう。


共有してフィードバックをもらう

デザイン、システムの共有が最大のXDは醍醐味です。
XDの共有の仕方は必ず理解しておきましょう。


プロトタイプの基本

XDの醍醐味であるプロトタイプの基本的な使い方を紹介します。


XDでいろんなパーツを作成しよう

サムネイルを作成

XDではサムネイルを作成するのに非常に向いているソフトかと思います。


ギャラリー

XDなら一瞬でギャラリーを表現する事が出来ます。


マウスホバー

XDならマウスホバーアクションを一瞬で表現出来ます。


スクロールブロック

XDならスクロールブロックを一瞬で作成出来ます。


表(テーブル)

XDで表(テーブル)を作成する方法です。少し変わったやり方なので覚えておきましょう。


ラジオボタン

お問い合わせフォームなどに良くあるラジオボタンの表現の仕方です。


ドロップダウン

多項目の中から一つを選択するのに便利なドロップダウンリストの作り方です。


要素を固定

XDなら要素の固定はワンクリックで可能です。


XDでちょっとしたアニメーションを作ろう

回転アニメーション

くるくると回転するアニメーションをリピートします。


XDにおすすめのプラグイン

Mimic

任意のサイトの画像、フォントデータ、カラーコードをXDに落とし込みます。


以上が「XDの使い方まとめ:初心者〜現場レベルまで目指せ完全網羅!!」でした。

現在(2020/07/12)時点ではまだ記事数は少ないですが今後少しずつ追加していきます。
今暫くお待ちください。

2020年7月15日CreativeReference,XD

Posted by KT