Zenn
😊

Figma Converter for Unity 4 Deveroper

2025/03/13に公開
Figma
Unity
tech

1. 導入

1.1 はじめに

このマニュアルは、Figma Converter for Unityを使用する前に読むことを強く推奨します。ツールを最大限に活用するための詳細な手順や情報が記載されています。

このアセットは他のアセットと連携して動作することが可能です。対応しているアセットは、Asset Storeページの「DEPENDENCIES」タブで確認できます。これらのアセットを使用するには、まずAsset Storeから購入し、プロジェクトにインポートしてください。その後、本マニュアルとデザイナー向けマニュアルの両方を読んでください。これらのマニュアルには、使用方法や対応するタグについての詳細情報が記載されています。

1.2 サポート窓口とバグ報告

アセット使用中にエラーが発生した場合は、以下の連絡先から開発者に報告してください。開発者は迅速な対応を行い、個別にサポートを提供します。発見されたバグは、次回のアップデートで修正されます。

また、新機能の提案や改善案も歓迎しています。それらの提案は今後の更新で考慮されます。

1.3 変更履歴と更新情報

マニュアルの変更に関する情報は、開発者の公式ウェブサイトにある変更履歴（Changelog）で確認できます。常に最新バージョンを利用することで、安定した動作を確保できます。

1.4 プロジェクトデータの取り扱いと機密保持

問題を再現するために、開発者がFigmaプロジェクトへのアクセスを依頼する場合があります。この場合、プロジェクトデータは機密保持ポリシーに基づき、問題解決以外の目的で使用されることはありません。企業で作業している場合は、プロジェクトアクセスの許可を管理者と調整してください。

2. セットアップと初期設定

Figma Converter for Unityを正しく使用するための初期設定とセットアップ手順を以下に説明します。

Dependency Managerについて

Figma Converter for Unityは、依存関係を管理するために「Dependency Manager」を使用します。このツールは、Json.NETやその他の依存アセットが正しくインストールされているかを確認し、プロジェクト内で必要な設定をサポートします。

Dependency Managerを使用するには、Unityエディタのコンテキストメニューからアクセスしてください。開いた際にJson.NETが「ENABLED」と表示されていれば、依存関係が満たされています。「DISABLED」と表示される場合は、以下のセクションに従い、Json.NETをインストールしてください。

2.1 Json.NETのインストール方法

Figma Converter for Unityの動作には、Json.NETライブラリが必要です。このライブラリのインストール手順を以下に示します。

  1. Unityエディタを開き、メニューから「Package Manager」を選択します。
  2. 右上にある「+」ボタンをクリックし、「Install package by name」を選択します。
  3. 表示されるダイアログにcom.unity.nuget.newtonsoft-jsonと入力し、「Install」をクリックします。
  4. Json.NETが正しくインストールされると、Dependency Managerで「ENABLED」と表示されます。

もしUnityのPackage Managerでインストールが失敗する場合、Json.NETの公式GitHubリポジトリ（Newtonsoft.Json）から最新バージョンをダウンロードしてください。

ダウンロード後、netstandard2.0フォルダ内のNewtonsoft.Json.dllをプロジェクトのAssetsフォルダに追加してください。

2.2 Figma Converterのシーンセットアップ

Figma Converter for Unityを使用するには、プロジェクト内に適切なシーン設定を行う必要があります。

  1. Unityのシーン内で、新しい空のGameObjectを作成します。
  2. 作成したGameObjectに「FigmaConverterUnity」スクリプトをアタッチします。
  3. メニューバーからアセット専用のセットアップオプションを利用することもできます。

これにより、Figma Converterがシーン内で動作可能になります。

2.3 Figmaアカウントの認証（Auth）

Figmaプロジェクトをインポートするには、Figmaアカウントを認証する必要があります。

  1. Figma Converter for Unityの「Settings」パネルを開き、「FIGMA AUTH」タブに移動します。
  2. 「Sign In With Web Browser」ボタンをクリックします。
  3. ブラウザが開き、Figmaアカウントへのアクセス許可を求める画面が表示されます。「Allow Access」をクリックしてください。
  4. 認証が成功すると、アセット内にFigmaアカウントの名前が表示されます。

もし自動認証が失敗する場合は、Figmaのウェブサイトから個人用アクセストークンを取得し、「Token」フィールドに入力して手動で認証を行ってください。

2.4 プロジェクトフレームのインポート手順

Figmaプロジェクトの特定のフレームをUnityにインポートする手順は以下の通りです。

  1. Figmaで対象プロジェクトを開き、右クリックで「プロジェクトリンク」を取得します。
  2. Figma Converterの「Frames」セクションにリンクを貼り付け、「Download」ボタンをクリックします。
  3. ダウンロードが完了すると、プロジェクト内のページとフレームの一覧が表示されます。
  4. インポートしたいフレームを選択し、「Import」ボタンをクリックします。
  5. インポートが完了すると、Unityのシーンにフレームが反映されます。

この手順により、Figmaのデザインを効率よくUnityに統合できます。

3. ユーザーインターフェース

Figma Converter for Unityのユーザーインターフェースは、設定を直感的に行えるよう設計されています。このセクションでは、UIの概要と各設定タブの詳細について説明します。

3.1 アセットUIの概要

