【XD入門】基本操作の説明

XDの基本操作をまとめました。（2017年/3月/18日現在）
macOSを基準としているので、一部Windowsでは対応していない機能もあります。
Windowsの機能については[こちら](https://helpx.adobe.com/jp/experience-design/help/adobe-xd-windows.html)をご参照ください。


## インストール

### 動作環境
- macOS　：macOS 10.10 以降
- Windows：Windows 10 Anniversary Update（64 ビット版）- バージョン 1607（ビルド 10.0.14393）以降

※必要システム構成の詳細は公式サイトを参照ください　→　[アドビサポート：必要システム構成](https://helpx.adobe.com/jp/experience-design/help/system-requirements.html)


### インストール方法

- [ダウンロードページ](https://creative.adobe.com/ja/products/download/experience-design?promoid=3X72B5HV&mv=other) にアクセス
- 幾つかの質問に答える
- Adobeアカウントでログイン（Adobeアカウントを持ってない場合は新規登録が必要）
- XDをダウンロード＆インストール

## 新規作成画面
<img width="792" alt="スクリーンショット 2017-03-17 16.01.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/89e672c1-7a71-902c-64c4-0a3de92aafe6.png">

A：定義されたカスタムサイズのアートボードから新規データを作成
B：初心者向けチュートリアルデータが開く
C：iOS・Android・Windows標準のプラットフォームのUIキットが開ける


## 【デザインモード】

### ツール
<img width="320" alt="スクリーンショット 2017-03-18 1.14.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/7354ea79-fee7-b534-3d50-44f78eff33e4.png">

### 右側のバー
右側のバーは使用しているツールや選択中のオブジェクトによって、内容が変化する。
（画像はアートボードを選択中）
<img width="1044" alt="スクリーンショット 2017-03-18 1.30.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/4f7b0ad6-98e7-cfb0-2c6d-aeef8b06b43c.png">

### グリッド
<img width="1636" alt="スクリーンショット 2017-03-18 1.56.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/5253aa45-8989-ded6-73fd-6fe06e44418a.png">


### レイヤー
<img width="738" alt="スクリーンショット 2017-03-18 1.47.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/e56372e6-f319-4a4f-84f2-fa0542fd404f.png">

- ⌘を押しながらレイヤーやオブジェクトをクリックすると、複数選択が可能。
- 複数のレイヤー、もしくはオブジェクトを選択した状態で「⌘ + G」or右クリックから「グループ化」をおすとグループ化することができる。
- レイヤーにカーソルをのせるとアイコンが表示され、表示・非表示や、レイヤーのロックをすることができる<img width="220" alt="スクリーンショット 2017-03-18 1.53.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/87d6343f-7338-318f-38c4-9a03c86f3a1e.png">

### カラー、スポイト、スウォッチ
<img width="1138" alt="スクリーンショット 2017-03-18 2.03.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/d7ffaa08-c6dd-debc-df1e-a06a90393192.png">

### マスク
<img width="1114" alt="スクリーンショット 2017-03-18 2.16.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/638458c8-2786-ade7-47dc-f848d6898b6d.png">
２つ以上のオブジェクトを選択していると、マスクを使用することができる。
非破壊編集なので、ダブルクリックするとマスクの位置をずらすことも可能。

- オブジェクト同士のみではなくテキストとオブジェクトや、画像とテキストなどの応用も可能。
<img width="539" alt="スクリーンショット 2017-03-18 2.31.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/fb9507b2-83f3-e0a1-5fa0-3a76ab28e65e.png">

- 画像をの一部をオブジェクトの形に合わせてマスクすることも可能。
<img width="665" alt="スクリーンショット 2017-03-18 2.34.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/30a4c0c9-0fda-3f2d-b50f-49e9dd0839a3.png">
ただし、その場合は画面右側のマスクアイコンではなく、
上部メニューの「オブジェクト」→「シェイプでマスク」を選択すること

### リピートグリッド
同じ構成の要素を繰り返す時に大変便利。

<img width="787" alt="スクリーンショット 2017-03-18 2.39.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/50fc2b21-f4a2-fa2a-6f2d-b32096ce1f10.png">
繰り返したい要素をまとめて選択。右側の「リピートグリッド」をクリック。

<img width="770" alt="スクリーンショット 2017-03-18 2.41.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/4891058f-8831-3726-bdb9-4cca715dace5.png">

- テキストファイル(.txt)や画像をFinderからドラッグ＆ドロップすると、一括で置換が可能。
- 変更を行うと全ての要素の反映される。

<img width="404" alt="スクリーンショット 2017-03-18 2.46.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/fe99428d-64c2-ad24-0dbe-87fa3bea7ca9.png">

### シンボル
よく使うコンポーネントに関してはシンボル化すると便利。
<img width="1249" alt="スクリーンショット 2017-03-18 2.48.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/c711149b-d11b-8820-2057-8b3c116adebb.png">

- １つを変更すると同じシンボルは全て変更が反映される。
<img width="1629" alt="スクリーンショット 2017-03-18 2.52.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/265e38e5-fd39-a00c-7509-474e16556d12.png">

- 一部、例えば同じシンボルでテキストだけ変更という機能ないので注意（テキストを変えると全部のシンボルに反映される）

### 書き出し
上部メニューの「ファイル」　→　「書き出し」で書き出しができる。
- PNG
- SVG
- PDF
による書き出しが可能。

パーツごとに書き出したい際は、オブジェクトを選択してから「 ⌘ + E 」で書き出し可能。
複数選択して書き出しを行うと、まとめて個別に画像生成ができる。(一枚にはならない)
アートボードで書き出したい時は、アートボードを選択して書き出しを行うと、アートボードごとに一枚の画像を書き出せる。


## 【プロトタイプモード】
上部からプロトタイプを選択することで、プロトタイプを制作するモードに切り替えることができる。
「Control＋Tab」でも切替可能。

<img width="464" alt="スクリーンショット 2017-03-18 2.55.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/7726891e-a9f9-746b-e2b1-c3c62637f5b7.png">

### 画面遷移の設定
<img width="930" alt="スクリーンショット 2017-03-18 3.02.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/7ee93ad3-9b92-55d1-9e2b-9d743b61ea1b.png">

### プレビュー
「⌘ + Enter」もしくは右上の再生マークからプレビューをみることができる。
プレビュー画面は別ウィンドで開く。
<img width="445" alt="スクリーンショット 2017-03-18 3.18.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/ca593268-d649-ec6a-7a58-05ff0686d31c.png">



### スマホでライブビュー
スマホに専用のAdobeXDのアプリをインストールし、USBと接続することで
右上のスマホアイコンからライブビューが可能になる。
<img width="253" alt="スクリーンショット 2017-03-18 3.13.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/5195faac-df3c-db7e-f3c0-fe7b06c3505c.png">

- スマホ側のAdobeXDのアプリからはCreative Cloudにアップロードされているデータも閲覧可能（USB接続不要）

### 画面の共有の方法

#### 動画で共有
<img width="364" alt="スクリーンショット 2017-03-18 3.20.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/b79363d2-c05e-4db2-d988-0928602dc0ff.png">
プレビュー画面の右上に録画ボタンがあるので、押すと操作している様子を録画することができる。
もう一度押すと録画が停止し、ムービー(.mov)を保存する画面が出現する。名前をつけると保存が完了する。

#### URLで共有
<img width="458" alt="スクリーンショット 2017-03-18 3.24.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/75d09936-d9b3-eadf-95ae-5c5cda0aa94d.png">
- タイトル、アイコン、コメントの許可などを設定できる。

<img width="215" alt="スクリーンショット 2017-03-18 3.28.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/ae532459-b8e0-131c-9859-53ad6c926c3e.png">
<img width="215" alt="スクリーンショット 2017-03-18 3.28.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/fa4090fe-527b-ce21-55be-99f154f73056.png">


## 共有画面(プロトタイプ)
<img width="838" alt="スクリーンショット 2017-03-18 3.42.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/c854d44f-25e2-007b-50c0-780a8caf2692.png">

- 共有画面にはコメントを残すことができる。(ログイン不要)
- コメントにはピン留め機能があり、どこの箇所を指しているのかわかりやすくするためにプロトタイプ上にピンを付けることができる
<img width="1192" alt="スクリーンショット 2017-03-18 3.49.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/109208/d1def602-95a2-0894-4b89-90762d544bfe.png">



## UIキットのXDデータの素材集
[Design Mine](http://designmine.io/)

## 参考
[アドビ公式：XDチュートリアル](https://helpx.adobe.com/jp/experience-design.html)