Zenn
🎃

Figma Converter for Unity 4Desin

2025/03/13に公開
Figma
Unity
tech

Figma Converter for Unity マニュアル目次

1. Figma Converter for Unity


本書では、Figmaで作成されたデザインをUnityにインポートし、UIとして活用するためのツール「Figma Converter for Unity」の使い方を解説しています。

このツールのできる事としては、figmaで作成したUIデザインを、Unityにそのまま持って来れるというメリットがあります。
テキスト、画像、ボタン、さらにはスクロールビューまで自動で設定ができます。
加えて、figmaで設定したシャドウの描画などもUnityにインポートができます。

1.1 このツールの癖

figmaは１画面で全てのデザインを行う傾向があるので、複数のUI(本来はCanvasごとに分けたい)が、ワールド座標で表示されてしまいます。
そのため、取り込んだ後に、RectTransformで調整する必要があります。

1.2 マニュアルの推奨

  • 本マニュアルを最初から最後まで一通り読むことで、ツールの全体的な仕組みや操作方法を理解できます。
  • ツールの使用方法やトラブルシューティングを適切に行うために、このガイドは重要なリファレンスとなります。
  • このマニュアルは、Assestoreから展開したPackage内に含まれますが、デザイナー向けと、Unityの設定が記されている、プログラマー向けのマニュアル２つがありますので、両方熟読しましょう。

1.3 問題が発生した場合のサポート窓口

  • ツールの使用中にエラーや問題が発生した場合は、以下の方法でサポートを受けることができます：
    • Discordサーバー
      コミュニティ内での質問やアドバイスを受けることが可能です。
      Discordリンク
    • Telegramグループ
      迅速なやり取りや情報共有に活用できます。
      Telegramリンク
    • Eメールサポート
      問題や要望を直接開発者に送信できます。
      メールアドレス: da.assets.publisher@gmail.com
    • 公式ウェブサイト
      最新情報や詳細なリソースを確認できます。
      公式サイトリンク

1.4 マニュアルの変更履歴と更新情報

  • マニュアルの内容に変更がある場合は、開発者のウェブサイトに更新履歴（changelog）が公開されます。最新情報を定期的に確認してください。

1.5 ユーザーからのフィードバック受付

  • ツールに対する新機能の提案や改善案を受け付けています。これらのフィードバックは、今後のアップデートに反映される可能性があります。
  • コメントやリクエストを送信することで、ツールの機能向上に貢献できます。

1.6 ポイントまとめ

  1. マニュアルの重要性
    • 本マニュアルは、FigmaからUnityへのスムーズなインポートを実現するための重要なリファレンスです。
  2. サポート体制
    • Discord、Telegram、Eメールを通じて迅速なサポートが受けられます。
  3. アップデートとフィードバック
    • 最新の変更情報は公式サイトで確認可能で、フィードバックを通じてツールの改善に貢献できます。

2. 基本設定とルール

Figmaで作成したデザインをUnityに正確にインポートするためには、いくつかの基本設定とルールを守る必要があります。以下にその概要を説明します。

2.1 レイアウトルール

Unityへのインポートが正しく行われるよう、Figmaのデザインを調整するための基本ルールです。

  1. 「Clip Content」を無効にする

    • Figmaで作成したフレームに「Clip Content」が有効になっていると、Unityにインポートした際に表示が不完全になる場合があります。インポート前に「Clip Content」を無効にしてください。

  2. セクションをフレーム内に配置

    • セクションをインポートするには、該当のセクションをフレーム内に配置し、フレーム選択を適用する必要があります。

  3. 特殊文字のみの名前は避ける

    • コンポーネントの名前が特殊文字（例: 記号や空白）のみの場合、Unityで適切に認識されない可能性があります。必ず論理的な名前を付けてください。

  4. 単一画像としてインポートしたい場合

    • 特定のコンポーネントを単一の画像としてインポートしたい場合は、「Image」スライドに記載された設定を参照してください。

  5. 内部構造を保持したい場合

    • コンポーネント内の要素を統合せず、そのままインポートしたい場合は、「Container」スライドに記載されたルールを適用してください。

  6. Unity互換性の確認

    • Figmaのデザイン要素をUnityに正確に反映させるため、Unityで利用可能なグラフィック機能（例: グラデーションやアウトライン）を確認してください。詳細は「FigmaコンポーネントとUnityコンポーネントの互換性表」を参照してください。

https://www.figma.com/board/doM1KFgNleD8F4EobPkmV1/Compatibility-Table-for-Figma-Components-with-Unity-Components?node-id=0-1&t=93R3ascDNGMHL7vr-1

  1. テンプレートの確認
    • 正しいレイアウト設計を行うため、マニュアルに含まれる「テンプレート例」を参考にしてください。