Figma ConverterのUIは、以下の主要な操作をサポートする直感的なインターフェースを提供します：

  1. Figmaプロジェクトのリンク設定:

    • Figmaプロジェクトへのリンクを入力してインポートを開始します。

  2. キャッシュされたプロジェクトのリストを表示:

    • 過去にインポートしたプロジェクトのリストを確認し、必要なプロジェクトを再選択してインポートできます。

  3. プロジェクトのダウンロード:

    • 入力されたリンクからプロジェクトをダウンロードします。ダウンロードされたプロジェクトは自動的にキャッシュされます。

  4. フレームの選択とインポート:

    • ダウンロード済みプロジェクトから特定のフレームを選択してインポートします。

  5. インポートの停止:

    • インポートプロセスを一時停止または完全に停止できます。

  6. アセット設定の開閉:

    • アセットの設定ウィンドウを開いて、詳細な設定を調整します。

  7. アセット表示モードの切り替え:

    • 表示モードを切り替えることができます。
      • Inspectorモード: Unityのインスペクタウィンドウ内で表示。
      • Windowモード: 独立したウィンドウとして表示。

  8. バージョン情報ラベル:

    • 現在のアセットバージョンと最新バージョンを表示します。
      • 青色: 最新バージョンのリリースから時間が経過しているため、更新が推奨されます。
      • 赤色: エラーが含まれている可能性があるため、更新が強く推奨されます。
    • バージョン上にカーソルをホバーすると、そのバージョンに関する詳細な情報が表示されます。

3.2 メイン設定タブの詳細設定

メイン設定タブでは、FigmaデザインをUnityプロジェクトにインポートする際の基本的な動作設定を行います。

UGUI、UITK、Nova UIの選択

  • UGUI: レイアウトをCanvasにインポートします。
  • UITK: レイアウトをUI Builderにインポートします。
  • Nova UI: レイアウトをNova UIシステムにインポートします。

レイヤー値の設定

インポートされたすべてのGameObjectに対して共通のLayer値を設定します。これにより、インポート後のオブジェクトの管理が容易になります。

ポジショニングモード（Absolute/GameView）

  • ABSOLUTE: Figma内のキャンバス上のフレームの位置をそのまま再現します。
  • GAMEVIEW: フレームをGameViewのエッジにアンカーします。ただし、UITKモードでは動作しません。

GameObject名の長さ制限

  • インポートされたGameObjectの名前の最大長を設定します。
  • テキストコンポーネントを含むGameObjectの名前も個別に制限可能です。

ベクター統合の無効化（Beta）

  • 「As is」オプションを有効にすると、プロジェクトをそのままインポートできます。
  • 個々のベクターがスマートマージで単一のスプライトに統合されません。
  • この機能はベータ版であり、使用中にエラーが発生する可能性があります。

HTTPSの有効化/無効化

  • Figmaサーバーへのアクセス時にHTTPSを使用するかどうかを設定します。
  • 証明書の問題が発生した場合に、この設定を無効にすることで解決する場合があります。

GameObject名に使用可能な文字

  • GameObject名に含めることができるラテン文字や数字以外の文字を設定できます。
  • 一部の文字（例: バックスラッシュ）は特定の条件で無視される場合があります。
  • 新しい文字を追加すると、アセットの安定動作が保証されない場合があります。

3.3 画像とスプライトの設定

Figma Converter for Unityでは、画像やスプライトを適切に管理するための設定が用意されています。

Imageコンポーネントについて

Imageコンポーネントは、シーン内でスプライトをレンダリングするために使用されます。現在サポートされているImageアセットの一覧は、アセットストアページの「DEPENDENCIES」タブで確認できます。

具体的なデザイン上の詳細については、「Manual for designers」に記載されています。以下のパスで確認可能です：

Assets\D.A. Assets\Figma Converter for Unity\Manual for designers.pdf

サポートされているImageアセット一覧

  1. UnityEngine.UI.Image - Unity標準のImageコンポーネント。
  2. Shapes2D.Shape - Shapes2Dアセット由来のコンポーネント。
  3. MPUIKIT.MPImage - Modern Procedural UI Kitアセット由来のコンポーネント。
  4. UnityEngine.UI.ProceduralImage - Procedural UI Imageアセット由来のコンポーネント。
  5. UnityEngine.UI.RawImage - Unity標準のRawImageコンポーネント。
  6. UnityEngine.SpriteRenderer - Unity標準のSpriteRendererコンポーネント。
  7. DTT.UI.ProceduralUI.RoundedImage - Procedural UIアセット由来のRoundedImageコンポーネント。
  8. Nova.UIBlock2D - Novaアセット由来のUIBlock2Dコンポーネント。
  9. Unity.VectorGraphics.SVGImage - Vector Graphicsアセット由来のSVGImageコンポーネント。

4. テキストとフォント

Figma Converter for Unityでは、Figmaデザイン内のテキストをUnityプロジェクトにスムーズにインポートできるよう、柔軟なテキストコンポーネントの設定が提供されています。このセクションでは、テキストコンポーネントの選択、フォント設定、フォントアセットの自動生成について説明します。

