こんにちは！ソリューションコンサルタントの田上です。
Infragistics の App Builder は、Figma デザインを取り込んで、コード自動生成できる画期的なツールですが、使用する際の注意ポイントを理解しましょう。
注意するポイントは下記です。
- Indigo.Design UI キットのデザインファイルが必要
- Indigo.Design プラグイン（Figma プラグイン）が必要
- 基本コンポーネント（Base Components）の理解
- コンポーネントの使用方法の理解
- プロパティ管理の理解
- メタデータ（親子関係情報）の理解
これらを理解することで、Figma から App Builder へインポートしたデザインを、コード自動生成する業務シナリオにおいて、効率的にツールの活用が進むと思います。
- Figma と App Builder を使ったコード生成の注意ポイント
- Figma デザインを App Builder へ取り込む場合の注意点
- 関連記事
- Figma と App Builder の連携を始めましょう！
Figma と App Builder を使ったコード生成の注意ポイント
前提条件
前提条件として、Figma でデザインする際に「Infragistics Indigo.Design UIキット」のデザインファイルとプラグインを使用します。「App Builder でコード自動生成が可能な３つのデザインファイル」が提供されていますので、ご自身のデザインテイストに合わせて、選択して活用します。
Indigo.Design UI キット ３つのデザインファイル
Indigo.Design UI Kit for Bootstrap
Indigo.Design UI Kit for Fluent
Indigo.Design UI Kit for Material
コード自動生成ができる豊富なコンポーネント
Indigo.Design UI Kit は Infragistics が提供しているナビゲーション、アイコン、ボタン、セレクト、ドロップダウン、リスト、チェックボックス、といった基本的なUIコンポーネントから、データグリッドやチャートなど複雑で高度な機能を有するUIコンポーネントまで豊富に揃っています。
Figma の基本コンポーネント、メインコンポーネント、インスタンスコンポーネントの概念に基づいてデザインされており、App Builder を経由することで Angular, Blazor Server/WebAssembly, React , WebComponents のコード自動生成が可能になっています。
ぜひ、上記３つのダウンロードリンクから Indigo.Design UI Kit を取得してください。
Indigo.Design プラグイン（Figma プラグイン）を使用する
Indigo.Design UI Kit で作成された Figma デザインを、App Builder へインポートするには、「Indigo.Design プラグイン」を使用します。 Figma プラグインの１つで、プラグインインストールすると、ワンクリックのボタン操作で簡単に Figma から App Builder へデザインをインポートできます。
併せて、App Builder の操作手順を知りたい方や、Figuma プラグインの使用方法は下記ブログをご一読ください。Figma デザインを App Builder へインポートした後の工程で発生する可能性がある注意すべきポイントも掲載しています。
基本コンポーネント（Base Components）の理解
Indigo.Design UI Kit for Bootstrap は、「基本コンポーネント（Base Components）」とも呼ばれる「ビルディングブロック」を使用して構築されます。基本コンポーネントは他のコンポーネントにネストされ、「最上位の親」コンポーネントとして機能します。これにより、バリエーションセットが大規模でも素早く変更が可能です。
例えば、下図のように３つのバリエーションを持つコンポーネントがあるとします。このコンポーネントを「基本コンポーネント」と呼び、そのバリエーションセットを親セットとして「メインコンポーネント」フレームに配置しています。
ビルディングブロックパネルの基本コンポーネントに対して視覚的プロパティ（位置、丸み、サイズ、パディング、テキストスタイルなど）を変更した場合に、その変更は基本コンポーネントからオーバーライドされた親セットの「メインコンポーネント」に一括適用されます。グローバルな変更は基本コンポーネントから行い、親セット間のデザイン一貫性を保持しています。
コンポーネントの使用方法の理解
Indigo.Design デザインにコンポーネントを使用するには、Figma のページパネルにあるコンポーネントセクションから直接コピーする or アセットパネルから使用します。これらのコンポーネントには基本コンポーネントが含まれているため、再利用性が高いコンポーネントになっています。
プロパティ管理の理解
各コンポーネントにはキャンバスの右側にあるプロパティパネルで管理する様々なプロパティがあります。メインコンポーネント内にネストされたコンポーネントがある場合、複数のプロパティレイヤーが存在します。例えば、入力コンポーネントでは特定のシナリオに応じてプロパティを切り替えて状態や外観を変更できます。グローバルな変更は基本コンポーネントから行い、デザインの一貫性を保つことができます。
メタデータ（親子関係情報）の理解
Indigo.Design UI Kit 内の各コンポーネントには Indigo.Design 特有の「ロックされたメタデータレイヤーと非表示のメタデータレイヤー」が含まれます。これらのレイヤーには、コンポーネントの状態、テンプレート、その他のプロパティのメタデータ記述が含まれています。Figma のコード生成サービスや、App Builder でのデザイン変換やコード自動生成時に必要なため、削除や変更はしないように注意が必要です。
Figma デザインを App Builder へ取り込む場合の注意点
取り込んだデザインは「新規アプリ」になる
Figma から App Builder へのインポートは「新規アプリの作成」となるため、「アプリ更新はできない」ことに注意しましょう。例えば、Figma から App Builder に１回目の取り込みを行った後に Figma でデザインをもう一度修正して２回目の取り込みを行った場合に、App Builder 上には新規アプリケーションが２つ作成されたことになります。
Figma 有料版であっても、App Builder 上へのアプリ更新機能は提供されていません。このような場合は、インポート済みの２つのアプリケーションの「アプリケーション間のコピー＆ペースト（元ビューにて Ctrl+C でコピーし、空ビューに対して Ctrl+A で張り付け可能）」を有効活用しましょう。
取り込んだデザインは「親子関係がないビュー」になる
Figma上で親子関係を持った部品は、App Builder 上でも親子関係が 100%移植されます。しかし、Figma からインポートした部品は「親子関係がないビュー」オブジェクトとしてApp Builderに認識されます。Figma 上で複数枚のページ（ビュー）をデザインした場合に、ビュー同士の親子関係情報を Figma ではデータとして保持していません。
そのため、各ページに「共通のヘッダー部品（親ビュー）」を設置したい場合などに、App Builder 上ではマスタービューを作成します。マスタービューには共通ヘッダー部品を配置し、マスタービューの子ビューには共通ヘッダーのないページを作成するような手作業が発生します。Figma から自動でインポートされるものの、App Builder 上では、少なからずWebアプリケーションとしてカスタマイズ作業が発生することに注意しましょう。
取り込んだ縦長のデザインがページ途中で切れてしまう
Figma から App Builder 上に取り込んだデザイン画面が「縦長サイズ（例：1440px ✕ 2500px）」だった場合に、App Builder 上では取り込んだ際の「View Port サイズ」でインポートされます。このような場合に、縦長のデザインがページ途中で切れてしまう場合があります。対処方法としては、「Viewport サイズ」は変更せずにそのままでOKですが、各ページ配下（子ビュー配下）の「アウトライン＞子ビュー＞レイアウトオブジェクト等のコンテンツの縦サイズを拡大」すると、各ページのスクロールが可能になります。高さの調整作業が発生することに注意しましょう。
関連記事
BtoB企業のクリエイティブ現場における Figma To App Builder のコード自動生成に関する総合的な情報を掲載しています。本格的に Figma からコード自動生成を業務プロジェクトでスタートしたい方はご一読ください。
Figma と App Builder の連携を始めましょう！
今回の記事では、Figma デザインを App Builder へインポートして、コード自動生成する場合の注意ポイントを紹介しました。ぜひ、Indigo.Design UI キットを活用して App Builder のコード自動生成に活用してください。クリエイティブ現場のプロセス改善に繋がる Tips になれば幸いです。
すべてを体験するには、App Builder 無料トライアル にアクセスして最新バージョンを入手してください。
- 「こんなことは実現できるの？」
- 「どうやって実装すれば良いの？」
といった開発上の疑問にソリューションコンサルタントが直接お答えします。
ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。
