• AdobeXD のアートボードを Unity 用 UI Prefab にコンバートします。
• 

1. インストール
   • ダウンロードする場合
     1. https://github.com/itouh2-i0plus/XdUnityUI/releases
     2. 最新バージョンの 「▶Assets」をクリックし XdUnityUI.unitypackage をダウンロードします。
     3. XdUnityUI.unitypackage を Unity にインポートしてください。
     4. /Assets/I0plus/XdUnityUI フォルダが作成されます
     5. AdobeXDプラグインをインストール
        • /Assets/I0plus/XdUnityUI/ForAdobeXD/XdUnityUIExport.xdx をダブルクリックします。
   • Git リポジトリからクローンする場合
     1. Git リポジトリをクローン - https://github.com/itouh2-i0plus/XdUnityUI - LFS を利用しています。Git クライアントによっては設定が必要となります。
     2. (クローンフォルダ)/UnityProject を Unity で開きます - Assets/I0plus/XdUnityUI 以下が、プラグインフォルダになっています - 現在 Unity2019.3、UniversalRenderPipeline のプロジェクトとなっています。
     3. AdobeXDプラグインをインストール
        • /Assets/I0plus/XdUnityUI/ForAdobeXD/XdUnityUIExport.xdx をダブルクリックします。

1. AdobeXD サンプルを 開く

   • /Assets/I0plus/XdUnityUI/ForAdobeXD/samples.xd にあります。

2. AdobeXD プラグイン起動

   1. アートボード TestButton 内、ルート直下のレイヤー(例えば yellow-button)を選択状態にします。 - 当プラグインは出力時にこの操作が必ず必要になります。 - 参考：Edit Context rules · Adobe XD Plugin Reference
   2. プラグインメニューから、「XdUnityUI export plugin」をクリック、起動します。
   3. 「Folder」の項目が出力フォルダ先指定です。(クローンしたフォルダ)/UnityProject/I0plus/XdUnityUI/Import フォルダを選択。
   4. 「Export」をクリック。 - 出力時にエラーで止まるケースについて、当記事「問題が起こったとき」を参考にしてください。

3. Unity コンバート

   • Unity ウィンドウをアクティブにするとコンバートが開始されます。
   • 作成された Prefab は Assets/I0plus/CreatedPrefabs に配置されます。
   • 作成された UI 画像は Assets/I0plus/CreatedSprites に配置されます。
     • Slice 処理されています。
   • できた Prefab を Canvas 以下に配置します。

サンプル修正 README.md 修正・追記 XdPlugin/main.js コメント修正

TextMeshPro サンプル追加、説明修正 Button サンプル追加 Toggle サンプル追加 README.md 修正

• unitypackage の作成
• unitypackage からのインストール方法追記

• Windows で開発しています。
  • Mac での動作確認は現在不十分です。
• Unity2019.3 で開発しています。
• AdobeXD は最新版でテストしています。
  • バージョン：27.1.12.4

• AdobeXD レイヤー名に対して、コンバートルールが適応されます。
  • コンバートルールは CSS の記述によって定義されています。
  • json ファイルと画像ファイルが出力されます。
  • 出力画像は、指定が無い限りスライス処理されます。
• 出力ファイルを Unity プロジェクト、XdUnityUI/Import フォルダに書き込むことで Unity でのコンバート処理が行われます。
• 指定されたフォルダに Prefab と Sprite が出力されます。

• AdobeXD レイヤー名で、Unity 上での機能が決まります。

• 例

  image
  window-image
  icon-image
  

• 説明

  • レイヤー、グループレイヤーに上記のような名前が付いていた場合、そのレイヤーと子レイヤーを合成した画像を生成し、Unity 上で Image コンポーネントが付与されます。

• 注意

  • 子レイヤーも画像としてしまうため、子レイヤーのコンバート処理はされません。

• 例

  button
  start-button
  back-button
  

• 説明
  • Unity 上で button コンポーネントが付与されます。
• 注意
  • 子レイヤーに image レイヤーが必要です。

• 例

  text
  title-text
  name-text
  

• 説明

  • テキストレイヤーに上記のような名前をつけることで Unity 上でも Text コンポーネントが 付与 されます。

• 注意

  • AdobeXD で使用したフォントが Unity プロジェクト内、Assets/I0plus/XdUnityUI/Fonts/以下、.ttf か.otf で存在する必要があります。
  • AdobeXD と Unity では、デザイン上の差異があります。(例：カーニング)

• 例

  textmp
  title-textmp
  name-textmp
  

• 説明

  • テキストレイヤーに上記のような名前をつけることで Unity 上でも TextMeshPro コンポーネントが 付与 されます。

