👌

AIが生成したUIをFigmaに変換する方法

に公開
Figma
HTML
React
UI
生成 AI
tech

はじめに

最近、業務でGeminiのCanvasでUIを作成して、それを元に画面の開発をする機会がありました。
生成AIが生成したUIをそのまま開発の画面に落とし込む場合、UIのスクショやコードを共有しながらAIに開発を任せたとしても、精度が悪くなってしまい思った通りのデザインになりませんでした。

そこで、「html.to.design」と「Figma MCP」を使って、生成AIが作ったUIを高い精度でコードに変換することができたため、今回はその方法を共有します。

この記事では「html.to.design」で生成AIのUIをFigmaに変換する手順を解説します。
Figma MCPについては別の記事で解説します。

必要なツール

  1. Chrome 拡張機能「html.to.design」
  2. Figma プラグイン「html.to.design」

今回は例として、GeminiのCanvasであらかじめ作成したHTMLファイルを実際にFigmaのUIに変換してみます。

ページをキャプチャ

  1. ブラウザで画面を開いた状態で、html.to.design 拡張機能を起動
  2. 「Capture Current Page」ボタンをクリック
  3. キャプチャファイルが自動でダウンロードされる

    html.to.designによるページキャプチャの画面

Figma プラグインでインポート

  1. html.to.design Figma プラグインを起動
    • 「次で試す」でUIをインポートしたいFigmaファイルを選択後、「実行」を押下
  2. 「File」タブを選択
  3. ダウンロードしたファイルをドラッグ&ドロップ

    html.to.design Figmaプラグインのインポート画面

これにより、生成AIで作成したUIがFigmaにインポートされます。

Figma MCP との連携

今回の手法に加えて、Figma MCP を活用することで、FigmaのUIを高精度でコードに変換することができます。
Figma MCPについては別の記事で解説します。

参考リンク

Discussion