figma_xdカテゴリーの共通アイキャッチ画像

AdobeXDの基本

Adobe XDとFigmaはどちらもデザインとプロトタイピングに特化したツールですが、それぞれに特徴があります。

特徴Adobe XDFigma
プラットフォームデスクトップアプリ(Windows, Mac)クラウドベース(ブラウザ、Windows, Mac, Linux対応)
共同作業クラウドドキュメントを使った共同編集が可能リアルタイムの共同編集が可能
オフラインでの作業オフラインでの作業が可能オンライン専用(オフラインモードはないが、デスクトップアプリ版で作業可)
Adobe製品との連携Photoshop、Illustratorとの連携がスムーズなし
インターフェイスシンプルで直感的なUIカスタマイズ性が高く、多機能
リピートグリッド(カード、リストアイテム、ボタンなどを簡単に繰り返し配置できる機能)ありなし(同様の機能を手動で実現可能)
自動アニメーションAuto-Animate機能で簡単にアニメーションを作成可能スマートアニメート機能でアニメーション作成可能
バージョン管理手動でバージョンを保存・管理自動でバージョン管理(履歴)
コメント機能デザイン上にコメント可能リアルタイムでコメント可能
料金プラン無料版あり(Starterプラン)、有料版あり無料版あり(制限なし)、有料版あり
チーム向け機能チームプランでライセンス一括管理、共同作業が可能コラボレーション機能が標準搭載
ファイルフォーマット.xd.fig(他形式にもエクスポート可能)
プラグイン豊富なプラグインが利用可能豊富なプラグインが利用可能
プロトタイピングシンプルなプロトタイピング機能多機能で柔軟なプロトタイピング機能
デザインシステムの構築コンポーネントとライブラリ機能あり強力なコンポーネントとライブラリ機能あり
適用場面主にオフライン環境やAdobe製品を多用するデザイナー向けクラウド環境での共同作業やプラットフォームに依存しないデザイナー向け
Adobe XDとFigmaの比較表

ワイヤーフレームやデザインカンプを作成する

1.インターフェイス

ワークスペースはAdobe XDの公式HPで確認してください。

2.アートボードの作成とガイドの設定

  • 4種類の画面サイズ(モバイル、PC、Instagram、カスタム)からクリックで選択します。
  • ドキュメントに複数のアートボードを作成する場合、ワークスペース左サイドのツールバーにあるアートボードを使用するとアートボードを追加できます。
  • サイズを変更したい場合は右サイドのプロパティインスペクターのW(幅)H(高さ)で変更可能です。
  • 縦のガイド線はアートボードの左端にカーソルを合わせ、カーソルの形が変わった事を確認して右側に引き出し、横のガイド線はアートボードの上にカーソルを合わせ、カーソルの形が変わった事を確認して下側に引き出す。

3.オブジェクトの作成

アートボード上にオブジェクトを作成するには「長方形」「楕円形」「多角形」「線」「ペン」ツールを使用します。

  • 画面左サイドのツールバーから上記図形を選択し、アートボード上でドラッグ&ドロップして描画します。
  • 正方形や正円を描画する場合はPhotoshopやIllustratorと同様にshiftキー + ドラッグします。
  • 多角形を描画する場合は、左サイドで三角形を選択して描画、後に右サイド②で頂点を三角形の3から任意の数値(5など)に変更すると多角形を作成できます。
  • ペンツールを使用して自由な形状を作成できます。
  • 作成した形状のサイズ、塗り、線の色、太さなどを調整するには、右サイドのプロパティインスペクターを使用します。
  • 図形を移動させたり編集したい場合は、選択ツールを使用します。
  • 複数の形状を結合したり、切り取ったり、重ね合わせたりする場合は、右サイドのプロパティインスペクター上部にあるパスファインダーパネルを使用します。

4.テキストの追加

  • アートボード上にテキストを入力するには、左サイドのテキストツールを選択します。
  • Photoshopと同様にテキストツールで四角を描いてテキストボックスを作成すると、四角内に文章を収めることができます。テキストボックスを拡大縮小する場合は選択ツールを使用します。
  • 右サイドのプロパティインスペクターでフォント、サイズ、色、行間などを調整できます。

5.画像の挿入

  • 画像を挿入するには、ローカルの画像をアートボード上にドラッグ&ドロップするか、ライブラリから挿入します。
  • 選択ツールで画像の位置、サイズ、などを調整します。
  • 右サイドのプロパティインスペクターで透明度、塗り、ボーダー、ドロップシャドウなどを設定できます。

6.オブジェクトの操作

  • 複数のオブジェクトを選択するには、選択ツールを選択した状態でShiftキーを押しながらオブジェクトをクリックします。
  • 選択したオブジェクトを比率を変えずにサイズを変更するには、角にあるハンドルをドラッグします。
  • 選択したオブジェクトを回転させるには、⌘(コマンド)キーを押しながらドラッグします。
  • 右クリックメニューからグループ化をする事ができます。
  • オブジェクトレイヤーの目のマークをクリックして不可視にしたり、鍵マークロックして、誤って移動させないようにすることができます。

7. その他の機能

  • ボタンなど、再利用可能なデザイン要素を作成できます。
  • アートボードのサイズを変更しても、オブジェクトが自動的に配置されます。

参考URL:Adobe XDを動画で学ぶ。自由に使う。

PAGE TOP