Figma のデザインを HTML コードへ自動変換する App Builder の操作手順（よくあるご質問解説）

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

もしあなたが今、Figma のファイル（.fig）を持っていて、その Figma ファイルのデザインをソースコード（HTML、CSS、開発言語コード）へ変換したいプロセスを考えた場合に、この手順が役に立つはずです。

Figma のデザインファイルをインフラジスティックス製の「App Builder」に取り込むことで、「Figma のデザイン」を元に HTML コードや CSS コード、Angular 用の TypeScript コード、Blazor 用の Razor コード、Web Components の「コードを自動生成」することができます。

「Figma」から「HTML コード」への自動生成
「Figma」から「CSS コード」への自動生成
「Figma」から「Angular の TypeScript コード」への自動生成
「Figma」から「Blazor の Razor コード」への自動生成
「Figma」から「Web Components コード」への自動生成（ネイティブの TypeScript）

「Figma」のデザインファイルをコーディング開発工程に流すフローを採用している企業は年々増えてきています。ぜひ開発現場の効率化になれば幸いです。では、詳細をご説明させていただきます。

Figma のデザインを HTML コードへ自動変換するプロセス
「Figma」と「App Builder」の連携を始めましょう！

Figma のデザインを HTML コードへ自動変換するプロセス

前提条件

実際に作業を始める前に、下記の前提条件があります。

App Builder の無料トライアルへ参加する必要があります。
Figma Indigo.Design UI Kit を入手し、Indigo.Design Figma プラグインを Figma プラグインに保存してください。
Figma UI キットの使用に関しては、こちらの手順もご参照ください。

こちらは App Builder を使用できる状態にすることと、Figma 上でインフラジスティックスのUI部品をデザイン配置した Figma ファイルをもとに、App Builder にデザインを取り込むために必要な前提条件になります。

また、注意点として Figma デザインファイルであれば何でも App Builder でコード出力できるのではなく、インフラジスティックス製の Figma プラグインをもとに、インフラジスティックス製のUIコンポーネントを使用してデザインされた Figma ファイルである場合に、コードの自動生成が可能になります。

操作手順 1：既にデザイン済みの「Figma ファイル」をダウンロードする

今回の記事ではサンプルとして、既にデザイン済みの「Figma」ファイル（チームコラボレーションアプリのデザイン）をダウンロードして、App Builder と連携する部分の手順を体験してみましょう。

ダウンロードはこちら

ダウンロードした ZIPファイルを展開すると「Figma」ファイルを確認することができます。この中の「Team Collaboration App.fig」を選択して、ダブルクリックで Figma を開きましょう。

操作手順 2：「Figma ファイル」のデザインを「App Builder」へ取り込む

下記のように Figma ファイルを開くことができたでしょうか？

それでは次に「Figma から App Builder」へデザインを取り込んでみましょう。操作は簡単なマウスクリックで「Figma ボタン＞プラグイン＞Indigo.Design Figma Plugin＞Create New App」をクリックします。

下記の小ウィンドウが開きますので、アプリケーション情報を入力します。入力が完了しましたら「Create App」ボタンを押下してください。数秒のインポート時間が掛かりますが、App Builder にアプリケーションが自動作成されます。

App Builder のワークスペース名
作成するアプリケーションのサイズ
アプリケーション名

操作手順 3：App Builder でアプリケーションのコードを自動生成する

それでは、App Builder を起動しましょう。先ほど Figma から取り込んだデザインのプロジェクト（例：Team Collaboration App）が作成されていることが確認できます。

「Figma」でデザインされた「チームコラボレーションアプリ」のデザインを App Builder で動かしてみましょう。App Builder 画面右上のホットリロードボタンを押下することで、プレビューをすぐに開始することができます。

最後に、App Builder からソースコードを自動生成してみましょう。今回は「Blazor Server コード」を自動生成したZIPファイルとしてダウンロードします。

Angular コードを自動生成
Blazor コードを自動生成
WebComponents コードを自動生成

展開されたZIPファイルのソリューションファイルを見てみましょう。今回は VisualStudio 2022 で「Blazor Server コード」を確認しました。「.razor ファイル」や「.css ファイル」が自動生成されており、ビルド実行したときに「Figma」ファイルでデザインされた画面を確認することができました。