Adobe XDを使うと、
きゅぶんず (@kyubuns)
こんなに効率よく
ゲームUIが作れちゃうの！？
Gotanda.unity #17

話すこと
✕ キレイなUIをデザインする方法
✕ UI制御プログラムのキレイな書き方
⃝ 頭に思い浮かんだUIを素早くUnity上で表示させる方法
⃝ UIを試して変えてのサイクルを高速化する方法
この早さこそが効率の良さ！

個人開発から
大規模チーム開発まで
全員にオススメ

Adobe XD
• Adobe製のUI/UXデザインツール。プロトタイピングツールとも。
• https://www.adobe.com/jp/products/xd.html
• つまり何？
• UIを作るために作られたツール。

でもAdobe XDって・・・
• 高いんでしょう？
• 無料プランあります。
• macOSでは動かないんじゃ？
• WindowsでもmacOSでも動きます。

AkyuiUnity.Xd
• MITライセンスで使える XD -> Unity 変換ライブラリ
• https://github.com/kyubuns/AkyuiUnity/

ボタンはもちろん、スクロールリストなんかも再現可能。
（このサンプルはAkyuiUnityのリポジトリに含まれています。）

実演 / Adobe XDを使ってみる
• 画面レイアウトを作るために作られたツールなので、
直感的で素早くUI構築が出来る
• 全部の画面をまとめて見れるし、遷移の確認も出来る、
その上モバイルプレビューも出来るので、
Unityに取り込むまでもなく画面の確認が出来る

実演 / Unityに取り込む
• ドラッグ&ドロップするだけでXDファイルをUnityに持っていける
• 「やっぱりここ変えよう！」となっても、
XD上で編集してボタン1つ押すだけ

AnKuchen
• 生成されたPrefabをどうやって扱うかの一例として、
オススメライブラリの紹介
• Scriptから文字列指定でGameObject, Componentを取ってこれる

スクリプトとの繋ぎ込み例
[SerializeField] private UICache uiCache;
public void Start()
{
uiCache.Get<Text>("HogeText").text = "Hello!";
uiCache.Get<Button>("HogeButton").onClick.AddListener(() => Debug.Log("Click Button”));
}
GameObject.Findと違い、キャッシュされているので十分に早い。
transform.Findと違い、どの階層にHogeText, HogeButtonがあっても取ってこれる。

VisualScripting(Unity2021) との繋ぎ込み例

おまけ
[SerializeField] private UICache uiCache;
public void Start()
{
var hogeUi = new HogeUiElements(uiCache);
hogeUi.Text.text = "Hello!";
hogeUi.Button.onClick
.AddListener(() => Debug.Log("Click Button"));
}
public class HogeUiElements : IMappedObject
{
public IMapper Mapper { get; private set; }
public Text Text { get; private set; }
public Button Button { get; private set; }
public HogeUiElements(IMapper mapper)
{
Initialize(mapper);
}
public void Initialize(IMapper mapper)
{
Mapper = mapper;
Text = mapper.Get<Text>("HogeText");
Button = mapper.Get<Button>("HogeButton");
}
}
型が付いている状態で
UI制御のコードが書ける！
テストも走らせれる！

実現出来ること
• 画面を素早く作って素早くUnityに持っていって試せる！
• 変更したい箇所が出てきても、XD上で編集したらボタン1個で反映。
開発サイクルを高速化できる！
• 例 : プランナーが仮素材で必要な要素をXD上で作っておけば、
プログラムの組み込みと、デザイン作業が並列で出来る

Adobe XDを使うと、
こんなに効率よく
ゲームUIが作れちゃう！

もっと知りたい方はこちら！
https://www.youtube.com/watch?v=bJC9ueWZp28

ご清聴
ありがとう
ございました。
## AkyuiUnity ☆13
1
Adobe XD to Unit
y
github.com/kyubuns/AkyuiUnity
## AnKuchen ☆4
1
Control UI Prefab from Script Librar
y
github.com/kyubuns/AnKuchen
## AnimeTask ☆9
6
Task Animation Library for Unit
y
github.com/kyubuns/AnimeTask
## Auto9Slicer ☆7
7
Auto 9 slice sprite generator on Unit
y
github.com/kyubuns/Auto9Slicer
## Baum2 ☆21
8
Photoshop(psd) to Unit
y
github.com/kyubuns/Baum2
良いなと思ったら、ぜひStarをお願いします！
kyubuns.dev