Help us understand the problem. What is going on with this article?

AdobeXDのアートボードをUnityのPrefabに変換するツール Xd2uGUI

More than 1 year has passed since last update.

アートボードに配置されたノードの情報をもとにuGUIのプレハブを自動生成するツールを作りました。

xd2ugui1.jpg

環境

Unity 2018.3以降 (プレハブの仕組みが変わったため)
.Net 4.x
AdobeXD 14.0

リポジトリ

AdobeXDからプレハブ生成用の中間ファイルを出力するためのプラグイン
XDA Exporter

中間ファイルからUnityのプレハブを作り出すツール
Xd2uGUI

概要

AdobeXDでゲームのUIのモックを作ってから実際にUnityで作り始めるのは完成系が早い段階で見えるという点で非常に有効です。

しかし、デザイナーが作ったモックからUnityのプレハブをまた一から作る作業は非常に面倒な上に結構工数とられます。

当時、PSDからuGUIのプレハブを自動生成するツールはあったのですが、AdobeXDから生成するツールはなかったので自作にいたりました。

同じく、AdobeXDからプレハブを生成するitouh2-i0plusさんの以下の記事があります。
https://qiita.com/itouh2-i0plus/items/6a948aa40acada879ce7

こちらの記事のプラグインはBaum2用に作られているのに対して、Xd2uGUIはプレハブを作るツールでしかなく、UIの実装には全く依存しないというメリットがあります。

使い方手順

  1. プラグインをインストールする
  2. Unity側に画像素材をあらかじめ入れておく
  3. AdobeXDのアートボードをXDAファイルとして出力する
  4. XDAからプレハブを生成する。

Unity、AdobeXDのプラグインをインストールする

Xd2uGUIのインストール

こちらからリポジトリにとぶ

スクリーンショット 2019-02-19 20.37.58.jpg

スクリーンショット 2019-02-19 20.38.30.jpg

Unityを開いた状態でダウンロードしたファイルを開くと以下のポップアップがでるのでInstallしたら完了です。

スクリーンショット 2019-02-19 20.42.26.jpg

エラーが出た場合はUnityの環境を確認してみてください。

XDA Exporterのインストール

スクリーンショット 2019-02-19 20.58.43.jpg
ない場合はAdobeXDのバージョンを確認してみてください。

Unity側に画像素材をあらかじめ入れておく

Xd2uGUIで画像の出力はしないので、自分であらかじめUnityにインポートします。
あ.png

画像ファイルの場所はどこでも大丈夫ですが、画像名とAdobeXDのノード名は一致させてください。

スクリーンショット 2019-02-19 21.07.49.png

Imageとして使うので形式はSpriteにしておきます。
スクリーンショット 2019-02-19 21.08.58.png

AdobeXDのアートボードをXDAファイルとして出力する

2.jpg

アートボード内のノードを選択し、プラグイン > Export XDAで出力できます。

XDAからプレハブを生成する。

Xd2uGUIが入っていればUnityにインポートするだけで隣にプレハブが生成されます。
手動で生成したい場合にはReimportします。

Reimport.gif

まとめ

デフォルトでは非常にシンプルな生成ロジックになっています。
生成ロジックはカスタマイズ可能なので、より正確に生成されるようにしたりTextMeshProで生成できるようにするなどぜひぜひ拡張してみてください!
(プルリクしていただけるととても嬉しいです)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした