インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

FigmaとApp Builderを使ったコード生成の注意ポイント(Indigo.Design UI キット活用術)

https://jp.infragistics.com/products/appbuilder

こんにちは!ソリューションコンサルタントの田上です。

Infragistics の App Builder は、Figma デザインを取り込んで、コード自動生成できる画期的なツールですが、使用する際の注意ポイントを理解しましょう。

注意するポイントは下記です。

  • Indigo.Design UI キットのデザインファイルが必要
  • Indigo.Design プラグイン(Figma プラグイン)が必要
  • 基本コンポーネント(Base Components)の理解
  • コンポーネントの使用方法の理解
  • プロパティ管理の理解
  • メタデータ(親子関係情報)の理解

これらを理解することで、Figma から App Builder へインポートしたデザインを、コード自動生成する業務シナリオにおいて、効率的にツールの活用が進むと思います。

Figma と App Builder を使ったコード生成の注意ポイント

前提条件

前提条件として、Figma でデザインする際に「Infragistics Indigo.Design UIキット」のデザインファイルとプラグインを使用します。「App Builder でコード自動生成が可能な3つのデザインファイル」が提供されていますので、ご自身のデザインテイストに合わせて、選択して活用します。

Indigo.Design UI キット 3つのデザインファイル

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 のコード自動生成が可能になっています。

ぜひ、上記3つのダウンロードリンクから Indigo.Design UI Kit を取得してください。

Indigo.Design プラグイン(Figma プラグイン)を使用する

Indigo.Design UI Kit で作成された Figma デザインを、App Builder へインポートするには、「Indigo.Design プラグイン」を使用します。 Figma プラグインの1つで、プラグインインストールすると、ワンクリックのボタン操作で簡単に Figma から App Builder へデザインをインポートできます。

ダウンロードはコチラ

併せて、App Builder の操作手順を知りたい方や、Figuma プラグインの使用方法は下記ブログをご一読ください。Figma デザインを App Builder へインポートした後の工程で発生する可能性がある注意すべきポイントも掲載しています。

blogs.jp.infragistics.com

基本コンポーネント(Base Components)の理解

Indigo.Design UI Kit for Bootstrap は、「基本コンポーネント(Base Components)」とも呼ばれる「ビルディングブロック」を使用して構築されます。基本コンポーネントは他のコンポーネントにネストされ、「最上位の親」コンポーネントとして機能します。これにより、バリエーションセットが大規模でも素早く変更が可能です。

例えば、下図のように3つのバリエーションを持つコンポーネントがあるとします。このコンポーネントを「基本コンポーネント」と呼び、そのバリエーションセットを親セットとして「メインコンポーネント」フレームに配置しています。

ビルディングブロックパネルの基本コンポーネントに対して視覚的プロパティ(位置、丸み、サイズ、パディング、テキストスタイルなど)を変更した場合に、その変更は基本コンポーネントからオーバーライドされた親セットの「メインコンポーネント」に一括適用されます。グローバルな変更は基本コンポーネントから行い、親セット間のデザイン一貫性を保持しています。

コンポーネントの使用方法の理解

Indigo.Design デザインにコンポーネントを使用するには、Figma のページパネルにあるコンポーネントセクションから直接コピーする or アセットパネルから使用します。これらのコンポーネントには基本コンポーネントが含まれているため、再利用性が高いコンポーネントになっています。

コンポーネントをコピーして使用する

プロパティ管理の理解

各コンポーネントにはキャンバスの右側にあるプロパティパネルで管理する様々なプロパティがあります。メインコンポーネント内にネストされたコンポーネントがある場合、複数のプロパティレイヤーが存在します。例えば、入力コンポーネントでは特定のシナリオに応じてプロパティを切り替えて状態や外観を変更できます。グローバルな変更は基本コンポーネントから行い、デザインの一貫性を保つことができます。

プロパティ管理

メタデータ(親子関係情報)の理解

Indigo.Design UI Kit 内の各コンポーネントには Indigo.Design 特有の「ロックされたメタデータレイヤーと非表示のメタデータレイヤー」が含まれます。これらのレイヤーには、コンポーネントの状態、テンプレート、その他のプロパティのメタデータ記述が含まれています。Figma のコード生成サービスや、App Builder でのデザイン変換やコード自動生成時に必要なため、削除や変更はしないように注意が必要です。

メタデータは削除しないように注意が必要です

ロックマークに注意しましょう

関連記事

BtoB企業のクリエイティブ現場における Figma To App Builder のコード自動生成に関する総合的な情報を掲載しています。本格的に Figma からコード自動生成を業務プロジェクトでスタートしたい方はご一読ください。

blogs.jp.infragistics.com

Figma と App Builder の連携を始めましょう!

今回の記事では、Figma デザインを App Builder へインポートして、コード自動生成する場合の注意ポイントを紹介しました。ぜひ、Indigo.Design UI キットを活用して App Builder のコード自動生成に活用してください。クリエイティブ現場のプロセス改善に繋がる Tips になれば幸いです。

すべてを体験するには、App Builder 無料トライアル にアクセスして最新バージョンを入手してください。

  • 「こんなことは実現できるの?」
  • 「どうやって実装すれば良いの?」

といった開発上の疑問にソリューションコンサルタントが直接お答えします。

ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。

https://jp.infragistics.com/products/appbuilder