4.1 Text Setting

  1. Text Component — Figmaからインポートされたテキストは、指定したテキストコンポーネントを使用してシーンに描画されます。以下のコンポーネントが利用可能です：

    • Unity Text: Unityの標準的なテキストコンポーネント。
    • TextMeshPro: 高度なスタイリングやレイアウトを提供するTextMeshProアセットが必要です。
    • RTLTMPro: 右から左へのテキスト表示に対応するTextMeshProの拡張（RTLTMProリンク）。

  2. Override TMP Letter Spacing — デフォルトでは、FigmaからUnityにインポートされる際に「Letter Spacing」の値は転送されません。これは、TextMeshProフォントファイル内で手動で設定することが推奨されているためです。しかし、このオプションを有効にすると、Figma内で設定された「Letter Spacing」の値が各テキストコンポーネントに転送されます。

  3. Override TMP Line Spacing — 「Letter Spacing」と同様に、このオプションを有効にすると、Figmaで設定された「Line Spacing」の値がUnityのテキストコンポーネントに適用されます。

  4. Unity Text Settings — 「Text Component」で選択したテキストコンポーネントに応じて、このセクションの設定が変化します。詳細は、Unityの公式ドキュメント（Unity Text または TextMeshPro）を参照してください。

  5. Font Settings — このセクションでは、プロジェクトインポート時に使用するフォントを設定できます。

    • アセットはシリアライズされた配列からフォントを取得します。そのため、選択したテキストコンポーネントに基づいてこれらの配列を埋める必要があります。
    • フォントフォルダを指定し、「Add Fonts from Current Folder」ボタンをクリックすると、そのフォルダ内のフォントが自動的に配列に読み込まれます。
    • 「...」ボタンを使用してカスタムフォントフォルダを指定できます。このフォルダは「Assets」フォルダ内に配置する必要があります。

  6. Google Fonts Settings — Figma Converter for UnityにGoogle Fontsを接続することで、Figmaプロジェクトのインポート中にフォントを自動的にダウンロードできます。この機能はGoogle Fontsリポジトリ内のフォントにのみ対応します。詳細は「Google Fonts」スライドで確認できます。

  7. Font Asset Creator Settings — Google Fontsからフォントをインポートする際、TextMeshProが有効になっている場合、これらの設定が使用され、通常のフォントがTextMeshProフォントに自動変換されます。詳細は「Font Asset Creator」のドキュメントを参照してください。

  8. Button for downloading and generating missing fonts without importing frames — フレームをインポートせずに、欠落しているフォントをダウンロードして生成するボタンです。このボタンを使用するには、「UNITY COMPONENTS」タブでテキストコンポーネントを選択し、ダウンロードボタンを押してください（インポートボタンを押す必要はありません）。

4.2 Google Font

Google Fontsの設定

Google FontsをFigma Converter for Unityに接続すると、Figmaプロジェクトのインポート中にフォントが自動的にダウンロードされます。ただし、一部のフォントがGoogle Fontsリポジトリに存在しない場合、これらは自動的にダウンロードされず、コンソールにエラーが表示されます。その場合は手動でフォントをプロジェクトにインポートする必要があります。

Google Fontsのセットアップ手順

  1. アセットが不足しているフォントを自動的にダウンロードできるようにするには、Google Fonts APIキーを取得する必要があります。

  2. “Get a Key” ボタンをクリックし、新しいプロジェクトを作成するか、既存のプロジェクトを選択します。

  3. “SHOW KEY” ボタンをクリックしてAPIキーを表示し、コピーします。

  4. Figma Converter for Unityの**"TEXT & FONTS"** タブを開き、取得したAPIキーを**"Google Fonts Api Key"** フィールドに貼り付けます。

    • これにより、Figmaプロジェクトのインポート時にGoogle Fontsリポジトリからフォントが自動的にダウンロードされるようになります。

5. ローカライゼーション

Figma Converter for Unityは、多言語対応のプロジェクトをサポートするために、柔軟なローカライゼーション機能を提供しています。

  1. Localization Component — Figmaデザインからインポートされたテキストコンポーネントをローカライズするために使用されるコンポーネントを設定します。利用可能なコンポーネントは以下の通りです：

    これらのアセットをFigma Converter for Unityで使用するための設定手順は、マニュアル内の該当セクションに記載されています。

  2. Localizator（D.A. Localizatorのみ） — D.A. Localizatorを使用する場合、特定のローカライズコンポーネントがテキストコンポーネントに割り当てられます。

  3. Localization Key Max Length — ローカライズキーの最大長を設定します。キーの長さ制限はプロジェクトの一貫性を保つために役立ちます。

  4. Localization Key Case — ローカライズキーの形式を指定します。利用可能なオプション：

    • snake_case
    • UPPER_SNAKE_CASE
    • PascalCase

  5. Layout Language — Figmaレイアウトの言語を指定します。例えば、「en-US」を指定した場合、ローカライズキーの値はCSVファイルの「en-US」列に入力されます。

  6. Separator — CSVファイルで使用される区切り文字を指定します。一般的にはカンマ（,）が使用されますが、必要に応じて変更可能です。

  7. Localization Folder Path — ローカライズファイルが格納されているフォルダのパスを指定します。このフォルダはインポート前に必ず「Resources」フォルダ内に配置する必要があります。インポート後は場所を変更できます。

  8. Localization File Name — ローカライズファイルの名前を指定します。この名前は指定されたフォルダ内で一意である必要があります。

