Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have 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チュートリアル

cotolier_risa
良いと思ってもすぐ忘れるのでQiitaに記録していけたらなぁと思います。 ミスや不具合等ありましたらお気軽にご指摘いただけると助かります。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away