MENU

カテゴリー

プロフィール

すいみん

技術的なことが好きなデザイナーです。
詳細はこちら

自作ツール&スクリプト

【AdobeXD】Baum2形式で書き出してUnityで画面を再現する方法

adobexd-plugins-baum2-unity

Baum2形式で書き出してUnityで画面を再現するプラグインを早速試してみました!

事前にソフトの準備

  • 最新のAdobeXDをインストール

  • UnityにBaum2のアセットをインポート

導入方法と使い方はこちらを参考

【Unity】psdデータからuGUIにコンバートする方法

Adobe XDでの素材準備

  • 1/4のサイズで画面を作成。今回は720×1558で再現したいので180x389.5の画面を用意

Adobe XDのプラグインのインストール

  1. プラグイン>開発版>開発フォルダを表示でフォルダを開く

  1. 「xd-baum2-export」というフォルダを作成して、GitHubでダウンロードしたデータ(main.jsとmanifest.json)を格納

  1. プラグイン>開発版>再読込をして、baum2 exportが表示されていることを確認

Adobe XDのプラグインbaum2 exportでエクスポート

  1. アートボードを選択してプラグイン>開発版>baum2 exporを実行、フォルダを選択すると画像と位置情報のテキストが出力されます。

Unityへインポート

  1. Assets>Baum2>Importに出力したデータを格納(画像フォルダと○○.layout.txt)※ついでのFontsフォルダにフォントも入れておく

  1. Unityを起動すると自動処理されてプレハブが生成されます。

  2. あとはCanvasを作成して、Prefabを入れ込めばコンバートされたアートボードが表示されます。

まとめ

必要な位置とかサイズ情報があれば、Baum2で変換できてしまいますね!

【Unity】AdobeXDで作成したカンプをUnityへコンバートする方法

先月のアドカレでAdobeXD → AfterEffects → Photoshop → Unityを経由してコンバートしていたのですが、こちらのプラグインを使うことでだいぶシンプルに移植できました!
 

引用

https://qiita.com/itouh2-i0plus/items/6a948aa40acada879ce7