デザイナーがAdobeXDで作成したUIデザインを、そのままUnityに反映したい。
この記事では、AdobeXDからUnityへデータを移植する方法を3つ紹介します。
目次
AdobeXDとは
AdobeXDは、WebサイトやモバイルアプリのUI/UXデザインに特化したツールです。軽量で直感的な操作ができ、プロトタイピングやUIアニメーションの作成、仕様書の出力まで1つのソフトで完結できます。
ゲームUIでのAdobeXD活用フロー
- 仕様書を元にワイヤーフレームやプロトタイプを作成（XDが高速）
- IllustratorやPhotoshopでUI素材を作成（作り込みが必要な場合）
- XDに素材を配置してデザインカンプを作成
- XDから仕様書を自動出力（公開プロトタイプ、デザインスペック）
方法1：Adobe製品を経由してコンバート
AdobeXDから直接Unityへの出力機能はありませんが、After EffectsとPhotoshopを経由することでコンバートできます。
変換の流れ
AdobeXD → After Effects → Photoshop → Unity手順
XD → After Effects
- 書き出したいアートボードまたはパーツを選択
- ファイル → 書き出し → After Effects…を実行
- After Effectsが起動し、コンポジションが自動生成される
After Effects CC2018以降が必要です。
After Effects → Photoshop
- コンポジション → フレームを保存 → Photoshopレイヤー…を実行
- PSDファイルとして書き出し
出力されるPSDはピクセル化されますが、位置情報は保持されます。
Photoshop → Unity
Baum2というツールを使ってコンバートします。
- GitHubからBaum2をダウンロード（https://github.com/kyubuns/Baum2）
- Unityで.unitypackageを展開
- PhotoshopでPSDを開き、Baum.jsスクリプトを実行
- 出力されたデータをUnityのImportフォルダに配置
- Prefabが自動生成される
方法2：Baum2プラグインで直接エクスポート
AdobeXD用のBaum2エクスポートプラグインを使うと、After EffectsやPhotoshopを経由せずにコンバートできます。
事前準備
- 最新のAdobeXDをインストール
- UnityにBaum2アセットをインポート
- XDで1/4サイズの画面を作成（例：720×1558の場合は180×389.5）
プラグインのインストール
- XDでプラグイン → 開発版 → 開発フォルダを表示
- 「xd-baum2-export」フォルダを作成
- GitHubからmain.jsとmanifest.jsonをダウンロードして格納（https://github.com/itouh2-i0plus/xd-baum2-export/）
- プラグイン → 開発版 → 再読込
エクスポート手順
- アートボードを選択
- プラグイン → 開発版 → baum2 exportを実行
- 出力先フォルダを選択（画像と.layout.txtが出力される）
Unityへのインポート
- 出力データをAssets/Baum2/Importに配置
- Fontsフォルダにフォントも配置
- Unityを起動すると自動処理されてPrefabが生成
- Canvasを作成してPrefabを配置
方法3：Xd2uGUIプラグインを使う
最もシンプルな方法です。XDAプラグインとXd2uGUIを組み合わせて使います。
XDの環境構築
- プラグイン → プラグインを見つける
- 「XDA」で検索してインストール
Unityの環境構築
- GitHubからXd2uGUI_1.0.1.unitypackageをダウンロード（https://github.com/teach310/Xd2uGUI/releases）
- Assets → Import Package → Custom Packageでインポート
使い方
- XDで要素をすべて選択（テキストは選択不要）
- 書き出し → 選択書き出しでPNG画像を出力（保存先はUnityのAssetsフォルダ内）
- プラグイン → Export XDAで.xdaファイルを同じ場所に保存
- Unity側で画像をすべてSpriteに変更
- 自動生成されたPrefabをHierarchyに配置
うまくいかない場合は、.xdaファイルを右クリックしてReimportを実行します。
3つの方法の比較
| 方法 | 手順の複雑さ | 再現精度 | おすすめ用途 |
|---|---|---|---|
| Adobe製品経由 | 複雑 | 高い | 複雑なUIの移植 |
| Baum2プラグイン | 中程度 | 高い | 本格的なUI制作 |
| Xd2uGUI | シンプル | 中程度 | 素早い素材配置 |
まとめ
- AdobeXDから直接Unityへの出力機能はない
- Adobe製品を経由する方法は確実だが手順が多い
- Baum2プラグインを使うとXDから直接コンバート可能
- Xd2uGUIは最もシンプルで、素早く素材を配置したいときに便利
- システムフォントは微妙にずれることがあるので調整が必要
デザイナーとエンジニアの分業を効率化するために、プロジェクトに合った方法を選んでください。