5.2 I2Localization

Figma Converter for Unityは、「I2Localization」アセットと連携して使用することができます。「I2Localization」を活用することで、プロジェクトの多言語対応を効率的に実現できます。

https://assetstore.unity.com/packages/tools/localization/i2-localization-14884?locale=ja-JP&srsltid=AfmBOoroFRbWODgBBIw03BwqyLn1__5QYcWOvDyws_2jbGnsudTT7JTh

動画マニュアル

I2Localizationの動画マニュアルはこちら

設定手順

  1. 購入したアセットをプロジェクトに追加します。

    • Unity Asset Storeから「I2Localization」を購入し、プロジェクトにインポートしてください。

  2. アセットのインポート時に、"Dependency Manager Manual"の指示に従います。

    • 依存関係が正しく設定されていることを確認してください。

  3. "LOCALIZATION"タブで"Localization Component"を"I2 Localization"に切り替えます。

    • 設定タブ内でこのオプションを選択することで、Figmaからのレイアウトインポート時にI2Localizationが使用されるようになります。

  4. 通常通りレイアウトをインポートします。

    • 他の設定を完了した後、FigmaデザインをUnityにインポートしてください。

  5. インポート後、"I2Localize"スクリプトがすべてのテキストコンポーネントに追加されます。

    • テキストコンポーネントの内容が"Localization.csv"ファイルに書き込まれます。
    • 各テキストコンポーネントに対応するローカライゼーションキーがスクリプト内で選択されます。

詳細な手順は、「I2Localization」アセットのマニュアルをご参照ください。

6. プレハブの作成

Figma Converter for Unityでは、インポートしたオブジェクトを効率的に管理するためにプレハブを作成できます。このセクションでは、プレハブ作成の手順と注意点について説明します。

a) プレハブ保存フォルダの設定
プレハブを作成する際に保存されるフォルダを指定します。
「...」ボタンをクリックして、カスタムフォルダを設定できます。

b) テキストプレハブの命名タイプの選択
プレハブの命名タイプを以下のモードから選択できます：

  • HumanizedColorString: プレハブ名に自動的に判定された最適な色名が含まれます。
    • 例: TextMeshPro white 12px
  • HumanizedColorHEX: プレハブ名に色がHEX形式で含まれます。
    • 例: TextMeshPro #0C8CE9 12px
  • Figma: Figmaで設定されたコンポーネント名がそのまま使用されます。

c) プレハブ作成ボタン
「Create Prefabs」ボタンをクリックして、インポートされたオブジェクトのプレハブを作成します。

6.1 プレハブ作成の手順

プレハブを作成するためには、以下の条件を満たす必要があります：

  1. インポートされたすべてのコンポーネントにSyncHelperコンポーネントが含まれていること。
  2. SyncHelperコンポーネントを持つゲームオブジェクトを複製またはコピーしていないこと。

プレハブ作成のオプション

  1. フレーム全体を自動モードでプレハブ化
    インポートしたフレーム全体を一括でプレハブ化します。

  2. 特定の要素のみをプレハブ化
    Figmaからマスターコンポーネントをインポートしてプレハブを作成し、その後フレームをインポートします。この場合、アセットが作成したプレハブがキャンバス上の特定のレイアウト要素として使用され、その他の要素はプレハブ化されません。

手順

  1. プレハブを作成するには、プレハブ化したい子オブジェクトを含むCanvasにあるFigma Converterの設定を開きます。
  2. 「PREFAB CREATOR」タブに移動し、プレハブ作成オプションを設定して「Create Prefabs」ボタンをクリックします。
  3. アルゴリズムが実行されると、コンソールにプレハブが正常に作成されたことを示すメッセージが表示されます。

6.2 プレハブ作成時の注意点とエラー防止策

  1. バックアップの作成
    プレハブ作成を試みる前に、アセットは自動的にシーンのバックアップを作成します。バックアップに関する詳細は、マニュアルの該当セクションを参照してください。

  2. コンポーネント変更後の注意
    プレハブ作成後にImage Component、Text Component、またはButton Componentを変更し、既存のプレハブを使用してインポートを実行すると、レイアウトインポート時にエラーが発生する可能性があります。

  3. 既存プレハブの更新
    シーン内にすでにプレハブ化されたオブジェクトが存在し、それらがFigma内で変更されている場合、シーン上のオブジェクトを更新できます。次回のインポート時に新しいオブジェクトが既存のプレハブに追加されますが、アセット内にローカル保存されたプレハブは更新されません。

7. スクリプト生成とオブジェクトシリアライズ