https://www.figma.com/design/QRYCs4gMgj7f6KCWegNs9B/Figma-Converter-for-Unity---Example-templates?node-id=95-127&p=f&t=67CLjXxr2SvcOVo7-0

2.2 タグと命名規則

Unityにインポートした際、各コンポーネントが正しく機能するように設定するためのルールです。

  1. タグの形式

    • コンポーネント名にはタグを含める必要があります。形式は以下のようになります：
      「tag - name - info」
      • tag: コンポーネントの種類（例: btn、img、fld など）
      • name: 論理的な名前（例: "menu open"）
      • info: 任意の補足情報（必要に応じて）

  2. セパレーター（区切り文字）

    • タグと名前の間にはハイフン（-）またはスラッシュ（/）を使用して区切ります。

  3. タグリスト

    • Canvas用のタグ: im、con、bt、scrollなど
    • 各タグはインポート後の動作に影響を与えます。たとえば、btnタグを使うとボタンコンポーネントが割り当てられます。

  4. 実際の命名例

    • btn - menu open (ボタン)
    • img - avatar (画像)
    • fld - username (入力フィールド)

  5. タグの互換性

    • ツールのバージョンアップに伴い、タグが変更される場合があります。互換性に問題がある場合は、FcuConfigファイル内でタグの値を修正可能です。

ポイントまとめ

  1. Clip Contentの無効化
    • Figmaで「Clip Content」を無効にすることで、Unityで正しく表示されます。
  2. 命名規則の厳守
    • タグ（例: btn, img, fld）を名前に付加することで、Unityで適切なコンポーネントとして認識されます。
  3. テンプレートの活用
    • Figmaから正確にインポートするために、公式テンプレートや互換性表を参照することが推奨されます。
  4. 構造の保持と調整
    • 必要に応じて、コンポーネントの構造やレイアウトを事前に整理しておくと、インポート後の調整が容易になります。

3. 各コンポーネントの詳細

3.1 画像とコンテナ

  • contタグ:

    • コンテナとして内部の構造をそのまま保持してインポートしたい場合に使用します。
    • 親オブジェクトにcontタグを設定すると、子オブジェクトの構造が維持されます。

  • imgタグ:

    • オブジェクト全体を単一の画像としてインポートしたい場合に使用します。
    • 子オブジェクトがすべてベクターの場合、親オブジェクトは自動的に単一画像としてインポートされます。

3.2 テキスト

  • フォントサイズと配置:
    • フォントサイズは、Figmaの設定を基準にインポートされますが、Unity内で微調整が必要になる場合があります。
    • 推奨フォント: TextMeshProを使用すると調整が容易です。
  • Auto-Sizeオプション:
    • デフォルトで有効化されており、インポート時にテキストが枠内に収まるようサイズを自動調整します。

3.3 ボタン

  • btnタグ:

    • ボタンとして認識させるために使用します。Figmaでbtnタグを設定すると、Unityで自動的にボタンコンポーネントが割り当てられます。

  • ボタンの状態:

    • 各状態を設定するために以下のタグを使用します：

      • def: デフォルト状態
      • hov: ホバー時
      • pres: 押下時
      • dis: 無効状態

    • 状態ごとの色変更はColorTintモードまたはSpriteSwapモードで設定可能です。

3.4 入力フィールド

  • fldタグ:
    • 通常の入力フィールドを作成するためのタグ。
  • pwdタグ:
    • パスワード入力フィールドを作成するためのタグ。
  • その他の設定:
    • プレースホルダーにphタグ、背景にbgタグを設定すると、Unityで適切にインポートされます。

3.5 スクロールビュー

  • scrollタグ:

    • スクロール可能なコンポーネントを作成するためのタグ。
    • scrollタグを親オブジェクトに設定し、ViewportとContentを適切に配置する必要があります。

  • 構造:

    • Viewportはスクロール範囲を示し、Contentにはスクロール可能なコンテンツを配置します。
    • ViewportとContentは、それぞれ親オブジェクトとサイズを合わせる必要があります。

3.6 トグル/チェックボックス

  • tgタグ:

    • トグルとして認識させるためのタグ。
    • 子オブジェクトのうちチェックマークには「Checkmark」という名前を付ける必要があります。

  • tgrタグ:

    • トグルグループを作成するためのタグ。グループ化したいトグルの親オブジェクトに設定します。

