Adobe XD

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

adobexd-plugins-baum2-unity

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

事前にソフトの準備

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

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

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

【Unity】psdデータからuGUIにコンバートする方法 psdデータからuGUIにコンバートするアセットはストアに幾つかあるのですが、 無料なのと、以前自動で9スライスされるOnionRin...

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へコンバートする方法 Unity #2 Advent Calendar 2018 10日目の記事です。 普段はさまざまなDCCツール(Digital C...

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

引用

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

まとめ記事の紹介

参考記事

参考書籍

gitの入門書です。

created by Rinker
¥2,484
(2019/02/19 01:22:01時点 Amazon調べ-詳細)

LifeHackに。

ABOUT ME
すいみん
東京在住。デザイナー寄りのテクニカルアーティスト。 ブログは技術検証の備忘録として書いています。