こんにちは！ソリューションコンサルタントの田上です。
今回の記事では、Figmaで制作したデザインを App Builder へインポートした直後に「インポートエラー（モデルのシリアライズエラー）」が発生してしまうお問合せについてお答えします。
App Builder は、ドラグ＆ドロップで簡単にデザインをコード自動生成できるローコードツールですが、最初のトライアルでつまづくような場合の問題解決の Tips になれば幸いです。
エラー原因はインポートできないコンポーネント部品が混在している
このエラーは、 Figma アプリケーションから「Indigo.Design プラグイン」を使用するプロセスで発生する可能性があります。このエラーを回避する方法を解説していきます。
エラー再現の前提条件
- Figma デザインファイルを準備している
- Indigo.Design プラグインを設定している（ダウンロードとインストールの記事はコチラ）
- Figma から Indigo.Design プラグインの「Create New Apps」をクリックするとエラーが発生する
発生しているエラー
Model Collection Failed
Plugin has failed collecting and serializing the model representation of this file.
上記の「Model Collection Failed」というエラーメッセージは、ファイルのモデル表現を収集・シリアライズする際に、ファイルの破損、互換性の問題、メモリ不足、またはプラグインの不具合が原因で失敗したことを示しています。
解決方法
このエラーは、プラグイン動作時にモデルのシリアライズ時に問題が発生しています。プラグインでインポートできないコンポーネント部品が混在している可能性があるため、下記の2点を確認する必要があります。
- ①Figma デザインファイルの中に、Indigo.Design プラグインの動作を妨げるコンポーネントが含まれていないか。
- ②Figma コンポーネントの中でエラーになっているものがないか
このエラーの発生している箇所を特定するには、簡易なFigmaデザインを用意して、正常にインポートできるか確認していただくアプローチが効果的です。デザインを小さなパーツに分けて個別にインポートし、どの部分が問題を引き起こしているか特定していくアプローチになります。
エラー原因となるコンポーネントが特定できたら、次は該当のコンポーネントを削除して、Indigo.Design UIキットのパーツで置き換えができないかどうか、を検討して行きましょう。
Indigo.Design を意識したデザイン設計へのシフト
App Builder はデザインからコードを自動生成できる強力なツールですが、Figma デザインをインポートする際、従来の自由なデザイン設計から Indigo.Design を活用した設計思想へシフトする必要があります。
これにより、Figma での自由度が制限され、デザイナーにとってデザインしづらさを感じる場面が生じる可能性があります。App Builder によるコード自動生成のコストメリットとのバランスを検討することが重要です。
Indigo.Design UI キット ３つのデザインファイル
Indigo.Design UI Kit for Bootstrap
Indigo.Design UI Kit for Fluent
Indigo.Design UI Kit for Material
Figma と App Builder の連携を始めましょう！
今回の記事では、Figma デザインを App Builder へインポートする場合の注意ポイントを紹介しました。ぜひ、Indigo.Design UI キットを活用して App Builder のコード自動生成に活用してください。クリエイティブ現場のプロセス改善に繋がる Tips になれば幸いです。
すべてを体験するには、App Builder 無料トライアルにアクセスして最新バージョンを入手してください。
- 「こんなことは実現できるの？」
- 「どうやって実装すれば良いの？」
といった開発上の疑問にソリューションコンサルタントが直接お答えします。
ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。
