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

まとめ記事の紹介

お得情報


【Amazonタイムセール祭り】

Ankerのスマートフォン・タブレット関連製品や家電、オーディオ製品など30製品以上が最大50%オフ
https://amzn.to/2VbUejw

Adobeソフトを安く使う方法


オンライントレーニング通信講座
を受講すると、Adobeのソフトを学生版を購入することができます。

○通常 年間プランだと65,760(月5,480円)のところ、通信講座付きで29,800円(月換算で2,483円!)45%OFF

○学生版でも商用利用可

○ついでにオンライントレーニング通信講座
でInDesignやAfterEffectsも勉強できる!

参考記事

参考書籍

gitの入門書です。

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

LifeHackに。

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