インポート後、フレームのスクリプトを生成したり、フレーム内のゲームオブジェクトを自動的にシリアライズすることができます。
現在、Figma Converterで作成されたプレハブからスクリプトを生成することはサポートされていません。そのため、プレハブを作成する前にスクリプトを生成する必要があります。

  1. Serialization Mode

    • GameObjectをスクリプトフィールドにシリアライズする方法を選択します。以下のオプションがあります：
      • SyncHelpers: SyncHelperに基づいて生成されたスクリプトにより、すべてのGameObjectが正確に対応するシリアライズフィールドに割り当てられます。
      • GameObjectNames: GameObjectの名前に一致するフィールド名にシリアライズされます。
      • Attributes: FObjectAttribute属性を持つフィールドにシリアライズされます。この属性は、GameObjectが作成されたFigmaコンポーネントの名前に一致するテキストを含みます。

  2. Namespace for generated scripts

    • 生成されたスクリプトの名前空間を指定します。

  3. Base class for generated scripts

    • 生成されたスクリプトが継承する基本クラスを指定します。

  4. Folder where generated scripts will be saved

    • 生成されたスクリプトが保存されるフォルダを指定します。

  5. Field, method, or class names length

    • フィールド、メソッド、またはクラス名の最大長を設定します（4～6文字）。

  6. Button for generating scripts

    • スクリプトを生成するボタン。

  7. Button for serializing GameObjects into scripts

    • GameObjectをスクリプトにシリアライズするボタン。

7.1 シリアライズモードの選択

7.1 シリアライズモードの選択

SyncHelpersを使用してスクリプトを生成し、シリアライズする方法について説明します。このモードでは、Figma Converterでインポートされたオブジェクトが、生成されたスクリプトに正確に割り当てられます。

SyncHelpers

  1. スクリプトの生成とSyncHelpersによるシリアライズ

    • プロジェクトをインポートした後、「Generate Scripts」ボタンをクリックしてスクリプトを生成します。

  2. シリアライズモードの設定

    • スクリプトが生成され、プロジェクトが再コンパイルされたら、スクリプトジェネレーターの設定で**「Serialization Mode」フィールドを「SyncHelper」**に切り替えます。
    • その後、「Serialize Objects」ボタンをクリックします。

  3. スクリプトへの自動割り当てとシリアライズ

    • 生成されたスクリプトが対応するフレームに自動的に追加され、オブジェクトがシリアライズされます。このプロセスの結果は、以下のスクリーンショットのように確認できます。

  4. カスタムインスペクターの使用

    • シリアライズされたフィールドが多数存在する場合（スクリーンショットでは省略されていますが、数十個以上ある場合があります）、シリアライズされたオブジェクトをグループ化するカスタムインスペクターを使用することをお勧めします。
    • カスタムインスペクターの例：

  5. カスタムインスペクターの適用方法

    • 任意のスクリプトにこのソート機能を適用するには、このGitHub Gistのスクリプトを使用します。
    • また、自分のスクリプト用にカスタムインスペクターを作成する方法を学ぶことも推奨されます。

Attributes

  1. スクリプト生成をスキップ

    • 独自のスクリプトを使用する場合、スクリプト生成のステップをスキップできます。

  2. フレーム名の属性を追加

    • クラスに[FObject("frame_name")]属性を追加します。ここで、frame_nameはこのスクリプトが属するFigmaフレームの名前です。

  3. コンポーネント名の属性を追加

    • シリアライズされたフィールドに[FObject("component_name")]属性を追加します。ここで、component_nameはFigmaで対応するゲームオブジェクトのコンポーネント名です。

  4. オブジェクトのシリアライズ

    • 「Serialize Objects」ボタンをクリックします。

  5. シリアライズ結果の確認

    • 設定に従って、ゲームオブジェクトがフィールドにシリアライズされます。

GameObject Nameを使用した手順

  1. スクリプト生成をスキップ

    • 独自のスクリプトを使用する場合、このステップをスキップできます。

  2. フレームとスクリプトの名前を一致させる

    • フレームのGameObject名は、対応するスクリプトの名前と一致している必要があります。
    • フィールドにシリアライズされるGameObjectの名前は、フィールドの名前と一致している必要があります。

  3. オブジェクトのシリアライズ

    • 「Serialize Objects」ボタンをクリックします。

  4. シリアライズ結果の確認

    • アセットは、GameObject名に一致するフィールドにGameObjectをシリアライズします。

8. レイアウト更新

PreImportWindowの説明

FigmaからインポートされたコンポーネントがすでにUnityシーン内に存在している場合、新しいインポートを試みるとPreImportWindowが表示されます。このウィンドウを使用すると、インポートの詳細設定を行い、以下のような操作が可能です：

  • シーン内の既存コンポーネントを更新してFigmaと同期する。
  • インポートされたコンポーネントがFigma内のデータとどのように異なるかを確認し、プロパティを比較する。
  • シーンから不要なコンポーネントを削除する。

