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

8611 ワード
XD XD テキストリンク

XDの基本操作をまとめました。（2017年/3月/18日現在）
macOSを基準としているので、一部Windowsでは対応していない機能もあります。
Windowsの機能についてはこちらをご参照ください。

インストール

動作環境

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

※必要システム構成の詳細は公式サイトを参照ください　→　アドビサポート：必要システム構成

インストール方法

  • ダウンロードページ にアクセス
  • 幾つかの質問に答える
  • Adobeアカウントでログイン（Adobeアカウントを持ってない場合は新規登録が必要）
  • XDをダウンロード＆インストール

新規作成画面

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

【デザインモード】

ツール

右側のバー

右側のバーは使用しているツールや選択中のオブジェクトによって、内容が変化する。
（画像はアートボードを選択中）

グリッド

レイヤー

  • ⌘を押しながらレイヤーやオブジェクトをクリックすると、複数選択が可能。
  • 複数のレイヤー、もしくはオブジェクトを選択した状態で「⌘ + G」or右クリックから「グループ化」をおすとグループ化することができる。
  • レイヤーにカーソルをのせるとアイコンが表示され、表示・非表示や、レイヤーのロックをすることができる

カラー、スポイト、スウォッチ

マスク


２つ以上のオブジェクトを選択していると、マスクを使用することができる。
非破壊編集なので、ダブルクリックするとマスクの位置をずらすことも可能。

  • オブジェクト同士のみではなくテキストとオブジェクトや、画像とテキストなどの応用も可能。

  • 画像をの一部をオブジェクトの形に合わせてマスクすることも可能。

    ただし、その場合は画面右側のマスクアイコンではなく、
    上部メニューの「オブジェクト」→「シェイプでマスク」を選択すること

リピートグリッド

同じ構成の要素を繰り返す時に大変便利。


繰り返したい要素をまとめて選択。右側の「リピートグリッド」をクリック。

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

シンボル

よく使うコンポーネントに関してはシンボル化すると便利。

  • １つを変更すると同じシンボルは全て変更が反映される。

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

書き出し

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

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

【プロトタイプモード】

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

画面遷移の設定

プレビュー

「⌘ + Enter」もしくは右上の再生マークからプレビューをみることができる。
プレビュー画面は別ウィンドで開く。

スマホでライブビュー

スマホに専用のAdobeXDのアプリをインストールし、USBと接続することで
右上のスマホアイコンからライブビューが可能になる。

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

画面の共有の方法

動画で共有


プレビュー画面の右上に録画ボタンがあるので、押すと操作している様子を録画することができる。
もう一度押すと録画が停止し、ムービー(.mov)を保存する画面が出現する。名前をつけると保存が完了する。

URLで共有


- タイトル、アイコン、コメントの許可などを設定できる。


共有画面(プロトタイプ)

  • 共有画面にはコメントを残すことができる。(ログイン不要)
  • コメントにはピン留め機能があり、どこの箇所を指しているのかわかりやすくするためにプロトタイプ上にピンを付けることができる

UIキットのXDデータの素材集

Design Mine

参考

アドビ公式：XDチュートリアル