Adobe XD の使い方ガイド — 基本操作と、サポート終了後も使い続けるための選択肢
「Adobe XD の使い方を知りたい」— UI/UX デザインを学び始めた方や、既存の XD ファイルを引き継いだ方が、最初に検索することの多いトピックです。
ところが、Adobe XD は 2023 年 6 月に単体販売を停止 し、2024 年以降は メンテナンスモード に移行しています。新規購入は終了し、新機能の追加も止まっているのが現状です。これから XD を学ぶ・使い続ける際は、この前提を踏まえた選択 が必要になります。
この記事では、Adobe XD の基本的な使い方を整理 したうえで、現状の制約と既存ユーザーが取れる選択肢（Creative Cloud 継続 / Figma 移行 / 代替ツール）を解説します。「使い方を学んでから判断したい」「いま手元にある XD ファイルをこの先どうするか」を整理する材料として活用してください。
この記事で得られること
- Adobe XD で何ができるか — 機能の全体像
- 基本操作（アートボード、ツール、レイヤー、コンポーネント）の概要
- ワイヤーフレーム・プロトタイプ作成の流れ
- 共有・コラボレーション・ハンドオフの仕組み
- Adobe XD の現状（単体販売停止、メンテナンスモード）
- 既存ユーザーが取れる 3 つの選択肢と、判断するための観点
立場の開示
私たち Pixel Fine Converter は、Adobe XD から Figma への変換プラグインを提供しています。後半のセクションで Figma 移行も選択肢の一つとして紹介しますが、XD を使い続ける選択肢も含めて公平に整理 します。各選択肢の制約は正直に書きます。
📝 はじめに — Adobe XD を学ぼうとしているあなたへ
「XD の使い方を学びたい」と思って検索した方の状況は、おおまかに 3 通りに分かれます。
- 新規に UI/UX デザインを学びたい: ツール選びの段階で XD が候補に挙がっている
- 既存の XD ファイルを引き継いだ: 過去の制作物を編集・参照する必要がある
- 長く使ってきた XD ユーザー: これからどうするかを考えている
どの状況であっても、XD の機能と現状を把握したうえで判断する のが安全です。本記事は、まず使い方の全体像を示し、その後で現状と選択肢に進む構成にしています。
新規に学ぶ場合の注意
これから UI/UX デザインを学び始める方が「XD を一から学習する」ことには、注意が必要です。Adobe XD は新規購入を終了しているため、新規ユーザーが正規ライセンスを取得する経路は Creative Cloud のフルプラン契約のみ に限られます。学習目的なら、後述する Figma など現役のツールから始める方が、求人市場・教材・コミュニティの面でも有利です。
🎨 Adobe XD で何ができるか — 機能の概観
Adobe XD は、UI / UX デザインとプロトタイピングのためのツールです。1 つのアプリで以下のフェーズをカバーできます。
| フェーズ | XD の機能 | 用途 |
|---|---|---|
| 構造設計 | アートボード、シェイプツール、グリッド | ワイヤーフレームを描く |
| UI デザイン | コンポーネント、アセット、リピートグリッド | 画面の見た目をつくる |
| プロトタイプ | プロトタイプモード、Auto-Animate | 画面遷移・アニメーションを試す |
| 共有・レビュー | 共有リンク、コメント機能 | 関係者にデザインを見せる |
| ハンドオフ | Design Specs、アセット書き出し | エンジニアに引き継ぐ |
XD の特徴は、動作の軽快さ と 一連のフローを 1 つのアプリで完結できる点 です。リピートグリッド（要素を繰り返し配置する機能）や Auto-Animate（プロトタイプでの自動アニメーション）など、XD ならではの機能もあります。
🛠️ XD の基本操作 — アートボード・ツール・レイヤー
XD のキャンバス操作は、他のデザインツールに触れた経験があれば違和感なく始められます。中心となるのは アートボード、ツールパネル、レイヤー の 3 要素です。
アートボード
XD では、1 画面 = 1 アートボード として扱います。複数のアートボードを横に並べて配置することで、画面遷移の全体像を俯瞰しながら作業できます。
- アートボードはサイズプリセット（iPhone / Android / Web 等）から選択するのが基本
- 後からサイズ変更も可能
- アートボード単位でスクロールビューポート（縦スクロール領域）を設定できる
ツールパネル
主要なツールは以下です:
- シェイプツール: 長方形 / 楕円 / 線 / 多角形 / ペン
- テキストツール: 文字入力（ポイントテキストとエリアテキスト）
- アートボードツール: 新しいアートボードを追加
- 選択ツール: オブジェクトの選択・移動・変形
- アセットを書き出し: 画像 / SVG / PDF として個別エクスポート
レイヤー・グループ・コンポーネント
XD のレイヤー構造は 3 階層の概念 で整理されています。
| 概念 | 役割 |
|---|---|
| レイヤー | 個別のオブジェクト（シェイプ、テキスト、画像など） |
| グループ | レイヤーをまとめて 1 つの単位として扱う |
| コンポーネント（旧 シンボル） | 再利用するパーツ。マスターを編集するとインスタンスにも反映される |
コンポーネントには 状態（State） を設定でき、ホバー時・押下時など複数の見た目を 1 つのコンポーネント内で管理できます。
リピートグリッド — XD の独自機能
XD には リピートグリッド という、要素を縦横に繰り返し配置する機能があります。リスト UI やカードグリッドを高速に作れる便利な機能ですが、Figma にはそのまま対応する概念がない点に注意が必要です（移行時は Auto Layout に変換します）。
🔗 ワイヤーフレーム・プロトタイプの作り方
XD は デザインモード と プロトタイプモード の 2 つの作業モードを持ちます。デザインモードで画面を作り、プロトタイプモードで画面遷移を組み立てる、という流れです。
ワイヤーフレーム作成の典型的な流れ
- アートボードを並べて画面の数だけ配置
- シェイプツールで構造（ヘッダー / コンテンツエリア / フッター等）を描く
- テキストツールでラベル・見出しを置く
- リピートグリッドでリスト UI の繰り返しを作る
- コンポーネント化して再利用パーツを整理
ワイヤーフレームの段階では細かい色やフォント指定は最小限にし、構造優先で進める のが定石です。
プロトタイプモード
プロトタイプモードでは、アートボード間を線で繋ぐことで画面遷移 を定義します。
- トリガー: タップ / 時間 / 音声 / キー操作 など
- アクション: 画面遷移 / オーバーレイ表示 / スクロール / 音声再生 など
- イージング: 遷移のアニメーション速度・カーブ
Auto-Animate — XD の真骨頂機能
XD の Auto-Animate は、2 つのアートボード間で 同名のオブジェクト を検出し、その差分（位置・サイズ・色・回転など）を自動でアニメーション化する機能です。マイクロインタラクションのプロトタイプを少ない手数で組めるため、XD のアイデンティティ的な機能として支持されてきました。Figma の Smart Animate と機能的には類似します。
👥 共有・コラボ・開発者へのハンドオフ
XD で作ったデザインを関係者に渡す方法は、主に 3 つあります。
共有リンク
XD のクラウドドキュメント（または個別アートボード）を URL 共有 で見せることができます。閲覧者は XD アプリを持っていなくても、ブラウザでデザイン・プロトタイプを確認できます。
- 公開リンク: URL を知る誰でもアクセス可
- 招待制リンク: Adobe ID でログインしたユーザーのみアクセス可
- パスワード保護: 上記に追加でパスワード要求
コメント機能
共有リンク経由で コメントを画面上に直接付与 できます。デザインレビューが文書ベースから視覚ベースに変わるのが大きな利点です。
開発者ハンドオフ
エンジニアにデザインを引き継ぐ場合、Design Specs と呼ばれるモードで以下が確認できます:
- カラーコード（HEX / RGB）
- タイポグラフィ（フォント・サイズ・行間）
- 寸法・余白の数値
- アセットの書き出し（PNG / SVG / PDF）
プラグインエコシステムの縮小
XD には Adobe XD Plugin API を使ったサードパーティプラグインがあり、過去はカラーパレット生成・モックデータ流し込み・コードエクスポート等で活発に開発されていました。ただし 2024 年以降のメンテナンスモード移行に伴い、新規プラグイン開発・既存プラグインのアップデートは停止 しているケースが増えています。新規導入する際はメンテナンス状況の確認が必要です。
⚠️ Adobe XD の現在の状況（2026 年 5 月時点）
ここまで XD の使い方を見てきましたが、これから XD を使ううえで 必ず把握しておくべき現状 を整理します。
タイムライン
| 時期 | 出来事 |
|---|---|
| 2022 年 9 月 | Adobe が Figma 買収を発表（200 億ドル規模） |
| 2023 年 6 月 22 日 | Adobe XD の単体販売・新規サブスクリプション受付を停止 |
| 2023 年 12 月 18 日 | Adobe / Figma 双方が買収合意の解消を発表（独占禁止懸念） |
| 2024 年以降 | XD はメンテナンスモードへ — 新機能追加は実質停止、セキュリティ・クリティカルバグ修正のみ提供 |
「使える」けれど制約がある
2026 年 5 月時点で、XD は 動作はする ものの、以下の制約があります。
- 新規ライセンスは Creative Cloud フルプラン経由のみ: 単体販売は終了しているため、XD だけを契約することはできない
- 新機能は追加されない: メンテナンスモードでは UX 改善・新ツール追加は事実上行われない
- プラグインエコシステムの縮小: 新規プラグイン開発・既存プラグインのメンテナンスは減少傾向
- 求人市場での需要減: 採用条件で「XD 経験」を必須にする企業は減少しており、Figma の比重が大きい
公式に「サポート終了日」が発表されているわけではなく、いつまで使えるかは Adobe の判断次第 です。詳細な状況分析は別記事 Adobe XD のサポートはいつまで？ にまとめています。
🚦 既存 XD ユーザーの 3 つの選択肢
XD を使ってきた / これから使いたいユーザーが取れる選択肢は、大きく 3 つです。
選択肢 1: Creative Cloud 契約を継続して使い続ける
こんな状況に向く:
- 既存プロジェクトの保守がメインで、新規プロジェクトはほぼない
- チーム全員が XD に習熟しており、移行コストが高すぎる
- 短期（〜1〜2 年）でプロジェクトが完了する
注意点:
- 新規購入は不可（既存契約の継続のみ）
- 新機能・新プラグインは期待できない
- 数年単位の長期計画には向かない（サポート終了の時期が読めない）
選択肢 2: Figma に移行する
こんな状況に向く:
- これから新規プロジェクトを始める
- 長期的にツールを使い続ける見込み
- チームで共同編集・レビューを多用する
- 採用市場や教材の充実を重視する
注意点:
- 既存 XD ファイルの移行手順が必要（手作業 or 変換プラグイン）
- Figma 独自の概念（Auto Layout、Variants 等）の学習が必要
- 既存のコンポーネントライブラリは再構築が必要な場合がある
→ 移行手順は XD→Figma 移行 実践ガイド で詳しく解説しています。
選択肢 3: 他の代替ツールを検討する
こんな状況に向く:
- Figma 以外の選択肢も比較したい
- オープンソース志向 / データ主権を重視 / 完全無料を譲れない 等の特定の要件がある
主な代替候補: Sketch（Mac 専用の老舗）、Penpot（オープンソース）、Lunacy（無料）、Adobe Illustrator + Express（Adobe 継続）など。
→ 各ツールの比較は Adobe XD の代替ツールはどれを選ぶべき？ を参照してください。
どの選択肢が現実的か
多くの XD ユーザーにとっては 選択肢 2（Figma 移行） が現実解になります。理由は、移行コストと将来性のバランスが取りやすく、既存ファイルも変換ツール経由で活用できるためです。ただし、状況によっては選択肢 1（継続）や 3（代替ツール）が合う場合もあります。
🚀 XD ファイルを Figma で開きたい場合の選択肢
「Figma に移行する方向で考えている」「とりあえず XD ファイルを Figma で確認したい」という場合、.xd ファイルを Figma で開く方法 は以下の 3 つです。
| ルート | 内容 | コスト |
|---|---|---|
| A. 外部 Web 変換サービス | Magicul などのオンラインサービスで .xd → .fig に変換 | $29〜$62/ファイル前後 |
| B. Figma Community プラグイン | Pixel Fine Converter / Angel Converter / Convertify 等で変換 | Free 版あり / Pro は有料 |
| C. 手動エクスポート | XD で SVG / PNG / PDF に書き出し → Figma にインポート | 無料 |
→ 各ルートの詳細・選び方は XD ファイルを Figma で開く 3 つの方法 にまとめています。
Pixel Fine Converter の特徴
私たち Pixel Fine Converter は、Figma Community プラグインとして XD → Figma 変換を提供しています。プラグイン内で変換処理が完結する設計（外部サーバーへのファイル送信なし）で、Free 版では 3 アートボードまでウォーターマークなし・登録不要で試せます。日本語フォントの位置補正や Auto Layout の自動推定など、XD ファイルを Figma で再編集できる品質を狙ったオプションも提供しています。
💬 よくある質問
Q: これから初めて UI デザインを学ぶ場合、Adobe XD から始めるべきですか？
A: 基本的には推奨できません。Adobe XD は新規購入を停止しており、メンテナンスモードに入っています。学習目的であれば、現役で開発が継続している Figma などから始める方が、求人市場・教材・コミュニティの観点で有利です。
Q: Adobe XD は無料で使えますか？
A: 過去には無料の「Starter プラン」が提供されていましたが、現在は新規無料利用は終了 しています。利用には Creative Cloud のフルプラン契約（または既存ライセンスの継続）が必要です。
Q: XD で作ったプロトタイプを Figma にも持っていけますか？
A: 完全な互換性はありません が、変換プラグインを使えばアートボード・コンポーネントなどの構造を Figma に持ち込むことは可能です。ただし XD の Auto-Animate と Figma の Smart Animate は完全互換ではないため、複雑なアニメーションは再調整が必要になる場合があります。
Q: 過去に作った XD ファイルが開けなくなる心配はありますか？
A: 現時点で Adobe から「サポート終了日」は発表されていませんが、過去のメンテナンスモード製品の事例から、数年スパンで起動困難になるリスクはあります。重要な XD ファイルは、Figma など現役のツールに移行しておくのが安全です。詳細は Adobe XD のサポートはいつまで？ を参照してください。
Q: XD のリピートグリッドは Figma でも使えますか？
A: Figma にはリピートグリッドそのものはありませんが、Auto Layout で類似の表現が可能 です。Pixel Fine Converter などの変換プラグインは、リピートグリッドを Auto Layout 構造に自動変換する機能を提供しています。
Q: Adobe XD を解約したら、過去のファイルは編集できなくなりますか？
A: .xd ファイル自体は手元に残りますが、XD アプリでの編集はできなくなります。閲覧・変換は変換プラグインや外部サービス経由で可能なので、解約前に重要ファイルを Figma などに移行しておくのが安全です。
✅ まとめ — 学ぶ価値と将来性のバランス
Adobe XD の使い方と、現状を踏まえた選択肢を整理しました。
記事のポイント
- XD の機能は今でも実用的: アートボード、コンポーネント、リピートグリッド、Auto-Animate など、UI デザインに必要な機能は揃っている
- ただし新規購入は終了済み（2023-06-22）、メンテナンスモード（2024 年以降）で新機能・新プラグイン追加は事実上停止
- これから学ぶなら Figma など現役ツールが有利: 求人市場・教材・コミュニティの規模が大きい
- 既存 XD ユーザーの選択肢は 3 つ: Creative Cloud 継続 / Figma 移行 / 他ツール検討
- Figma 移行が現実解になることが多い: 既存 XD ファイルは変換プラグインで Figma に持ち込める
「使い方を学ぶ」ことと「将来性を考える」ことは、対立する話ではありません。いま手元にある XD 資産を活かしつつ、長期的にどのツールに軸足を置くか を整理する材料として、本記事を活用してください。
Free プランで 3 アートボードまで変換可能。ウォーターマークなし、登録不要、ファイル送信もなし
関連ページ
- Adobe XD のサポートはいつまで？ — サポート終了時期と、移行タイミングの判断材料
- Adobe XD の代替ツールはどれを選ぶべき？ — Figma / Sketch / Penpot / Lunacy 等の比較
- XD ファイルを Figma で開く 3 つの方法 — 外部 Web 変換 / プラグイン / 手動の選び方
- XD→Figma 移行 実践ガイド — Figma 移行を決めたあとの手順とチェックポイント