以下に、PreImportWindowインターフェース要素の説明とその機能を示します。

  1. インポートの分析と設定を行うセクション

    • シーンへのコンポーネントインポートを分析し、調整できます。

  2. 「Diffchecker」ウェブサイトを開くボタン

    • コンポーネント間の差分を外部ツールで比較するために使用します。

  3. 新しいコンポーネント

    • Figmaプロジェクトには存在するが、Unityシーン内には存在しないコンポーネント。

  4. 変更されたコンポーネント（Figma内で変更）

    • 前回のインポート以降にFigma内で変更されたコンポーネント。

  5. 変更されたコンポーネント（Unity内で変更）

    • 前回のインポート以降にUnity内で変更されたコンポーネント。

  6. 変更されていないコンポーネント

    • FigmaおよびUnity内で変更されていないコンポーネント。

  7. RectTransformサイズの差異

    • Unity内のRectTransformサイズがFigma内のコンポーネントサイズと異なる場合を示します。

  8. 旧データ

    • 現在シーン上にあるコンポーネントのデータ。

  9. 新データ

    • Figma内に存在し、まだシーンにインポートされていないコンポーネントのデータ。
    • Figmaコンポーネントのすべてのプロパティ一覧が含まれます。このデータは、インポート時点でキャプチャされ、その後Unityでの変更による影響を受けません。
    • 例えば、Figmaでスプライトに対する変更を行い、Unityで再インポートする際にスプライトを更新するかどうかを判断するのに役立ちます。

  10. データ差異に関するメッセージ

    • 項目7および8に関連するデータ差異を示します。

  11. 色のプロパティ差異

    • Unity内のグラフィックコンポーネントの色がFigma内の色と異なる場合に通知されます。

  12. 削除するフレームまたはコンポーネントの選択セクション

    • 新しいインポート時にシーンから削除されるフレームや個々のコンポーネントを選択できます。

  13. インポートを続行するボタン

    • 選択したパラメータでインポートを実行します。
    • デフォルト設定では、PreImportWindowで変更を行わない限り、シーンとFigmaに存在するすべてのコンポーネントが同期され、新しいコンポーネントがインポートされ、古いインポートからのコンポーネントは削除されません。

8.1 SyncHelperスクリプトによる同期と更新

  1. プロジェクトのインポート後

    • SyncHelper.csスクリプトが、インポートされたすべてのオブジェクトに追加されます。このスクリプトは、FigmaとUnity間でオブジェクトを同期するために必要です。

  2. プロジェクトの再インポート

    • 再インポートを実行することで、オブジェクトのトランスフォームやプロパティ（色やテキストなど）を更新できます。また、新しいオブジェクトの追加や、欠落したオブジェクトの削除も可能です。

  3. プレハブの更新

    • インポートされたオブジェクトからプレハブを作成した場合、以降のインポートではトランスフォームとプロパティのみを更新できます。プレハブ内の新しいオブジェクトは追加されません。

  4. オブジェクトの複製を避ける

    • Unityシーン内で、同じSyncHelper.csスクリプトを持つオブジェクトを重複して作成しないでください。Unity上でオブジェクトを複製する場合、Figmaで複製を作成してから再度インポートを実行してください。

  5. SyncHelper.csの削除禁止

    • FigmaからUnityへのプロジェクトのインポートが完了するまで、SyncHelper.csスクリプトを削除しないでください。

  6. SyncHelper.csの削除

    • プロジェクト作業が完了し、今後更新する予定がない場合、アセットのコンテキストメニューからSyncHelper.csスクリプトをオブジェクトから削除できます（詳細は「コンテキストメニュー」セクションを参照してください）。

9. 特殊機能

9.1 ボタンの動作とアニメーション

Figma Converter for Unityは、Figmaからインポートされた「btn」タグを持つオブジェクトに適切なボタンコンポーネントを割り当て、アニメーションや状態ごとの挙動を設定することができます。このセクションでは、使用可能なボタンコンポーネントや特別な設定について説明します。

1. ボタンコンポーネント

Figmaから「btn」タグを持つオブジェクトをインポートする際、以下のボタンコンポーネントをシーンに描画できます：

  • Unity Button: Unityに標準で含まれるボタンコンポーネント。

  • D.A. Button（リリース予定）:

    • 複数のTargetGraphicsに対応。
    • アニメーションカーブを使用して、状態ごとの色、サイズ、位置のアニメーションを設定可能。
    • スプライトの切り替えやループアニメーションをサポート。
    • 詳細はD.A. Buttonアセットに付属するマニュアルを参照してください（別売）。

  • FCU Button（非推奨）:

    • Unity Buttonのコピーで、TargetGraphicだけでなく、テキストの色も変更可能。
    • アセットに含まれていますが、最新のプロジェクトでは使用が推奨されません。

2. UI.BUTTON SETTINGS

「Button Component」で選択したボタンコンポーネントに基づいて、特別な設定を行うことができます。

3. 設定セクション

  • 選択したボタンコンポーネントに応じて、このセクションの内容が変化します。
  • Unity Buttonの場合、詳細は公式ドキュメント（UI.Button Documentation）を参照してください。
  • Figmaでボタンコンポーネントを設定する方法については、デザイナー向けマニュアルの該当セクションを参照してください。

9.2 シャドウのインポート

Figma Converter for Unityは、シャドウコンポーネントのインポートに2つの方法をサポートしています。プロジェクトに応じて適切な方法を選択してください。

1. シャドウのインポート方法

  • FIGMA: シャドウがダウンロードされたスプライトの一部としてインポートされます。
  • TrueShadow: TrueShadowアセットを使用してシャドウが手続き的にレンダリングされます。

2. TrueShadowアセットの利用

  • シャドウをスプライトの一部としてではなく、手続き的にレンダリングしたい場合は、TrueShadowアセットを使用してください。
  • TrueShadowアセットの導入手順については、「Dependency Manager Manual」を参照してください。

