XD 基本的な使い方

初めてAdobe XDを触る方はまずはこちらのチュートリアルを見るといいです。きっと全くの初心者であっても、1時間半ほどで使い始めることができるようになります。
https://creativecloud.adobe.com/apps/ux-web/all/pdp/xd?source=apps

■ XDの基本用語

デザインカンプ＝クライアントに見せるデザインの完成形
プロトタイプ（モック）＝Web制作を行う前に完成形をイメージしやすくするためのもの

■ 作業効率化

プロトタイプページで遷移設定「戻る」：「ひとつ前のアートボード」選択
アセット：必要なパーツを右クリックで名前をつけて作成（カラー/文字スタイル/シンボル）
→ アセットは変更すれば適応箇所全て変更される/「カンバスをハイライト」でどこに配置したか確認
共有リンク：パスワード設定
グリッド機能：右側の操作パネルでグリッド欄にある「レイアウト」にチェック
1366pxの横幅にコンテンツ幅が1180px→左右に93pxずつの余白を設定→幅や個数を自由に入力するだけ
共有「デザインスペックを公開」：CSSに反映できる各種データが確認可能

Adobe XDまだ使ってないの？こんなに万能なのにもったいない！ | 株式会社LIG

■ XDでの作業手順

STEP01：XDでプロトタイプ・仕様を作成
STEP02：Photoshopでアセット（モジュール）制作
STEP03：XDでカンプ制作（プロトタイプのブラッシュアップ）
STEP04：XDでパーツの書き出し、デザインスペック参照しながらコーディング

Adobe XDなしにはもう生きられない！これからのWebデザイナーのワークフローが変わるかも!? | 株式会社LIG

XDのリピートグリッド
別々の画像入れたい：複数選択してからリピートグリッドにドラッグ&ドロップ（それぞれ個別に編集したい場合は、リピートグリッドで増やした後に削除：Shift+Com+G）

【XD】リピートグリッドの基本の使い方と応用テクニック集 - あなたのスイッチを押すブログ

モジュールの一部だけ表示したい時に、逆にリピートグリッドで削ることも可能。

■ XDのアニメーション

プロトタイピングで線を繋いで以下のように設定
【トリガー:時間/ディレイ:１秒】
【アクション:自動アニメーション/移動先:サンプル /イージング:イーズアウト/継続時間:1.5秒】
https://wand.plus/2019/07/01/xd-animation/

種類別アニメーションの動き
https://amitygraphic.com/post-1586-howtouseadobexd/
https://xdtrail.com/lesson/animated-graphics/animated-graphics-1-loading-icon/

■ レスポンシブデザインについて

https://xdtrail.com/using-responsive-resize/?trackingid=85665RR5&mv=email
https://helpx.adobe.com/jp/xd/help/using-responsive-resize.html

■ XDのプラグイン

Remove Decimal Numbers：小数点切り捨て

https://wk-partners.co.jp/homepage/blog/software/xd_plugin/
https://webdesign-trends.net/entry/10275

■ UIUXデザインガイドライン

タイプスケール/カラースキーム/レイアウトルールなど
Apple：Human Interface Guideline
https://developer.apple.com/design/human-interface-guidelines/
Google：Material Design
https://material.io/