Posted at

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

More than 1 year has passed since last update.

XDの基本操作をまとめました。(2017年/3月/18日現在)

macOSを基準としているので、一部Windowsでは対応していない機能もあります。

Windowsの機能についてはこちらをご参照ください。


インストール


動作環境


  • macOS :macOS 10.10 以降

  • Windows:Windows 10 Anniversary Update(64 ビット版)- バージョン 1607(ビルド 10.0.14393)以降

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


インストール方法



  • ダウンロードページ にアクセス

  • 幾つかの質問に答える

  • Adobeアカウントでログイン(Adobeアカウントを持ってない場合は新規登録が必要)

  • XDをダウンロード&インストール


新規作成画面

スクリーンショット 2017-03-17 16.01.33.png

A:定義されたカスタムサイズのアートボードから新規データを作成

B:初心者向けチュートリアルデータが開く

C:iOS・Android・Windows標準のプラットフォームのUIキットが開ける


【デザインモード】


ツール

スクリーンショット 2017-03-18 1.14.53.png


右側のバー

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

(画像はアートボードを選択中)

スクリーンショット 2017-03-18 1.30.19.png


グリッド

スクリーンショット 2017-03-18 1.56.53.png


レイヤー

スクリーンショット 2017-03-18 1.47.25.png


  • ⌘を押しながらレイヤーやオブジェクトをクリックすると、複数選択が可能。

  • 複数のレイヤー、もしくはオブジェクトを選択した状態で「⌘ + G」or右クリックから「グループ化」をおすとグループ化することができる。

  • レイヤーにカーソルをのせるとアイコンが表示され、表示・非表示や、レイヤーのロックをすることができるスクリーンショット 2017-03-18 1.53.56.png


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

スクリーンショット 2017-03-18 2.03.17.png


マスク

スクリーンショット 2017-03-18 2.16.42.png

2つ以上のオブジェクトを選択していると、マスクを使用することができる。

非破壊編集なので、ダブルクリックするとマスクの位置をずらすことも可能。


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

    スクリーンショット 2017-03-18 2.31.34.png


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

    スクリーンショット 2017-03-18 2.34.07.png

    ただし、その場合は画面右側のマスクアイコンではなく、

    上部メニューの「オブジェクト」→「シェイプでマスク」を選択すること



リピートグリッド

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

スクリーンショット 2017-03-18 2.39.51.png

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

スクリーンショット 2017-03-18 2.41.47.png


  • テキストファイル(.txt)や画像をFinderからドラッグ&ドロップすると、一括で置換が可能。

  • 変更を行うと全ての要素の反映される。

スクリーンショット 2017-03-18 2.46.42.png


シンボル

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

スクリーンショット 2017-03-18 2.48.32.png


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

    スクリーンショット 2017-03-18 2.52.42.png


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



書き出し

上部メニューの「ファイル」 → 「書き出し」で書き出しができる。

- PNG

- SVG

- PDF

による書き出しが可能。

パーツごとに書き出したい際は、オブジェクトを選択してから「 ⌘ + E 」で書き出し可能。

複数選択して書き出しを行うと、まとめて個別に画像生成ができる。(一枚にはならない)

アートボードで書き出したい時は、アートボードを選択して書き出しを行うと、アートボードごとに一枚の画像を書き出せる。


【プロトタイプモード】

上部からプロトタイプを選択することで、プロトタイプを制作するモードに切り替えることができる。

「Control+Tab」でも切替可能。

スクリーンショット 2017-03-18 2.55.58.png


画面遷移の設定

スクリーンショット 2017-03-18 3.02.00.png


プレビュー

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

プレビュー画面は別ウィンドで開く。

スクリーンショット 2017-03-18 3.18.56.png


スマホでライブビュー

スマホに専用のAdobeXDのアプリをインストールし、USBと接続することで

右上のスマホアイコンからライブビューが可能になる。

スクリーンショット 2017-03-18 3.13.52.png


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


画面の共有の方法


動画で共有

スクリーンショット 2017-03-18 3.20.48.png

プレビュー画面の右上に録画ボタンがあるので、押すと操作している様子を録画することができる。

もう一度押すと録画が停止し、ムービー(.mov)を保存する画面が出現する。名前をつけると保存が完了する。


URLで共有

スクリーンショット 2017-03-18 3.24.21.png

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

スクリーンショット 2017-03-18 3.28.03.png

スクリーンショット 2017-03-18 3.28.10.png


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

スクリーンショット 2017-03-18 3.42.44.png


  • 共有画面にはコメントを残すことができる。(ログイン不要)

  • コメントにはピン留め機能があり、どこの箇所を指しているのかわかりやすくするためにプロトタイプ上にピンを付けることができる
    スクリーンショット 2017-03-18 3.49.24.png


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

Design Mine


参考

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