3.7 無視タグ

  • ignoreタグ:
    • 指定したオブジェクトやその子オブジェクトをインポート対象外にするタグ。
    • これはFigmaのレイヤー非表示（目のアイコンをオフにする）と同じ効果を持ちます。

ポイントまとめ

  1. タグの適切な設定
    • 各UI要素（ボタン、画像、入力フィールドなど）には、指定されたタグを使用する必要があります。
  2. シャドウやフォントの注意点
    • TextMeshProの使用やシャドウ設定の調整など、Unityで正確に再現するための工夫が必要です。
  3. 構造の保持と最適化
    • contタグやscrollタグを活用して、複雑な構造をそのままインポートすることが可能です。
  4. レスポンシブデザイン
    • スクロールビューやトグルなどの動的UIコンポーネントも、Figmaで設定を整えることで効率的にインポートできます。

4. UIレスポンシビリティ

4.1 アンカー（Constraints）の設定

  • アンカーの役割:
    Figmaでは「Constraints」と呼ばれる設定が、Unityでは「アンカー」として動作します。これにより、UI要素が画面サイズや比率に応じて適切にスケールや位置を調整します。

  • Unityのアンカーの動作:
    Figmaと同様に、以下のような制約を設定できます：

    • 左揃え/右揃え (Left / Right)
    • 上下揃え (Top / Bottom)
    • 中心揃え (Center)

  • Figmaでの設定例:

    • 例えば、Figmaでボタンを左右の中央に固定したい場合は、「Left and Right」を設定します。これがUnityにインポートされると、同じ動作をします。

4.2 スケーリング制限と代替設定

  • 制限事項:
    Unityでは、Figmaの「Scale」アンカーはサポートされていません。そのため、Figmaで「Left and Right」または「Top and Bottom」を設定して、スケールに近い動作を代替的に使用します。

  • サイズ調整の考慮点:

    • UI要素を異なる解像度で正確にスケールさせるためには、Figmaで設定する制約を明確に定義する必要があります。
    • Unityにインポートされた後、必要に応じて手動で微調整を行うことで、意図した動作を確保できます。

4.3 実践ガイド

  • Figmaでの制約設定方法:
    制約の詳細な設定方法については、以下の外部チュートリアルを参照することが推奨されています：

  • Unityでの調整ポイント:

    • インポート後、Unityエディタ内で「Rect Transform」コンポーネントを確認し、アンカー設定が意図した通りになっているかを確認します。
    • 必要に応じて、アンカーの調整を行い、異なる解像度でUIが正しく表示されるように調整してください。

ポイントまとめ

  1. Figmaでの「Constraints」の設定が、Unityの「アンカー」に対応します。
  2. 「Scale」アンカーはサポートされていないため、Figmaで「Left and Right」や「Top and Bottom」を設定して代用します。
  3. 必要に応じてUnity側での微調整を行い、異なる解像度に対応するレスポンシブデザインを実現します。

5. シャドウと装飾

5.1 Figmaシャドウのインポート

  • シャドウのサポート:
    ツールはFigmaで設定されたシャドウをインポートする機能を提供しています。これにより、Figmaで作成したデザインをUnity上でも視覚的に忠実に再現することが可能です。

  • シャドウの問題を防ぐための設定:

    1. Figmaでシャドウがコンテナ（親オブジェクト）の外に広がる場合、Unityにインポート後、シャドウが歪む可能性があります。
    2. この問題を防ぐには、Figmaで該当フレームの「Clip Content」オプションを無効にしてください。

5.2 TrueShadowアセットとの連携

  • TrueShadowの使用:
    TrueShadowアセットを使用する場合、Figmaのシャドウ設定と重複しないよう、以下の対応が必要です：
    1. Figmaのシャドウを無効化:
      • Figma上でシャドウを削除してからデザインをインポートします。
    2. TrueShadowをUnityで適用:
      • Unity上でTrueShadowアセットを使用してシャドウ効果を適用します。
      • Figmaのシャドウを無効化しない場合、Unity内でシャドウが二重に適用される問題が発生します。

注意点とベストプラクティス

  1. シャドウと「Clip Content」設定:
    • 「Clip Content」を有効にすると、シャドウの一部が意図せずカットされる場合があるため、インポート前に無効化してください。
  2. シャドウの調整:
    • Figmaでのシャドウ設定はUnityの「Rect Transform」や「Shadow」コンポーネントで微調整が必要になる場合があります。
  3. パフォーマンスの考慮:
    • 高度なシャドウ効果を適用する場合、デバイスの性能に応じて影響が出る可能性があるため、TrueShadowのような軽量化されたソリューションを検討してください。

6. チームワーク