3. TrueShadowモードの設定手順

  1. 「SHADOWS」タブで設定変更

    • Shadow Typeパラメータを「True Shadow」に切り替えます。

  2. Figmaプロジェクト内のシャドウを非表示に設定

    • TrueShadowモードを使用してレイアウトをインポートする前に、Figmaプロジェクト内のすべてのシャドウを非表示にしてください。

  3. インポート後の結果

    • Figmaレイアウト内でシャドウが設定されているすべてのコンポーネントに、TrueShadowアセットのシャドウスクリプトが追加されます。

4. TrueShadow機能の使用方法

TrueShadow機能を正しく活用するために、デザイナー向けマニュアルの該当セクションを参照してください。このマニュアルには、シャドウ設定の詳細な手順と推奨事項が記載されています。

9.3 UI Toolkitとの統合

Figma Converter for Unityは、UI Toolkit（UITK）との統合をサポートし、FigmaデザインをUnityのUITK環境にインポートするための柔軟な設定を提供します。

1. UITK Linking Mode

  • 説明: UI Toolkit内のコンポーネントの検索およびリンク方法を指定します。
  • この設定に関する詳細は、「UITK Element Linker」アセットに付属するマニュアルを参照してください。

2. UITK Output Path

  • 説明: FigmaデザインのUITKへのインポート結果が保存されるフォルダを指定します。
  • 必要に応じて、プロジェクト内で適切なパスを選択してください。

9.4 スプライトスライスの自動転送

Figma Converter for Unityは、スプライトスライスをFigmaからUnityへ自動的に転送する機能をサポートしています。この機能を使用することで、デザインの柔軟性を保ちながら効率的にインポートプロセスを進めることができます。

利用手順

  1. デザイナー側の設定

  2. 開発者側の操作

    • 開発者は特に設定を有効にしたり変更を加えたりする必要はありません。
    • インポート中にスライスの値が自動的にUnityに転送されます。

9.5 GridLayoutGroupのサポート

Figma Converter for Unityでは、FigmaのGridLayoutGroupの挙動を正確に再現するために、Unityの標準コンポーネントである「UI.GridLayoutGroup」を使用しません。その代わりに、「Unity UI Extensions」アセットの「FlowLayoutGroup」コンポーネントを使用します。

FlowLayoutGroupの有効化手順

  1. Unity UI Extensionsアセットのダウンロードとインストール

    • Unity Asset Storeから「Unity UI Extensions」アセットをダウンロードしてプロジェクトにインストールします。

  2. Dependency Managerで依存関係を有効化

    • 「Dependency Manager」を開き、「Unity UI Extensions」の依存関係を有効にします。

これにより、Figmaレイアウトをインポートする際に「FlowLayoutGroup」コンポーネントが使用されるようになります。

9.6 Nova UIとの統合

サポート外の機能

現在、Nova UIを使用してインポートする際、以下の機能はサポートされていません：

  1. FCUを使用したプレハブの作成
  2. アンカー（制約）
  3. 自動レイアウト
  4. FCUを使用したレイアウトの更新

これらの機能がサポートされていなくても、レイアウトの外観には影響しません。
ただし、インポート後に必要に応じて、これらの設定を手動で構成することができます。

Nova UIを使用したインポート手順

  1. Nova UIの利用

    • 標準の「UGUI Canvas」や「UI Toolkit」の代わりに「Nova UI」フレームワークを使用できます。

  2. 必要なアセットのインポート

    • プロジェクトに「Nova UI」と「TextMeshPro」をインポートしてください。

  3. UIフレームワークの切り替え

    • アセットの「Main Settings」内で**「UI Framework」**を「NOVA」に切り替えます。

  4. 画像コンポーネントの設定

    • 「IMAGES & SPRITES」タブで**「Image Component」**を「UIBlock2D」に切り替えます。

  5. テキストコンポーネントの設定

    • アセット設定の「NOVA COMPONENTS」タブで**「Text Component」**を「TextMeshPro」に切り替えます。
    • インポート時にテキストコンポーネントとして「TextMeshPro」を使用する場合にのみ、「Nova UI」との統合が機能します。

  6. レイアウトのインポート

    • その後、一般的なインポート手順に従ってレイアウトをインポートしてください。

10. IMPORT EVENTS

Import Eventsは、インポートプロセスをカスタマイズするために使用できます。たとえば、特定のアルゴリズムに基づいてインポート中にGameObjectに独自のコンポーネントを追加する場合に便利です。

1. On Object Instantiate

  • 概要: シーン内でGameObjectを作成する際に呼び出されます。
  • 使用例: このイベントで返されるGameObjectの名前を解析し、それに基づいて特定のアクションを実行できます。たとえば、このGameObjectに独自のスクリプトを追加するなどです。

2. On Add Component

  • 概要: インポート中にGameObjectに特定のコンポーネントが追加される際に呼び出されます。
  • FcuTagについて:
    • FcuTagは、インポートされた各オブジェクトにConverterが割り当てる特殊なタグです。
    • デザイナーマニュアルのタグセクションで説明されているように、Figmaレイアウト内でオブジェクトの名前に手動でタグを設定できます。
    • たとえば、FcuTagが"FcuTag.Text"であれば、現在のコンポーネントがテキストコンポーネントであることを意味します。

3. On Import Start

  • 概要: インポート開始前に呼び出されます。

4. On Import Complete

  • 概要: インポートが完了した後に呼び出されます。

5. On Import Fail

  • 概要: インポートが停止した場合に呼び出されます。

11. Context Menu

