Adobe XDからUnityへUIを移す3つの方法【旧版・配布状況】

Adobe XDの既存デザインをUnityのuGUIへ移す旧ワークフローを比較します。After Effects・PSD経由、XD用Baum2書き出し、XDA／Xd2uGUIの3系統を、必要なファイルと確認箇所で分けます。PSDからのBaum2導入・命名の詳細はBaum2の記事にまとめています。

この記事は旧版資料です。Adobe XDはメンテナンスモードで、Adobeは新機能の開発を行っていないと説明しています。既存のXD環境・利用権・プラグインが使えるかを先に確認してください。この記事の画像は2018〜2019年の旧手順を示す既存画像で、現在の環境で撮り直したものではありません。Adobe XD公式FAQ

3つの移行方法を選ぶ

• PSDとして渡せる案件：After Effects経由でPSDを作り、Baum2でuGUIへ取り込む。中継する各アプリで文字・画像・階層を照合する。
• 既にXD用Baum2プラグインを保有する案件：旧書き出しファイルと対応するBaum2版を保管して再現する。紹介されていた配布URLは現在404で、新規導入手順としては案内できない。
• XDAを使う案件：teach310氏のXD側xda_exporterとUnity側Xd2uGUIを組み合わせる。Adobe公式プラグインではない。

移行精度の順位付けや「必ず忠実に再現できる」という評価は行いません。手順の少なさだけで選ばず、同じ小さな画面で文字・配置・操作を比較してください。

方法1：After Effects・PSDを経由する

AdobeXD → After Effects → Photoshop → Unity

AdobeのXD連携資料はAfter Effects 2018以降への書き出しを説明しています。After Effectsのフレーム書き出し資料ではPhotoshopレイヤーへの保存と、未対応の表現では見た目が変わる場合を案内しています。

1. 旧XDのファイル → 書き出し → After Effectsから対象要素を書き出す。現在の導入条件と対応要素は使用版のヘルプで確認する。
2. After Effectsの対象コンポジションから、コンポジション → フレームを保存 → Photoshopレイヤーを使ってPSDを作る。
3. PSDを開き、残す文字、画像化された要素、グループ、キャンバス寸法を確認する。
4. Baum2の命名に合わせてPSDを整え、中間ファイルをAssets/Baum2/Importへ書き出す。
5. 生成PrefabをCanvasの子へ置き、Gameビューで元デザインと比較する。

PSDができた時点でuGUIへの移行が完了するわけではありません。文字が画像になった部分、ボタンの判定範囲、アンカー、画面サイズへの追従はUnity側で確認します。Baum2はUnity 2017／2018／2019、Photoshop CC 2018／2019が開発者の記載環境です。

方法2：旧XD用Baum2プラグインを使う

旧記事で紹介していたxd-baum2-exportのURLは2026年10月3日の確認で404でした。削除・非公開などの理由は確認できていません。以下は既にプラグインを持つ人の保守用記録です。

旧作例では720×1558に対して180×389.5のアートボードを使用していました。4分の1をすべての環境で必須の倍率とする根拠は確認できません。出力寸法とCanvasの基準解像度を比較して判断してください。

1. 保存済みプラグインのmain.jsとmanifest.jsonを旧XDの開発用フォルダへ置き、プラグインを再読み込みする。
2. 対象アートボードを選んで書き出し、.layout.txtと画像一式を確認する。
3. 対応する旧Baum2を入れた作業用プロジェクトのImportへ配置する。
4. Consoleと生成Prefabを確認し、Canvasに置いて文字・画像・寸法を照合する。

書き出し側と取り込み側の版が違うと、同じ拡張子でも読み取れない可能性があります。元デザインだけでなく、プラグイン一式、出力ファイル、Unity側の版をセットで保管してください。

方法3：XDA／Xd2uGUIを使う

XD側のxda_exporterと、Unity側のXd2uGUIはいずれもteach310氏の配布物です。Xd2uGUIのREADMEにはUnity 2018.3以降・.NET 4.x以降の表記がありますが、Unity 6での確認結果とは区別します。旧記事が使用する1.0.1の配布ページを基準に、使った版を記録してください。

1. 既存のXD環境でxda_exporterを利用できるか確認する。旧画像のプラグイン検索が現在も同じとは限らない。
2. 画像にする要素をPNGで書き出し、UnityのAssetsへ先に取り込む。
3. Texture TypeをSprite (2D and UI)へ変更する。Xd2uGUIのREADMEでは、XDのノード名と画像名の一致が自動割り当ての条件。
4. XDのExport XDAで.xdaを書き出し、Unityへ取り込む。旧記事の例ではPNGと同じフォルダへ保存する。
5. 生成された.xdaの隣のPrefabを確認し、Canvasへ配置して表示と階層を比較する。

画像・文字・Prefabが欠けるとき

• 画像が未割り当て：PNGが先に取り込まれたか、Sprite設定か、XDノード名と画像名が一致するかを確認する。
• Prefabがない：Consoleの最初のエラー、Xd2uGUIの導入状態、.xdaの場所を確認し、条件を直してからReimportする。
• 文字が異なる：フォント、改行、サイズ、基準解像度を比較する。既存のシステムフォント任せで同じ表示になると想定しない。
• 再書き出し：生成Prefabと手動調整部分の差分を保存してから実行する。

旧比較画像と移行後の確認

次の画像は既存記事の比較資料として残しています。図中の使いやすさや再現度は今回測定した結果ではなく、現在の配布可否・対応版は本文の確認を優先してください。

• 文字の内容・改行・フォントと、画像の透過・位置・寸法を照合する。
• Canvas Scalerとアンカーを設定し、横長・縦長のGameビューで見切れを確認する。
• ボタン等のコンポーネントと、実際に呼び出す処理を確認する。デザイン変換だけではゲームの操作処理は作られない。
• 元XD、書き出しファイル、生成Prefab、使用版の記録を残す。

関連するUnityの記事

2026年10月3日に配布元とAdobeの公開資料を確認しました。XD・After Effects・Photoshop・Unityでの変換は今回未実施です。旧画面の再現とUnity 6への移行は未検証です。