【ITニュース解説】Hey senior devs, how do Builder.io / Lovable / DhiWise really generate code from Figma designs? Am I understanding this right?

Figmaのようなデザインツールで作成された美しいデザインを、実際に動くウェブサイトやアプリケーションのコードに自動で変換してくれるツールが近年注目されている。Builder.ioやLovable、DhiWiseといったツールはその代表例だ。これらのツールが一体どのようにしてデザインからコードを生み出しているのか、その裏側の仕組みを理解することは、システムエンジニアを目指す上で非常に役立つだろう。

まず、コード生成プロセスの最初のステップは、Figmaで作成されたデザインの情報を取得することから始まる。これはFigmaが提供するAPI（Application Programming Interface）や専用のプラグインを利用して行われる。APIは、異なるソフトウェア同士が情報をやり取りするための窓口のようなもので、これにより外部ツールはFigma内部のデザインデータにアクセスできるようになる。取得されるデータは通常、JSON（JavaScript Object Notation）という形式だ。JSONは、データを構造化して表現するためのテキスト形式で、ウェブアプリケーションで広く使われている。このJSONデータには、デザインボード上のすべての要素、例えば「フレーム」と呼ばれるグループ、テキスト、画像、図形、レイヤー（要素の重なり順）などが、それぞれの位置、サイズ、色、フォントなどの詳細なプロパティと共に記述されている。しかし、この生の状態のJSONデータは非常に詳細かつ複雑で、そのままではコード生成に直接利用するのが難しい。

取得した生のデザインデータは、次にツール内部で扱いやすい形に整理・変換される。このプロセスは「正規化」と呼ばれ、データが特定の「内部スキーマ」にマッピングされる。内部スキーマとは、コード生成ツールが独自に定義する、デザイン要素を表現するための一貫したデータ構造のことだ。例えば、FigmaのJSONデータで「Frame」と記述されている要素は、ツール内部では「Container」という汎用的な概念に変換されるかもしれない。同様に、「Text」は「Typography」というテキスト要素を表すスキーマに、図形は「Shape」や「Icon」といったスキーマに変換される。このようなマッピングは、多くの場合、あらかじめ定義されたルールに基づいて行われる。特定のFigma要素やプロパティの組み合わせに対して、対応する内部スキーマ要素を割り当てるという具体的な規則が用意されているのだ。この段階では、AI（人工知能）が複雑な判断を下すというよりも、明確な規則に従ってデータを整理する「ルールベース」のアプローチが中心となる。これにより、変換結果が予測可能になり、後続のコード生成ステップでの安定性が保たれる。

内部スキーマに正規化されたデータが用意できると、いよいよ実際のコードが生成される。このステップでは、「テンプレート」と「ルール」が重要な役割を果たす。テンプレートとは、特定のUIコンポーネント（例えばボタン、入力フォーム、カードなど）のコードのひな形のことだ。これらのテンプレートは、ReactやVue、Angularといった特定のフレームワーク向けに事前に用意されている。そして、正規化された内部スキーマのデータが、このテンプレートの適切な箇所に埋め込まれる。例えば、内部スキーマに「ボタン」を表すデータがあり、その中にテキスト内容、フォントサイズ、色などの情報が含まれているとする。この情報が、Reactの<button>タグのテンプレートに、テキスト内容としては子要素として、フォントサイズや色などはインラインスタイルやCSSクラスとしてルールに基づいて埋め込まれていく。このルールベースの生成方法の大きな利点は、結果が非常に予測しやすいことだ。AIが自律的にコードを生成する場合に時折見られる「AIの幻覚」（意図しない、または意味不明な出力をする現象）のような問題を防ぎ、安定した高品質なコードの生成が可能となる。

ここまで説明した仕組みは、Figmaのデザインに忠実なコードを生成するのには適している。しかし、「このボタンを角丸にする」や「このレイアウトをグリッド表示に切り替える」といった、元のデザインには明示的に存在しない、ユーザーからの指示や修正要求に対して、これらのツールがどのように対応しているのかは、さらに踏み込んだ検討が必要となる。一つの考えられる方法は、ツールが常にそのルールとテンプレートのセットを拡張し続けているというものだ。つまり、より多くのデザインパターンやユーザーの要望に対応できるように、手動または半自動で新しいルールやテンプレートを追加・更新し続けている可能性がある。これにより、ユーザーの指示に合致するより多様なコードを生成できるようになる。

しかし、すべてのユーザープロンプトに対して個別のルールやテンプレートを用意するのは現実的ではない。そこで、このルールベースの生成の上に、AIの層を重ねて活用するアプローチが考えられる。これは、まずルールとテンプレートを使って基本的なコードを生成し、その後、ユーザーからの指示を受けてAIがその生成されたコードに対して「パッチを当てる」ように調整・修正を行うというものだ。例えば、「ボタンを角丸にする」という指示があった場合、AIは生成されたボタンのコード（例えば<button>タグと関連するCSSスタイル）を解析し、border-radiusのようなCSSプロパティを適切に追加または修正する。AIは、既存のコード構造やプロパティのパターンを学習しており、ユーザーの意図を解釈してコードに反映させる能力を持っている。この「パッチを当てる」という表現は、コード全体を再生成するのではなく、特定の部分だけを賢く変更・改善するという意味合いが強い。このようなハイブリッドなアプローチであれば、予測可能な基本コード生成の利点を保ちつつ、ユーザーの多様なニーズにも柔軟に対応できるようになる。

Figmaデザインからコードを自動生成する技術は、単にデザインをコードに変換するだけでなく、その裏側にはデザインデータの取得、正規化、そしてテンプレートとルールに基づくコード生成といった、複数の段階が積み重ねられていることがわかる。さらに、ユーザーの多様な要求に応えるためには、AIによるコードの調整や修正といった、より高度な技術の導入も検討されている。システムエンジニアを目指す者にとって、このような自動化技術の仕組みを深く理解することは、将来のソフトウェア開発において、デザインと開発の間のギャップを埋め、より効率的で高品質なプロダクトを生み出す上で不可欠な知識となるだろう。