6.1 チームプロジェクトの権限設定

  • 権限の種類:
    Figmaのチームプロジェクトでは、以下の3つの権限が設定可能です：

    1. 編集可能 (can edit)
      • プロジェクト内のすべてのデザインを編集できます。
    2. 閲覧のみ (can view)
      • デザインを閲覧できますが、編集はできません。
    3. 招待制限付き (invite-only)
      • プロジェクトへのアクセスは、招待されたメンバーのみに限定されます。

  • Unityでのインポート要件:

    • UnityのFigma Converterでプロジェクトをインポートする際、プロジェクト所有者のアカウントが必要です。
    • 他のメンバーがインポートする場合、少なくとも「can view」の権限が必要です。

6.2 プロジェクトのインポート手順

  1. 招待を送る:
    プロジェクトを共有するメンバーに招待を送信します。招待メールを受け取ったユーザーは、アクセスを許可された後にUnityでデザインをインポートできます。

  2. インポートエラーの解決方法:

    • アクセス権が不十分な場合、インポート時にエラーが発生することがあります。
    • 以下の方法で解決できます：
      • 該当ユーザーを再招待する。
      • プロジェクトを新しく作成し、必要なフレームをコピーする。

  3. 権限関連の注意事項:

    • プロジェクトオーナーのアカウントでUnityにログインすると、すべてのデザインフレームがインポート可能です。
    • 招待されたメンバーがインポートできない場合は、プロジェクトの権限設定を確認し、再招待してください。

6.3 トラブルシューティング

  • インポートが失敗する場合:

    • プロジェクト内で使用されているデザインシステムコンポーネントが正しく同期されていない可能性があります。この場合：
      1. デザインシステムを再構築します。
      2. 必要なフレームを新しいプロジェクトにコピーし、再度インポートを試みます。

  • 権限エラーの解決例:

    • 他のアカウントで作成されたプロジェクトをインポートする際、適切な権限が設定されていないとエラーが発生します。再招待や新プロジェクトの作成で解決可能です。

ポイントまとめ

  1. プロジェクト共有と権限管理:
    チームメンバーに適切な権限（編集または閲覧）を割り当てることで、円滑な共同作業が可能です。
  2. エラー時の対応:
    再招待や新しいプロジェクトの作成で問題を解決できます。
  3. Unityでのインポート手順の明確化:
    プロジェクトの所有者アカウントが基本となり、権限設定に注意することでインポートのトラブルを防ぎます。

7. コンポーネントの一意性

このセクションでは、FigmaからUnityにインポートする際にコンポーネントの重複や上書きを防ぎ、各コンポーネントを一意に管理する方法について説明しています。

7.1 重複防止の仕組み

  • ランダム番号の付加:
    Unityにインポートされたコンポーネント名には、一意性を保つためのランダムな番号が付加されます。

    • この番号は、コンポーネントのプロパティや子コンポーネントを基に計算されます。
    • プロパティが変更されると番号も変化するため、変更後は新しいコンポーネントとして扱われます。

  • 例:

    • Figmaで同じ名前のコンポーネントが複数存在する場合、それぞれ異なる番号が付けられ、Unity内で上書きされることはありません。

7.2 上書き回避の方法

  • 同名コンポーネントの処理:

    • Figma内で名前が同じでも、プロパティや子コンポーネントが異なる場合、それらは別のコンポーネントとして扱われます。
    • ユーザーが意図せず同名のコンポーネントを作成しても、Unity内での一意性は保持されます。

  • プレハブや画像の重複防止:

    • プレハブや画像の重複生成を避けるため、Figmaのコンポーネント作成機能を活用することが推奨されています。
    • Figmaで「コンポーネント」として設定されたデザインは、Unity内で効率的に管理可能です。

7.3 実践ガイド

  1. 名前の工夫:
    • コンポーネント名に情報を付加（例: "btn - menu open"）することで、管理を容易にし、Unity内での混乱を防ぎます。
  2. バージョン管理との連携:
    • インポート後の番号付加機能は、Unityプロジェクト内でのバージョン管理と連携させることで変更点を明確化できます。
  3. 重複したデータのチェック:
    • 同じプロジェクト内で複数の同名デザインを使用する場合、それぞれの設定を確認して不要な重複を避けます。

ポイントまとめ

  1. FigmaからUnityにインポートされるコンポーネントにはランダム番号が付与され、一意性が確保されます。
  2. コンポーネントのプロパティや子要素が異なる場合、Unity内で個別に管理され、上書きされることはありません。
  3. Figmaでの適切な名前付けとコンポーネント化により、Unity内での管理効率が向上します。

Discussion