• 注意

  • Project Settings > Player > Scripting Define SymbolsにTMP_PRESENTが必要です
  • AdobeXD で使用したフォントが Unity プロジェクト内、Assets/I0plus/XdUnityUI/Fonts/以下、TextMeshPro フォントアセット が必要です
    • 例: AdobeXD で Open Sans フォント Regular を使用している場合
      • TextMeshPro フォント、ファイル名「Open Sans-Regular SDF.asset」を探します
  • AdobeXD と Unity では、デザイン上の差異があります。(例：カーニング)

• 追記予定

  • layout
  • viewport
  • scrollbar
  • toggle

• 原因
  • AdobeXD 上の問題かもしれません。調査中です。
• 対策
  1. レイヤーを選択し画像出力の操作をする。
  2. 出力先に XdUnityUI/Import フォルダを選択すると、出力不可になっているか確認。
  3. フォルダを変えて画像出力。
  4. 再度 Import フォルダに出力する。
  5. 上記が成功した場合、プラグインからの出力も成功するようになります。

• 原因

  • 失敗後のファイルへの上書きでは、Unity 側がファイルの更新を検知できないため。

• 対応

  • XdUnityUI/Import 内の_XdUnityUIImport、_XdUnityUIImport.meta ファイル以外を削除する。
  • もう一度エキスポートする。

• 原因
  • フォントが無い可能性があります。
• 対策
  • Console に探そうとして見つからなかったフォントファイル名が出力されます。
  • フォントファイルを場合によってはリネームして、XdUnityUI/Fonts ディレクトリ(_XdUnityUIFonts ファイルがおいてあるディレクトリ)にコピーしてください。

• 原因
  • Scripting Define SymbolsにTMP_PRESENTが無い
• 対策
  • Project Settings > Player > Scripting Define SymbolsにTMP_PRESENTを追記します。
    • TextMeshProパッケージをインストールしてもTMP_PRESENTが追記されない場合があるそうです。(v3.0?未確認)

• 原因1
  • アートボードの「レスポンシブサイズを変更」がONになっていない
• 対策1
  • アートボードを選択し、「レイアウト」>「レスポンシブサイズを変更」をONにしてください。
• 原因2
  • AdobeXD プラグイン実行時、アートボードのサイズを変更しレイヤーのサイズの変化をみてレスポンシブパラメータを取得しています。その際、リピードグリッド内レイヤー等、サイズが変わらないものはレスポンシブパラメータが確定できません。
• 対策2
  • margin-fix プロパティをつかい、明示的に指定してください。
    • 例: start-button {margin-fix: t b l r}
  • AdobeXD Plugin API で、レスポンシブパラメータが取得できるようになりましたら対応します。

• 原因
  • アートボードの背景が設定してある
• 対策
  • アートボードを選択し、「アピアランス」>「塗り」のチェックを外してください。

• 変換ルール CSS の編集
  • XDXファイルを変更する場合
    1. XdUnityUIExport.xdx を XdUnityUIExport.zip とリネーム
    2. 解凍し xd-unity.css ファイルを編集する
    3. 再び ZIP 圧縮、拡張子を xdx に変更
    4. プラグイン再インストール
  • AdobeXD 開発フォルダに展開する場合
    1. XdUnityUIExport.xdx を XdUnityUIExport.zip とリネーム
    2. 解凍しフォルダをAdobeXD開発フォルダ(プラグイン>開発版>開発フォルダーを表示)にコピーする
    3. xd-unity.cssを編集
    4. プラグイン再読み込み(プラグイン>開発版>再読み込み)
• 変換ルール CSS の説明
  • 追記予定
• アートボード毎の変換ルール
  • 追記予定

• 追記予定

• 追記予定

• 目標
  • リリースまで AdobeXD で UI デザインできるようにする。
• メリット
  • デザイナの手に最終版をもたせる。
  • CCLibrary を使い、各種ツールとの連携ができる。
• 課題
  • コンバートでの Prefab 上書きによって、Prefab に対して行った作業(Unity 上で行ったコンポーネント追加、パラメータ調整)が消えてしまう
    • 対応策
      • コピーして使用する。
      • Prefab Variant で、追加作業の退避。
        • 名前の変更で作業が消えてしまう。
        • Variant ファイル内には作業分残っている模様(これを復帰できないか調査中)。
  • 同じ Sprite 画像が大量にできてしまう。
    • 対応中
      • Sprite 画像を比較して、同じであれば結合するツールを開発中。
  • 9Slice
    • 対応中
  • コンポーネントのステート
    • https://helpx.adobe.com/jp/xd/help/create-component-states.html
    • AdobeXD Plugin API で取得できるようになりましたら、対応します。
• その他
  • 調査中
    • UXML へコンバートできないか。
    • DOTS モード用 UI が作成できないか。

• @kyubuns 様 (https://kyubuns.dev)
• Baum2 (https://github.com/kyubuns/Baum2)