Context Menuでは、FigmaからUnityへのインポートプロセスやオブジェクト管理を効率化するための便利な機能が提供されています。以下は、Context Menuで利用可能な各機能の説明です。

1. 現在のキャンバスの子オブジェクトを削除

  • 現在のキャンバス内に存在する子オブジェクトをすべて削除します。

2. 子オブジェクトへのスクリプト割り当て

  • 現在のキャンバスの子オブジェクトに対して、アセットのメインスクリプトをシリアライズされたフィールドに割り当てます。
    • プレハブの作成や再インポート時のプロジェクト更新に必要です。
    • この機能は、SyncHelper.csスクリプトがアタッチされているオブジェクトでのみ動作します。

3. SyncHelperスクリプト付きオブジェクトの比較

  • SyncHelperスクリプトがアタッチされている2つのオブジェクトを比較します。
    • この機能を使用して、FigmaとUnityプロジェクト間での重複を防ぐための差分を特定できます。

4. 最後にインポートされたフレームの削除

  • 最後にインポートされたフレームを削除します。
    • この機能は現在、一時的に利用できません。

5. SyncHelper.csスクリプトの削除

  • 現在のキャンバスの子オブジェクトからSyncHelper.csスクリプトを削除します。
    • 注意：このスクリプトを削除すると、UnityプロジェクトとFigmaプロジェクトを同期することができなくなります。
    • レイアウトの同期が不要になった場合にのみ削除してください。

6. プレハブの作成

  • 現在のキャンバス内のオブジェクトからプレハブを作成します。
    • プレハブを作成するには、キャンバス上のすべてのオブジェクトにSyncHelper.csスクリプトがアタッチされている必要があります。

7. 選択したGameObjectをプレハブの状態にリセット

  • 選択したGameObjectをプレハブの状態にリセットします（子オブジェクトはリセットされません）。
  • この機能にはSyncHelper.csスクリプトは必要ありません。

8. 選択したGameObjectとその子オブジェクトをプレハブの状態にリセット

  • 選択したGameObjectとそのすべての子オブジェクトをプレハブの状態にリセットします。
  • この機能にはSyncHelper.csスクリプトは必要ありません。

1. FigmaConverterUnityスクリプト付きのGameObjectを作成

  • シーン内にFigmaConverterUnityスクリプトがアタッチされた新しいGameObjectを作成します。

2. 未使用スプライトの削除

  • 特定のフォルダを指定して、現在開いているシーン内のImageコンポーネントで使用されていないスプライトをすべて削除します。

12. Scene Backups and Project Cache

シーンのバックアップとプロジェクトキャッシュの管理は、FigmaからUnityへのインポートプロセスを安全かつ効率的に進めるために重要です。このセクションでは、バックアップとキャッシュに関する詳細を説明します。

1. シーンバックアップの保存場所

  • アクティブなシーンのバックアップフォルダは次の場所にあります：
    • Library\Backup\Scene

2. 自動バックアップのタイミング

  • 各インポート前およびプレハブ作成前にバックアップが自動的に作成されます。

3. 保存済みシーンのバックアップ

  • バックアップは、事前に保存されたローカルシーンファイルに対して作成されます。
  • Unityのインターフェースでプロジェクト名の横にアスタリスク（*）が表示されている場合、それはシーンに保存されていない変更があることを示しています。この場合、バックアップには未保存の変更は含まれません。

4. 未保存シーンの処理

  • 現在のシーンが一度も保存されていない場合（シーンファイルがディスク上に存在しない場合）、インポート前に次のパスに自動的に保存されます：
    • Assets/Scenes/time_scene_name.unity

5. プロジェクトキャッシュの管理

  • 各プロジェクトのダウンロード時に、Figmaプロジェクトからオブジェクトのトランスフォームとプロパティがキャッシュされます。
  • 再度ダウンロードする必要を避けるため、ドロップダウンメニューからキャッシュバージョンを選択することができます。

13. Import Issues

Figma Converter for Unityのインポートプロセス中に発生する可能性のある一般的な問題とその解決方法について説明します。

1. フレームがFigmaのレイアウトと同じに見えない場合

  • この問題の解決方法は、デザイナーマニュアルの「Layout Rules」セクションに記載されています。

2. コンポーネントが単一の画像に結合されている、または複数の画像に分割されている場合

  • コンポーネントが単一の画像に結合されてしまった場合や、複数の画像で構成されているコンポーネントを1つにまとめたい場合は、デザイナーマニュアルの「Naming and tags」セクションを参照してください。

3. "このファイルが存在しないか、表示する権限がありません"というエラーが表示される場合

  • このエラーが発生した場合は、「Manual for designers.pdf」の「Teamwork」セクションを参照してください。
    • このセクションでは、インポートされたフレーム内のすべての画像が欠落している場合の対処方法が説明されています。

4. Figma APIリクエストの制限に達した場合

  • このエラーは、Figma APIのリクエスト制限に達した場合に発生します。この問題を回避するには、以下のガイドラインに従ってください：
  • 一度に100フレーム以上をインポートしないようにしてください。
  • 制限に達した場合、しばらく待つか、新しいプロジェクトを作成する必要があります。
  • これらは公式な要件ではなく、個人的な経験に基づく推奨事項です。

Discussion