宮崎翼 
こんにちは。 AIによるデザイン生成とノーコード開発の進化が止まりません。Figma公式のAI機能「Figma Make」でデザインを瞬時に生成し、それをノーコードツール「Bubble」でWebアプリとして動かす。この流れは、もはや開発のスタンダードになりつつあります。
しかし、もしこの間に「あえて」HTML化のプロセスを挟んだらどうなるのでしょうか？
今回は、「Figma Make」→「FigmaHTML」→「Bubble To Figma」という、少し変わった連携フローを実験的に試し、その実用性や可能性についてレポートします。
（注意）このフローは、まだきれいに取り込みできないことがあることに注意下さい。（2025/11/8）
Figma MakeからFigma Designへの直接反映をまず待った方がいいとは思う。。
登場するプレイヤー（ツール）紹介
今回の実験で使用するツールを整理します。
- Figma Make: Figmaに搭載されたAI機能。プロンプト（テキスト指示）から、編集可能なデザインや動作するプロトタイプを自動生成します。
- FigmaHTML (html.to.design): ここでは、既存のWebサイト（HTML）をFigmaのデザインレイヤーに変換（インポート）する人気プラグイン「html.to.design」を指します。
- Bubble To Figma (Figma to Bubble): Figmaのデザインをノーコードツール「Bubble」にインポートするための公式連携機能です。（一般的には「Figma to Bubble」と呼ばれます）
🔬 実験ワークフロー：「AI → HTML → ノーコード」の実行手順
ご指定の順番通りに、作業手順を追ってみましょう。
ステップ1: Figma Make でAIにデザインを生成させる
まずは、Figma Makeを使ってアプリのベースデザインを生成します。
- Figmaを開き、
+ 作成>Makeを選択します。 - プロンプト入力欄に、作りたいアプリの概要を指示します。（例：「シンプルなタスク管理アプリのダッシュボード。モダンでクリーンなデザイン。」）
- AIがデザインを生成します。この時点で、Figmaキャンバス上には編集可能なデザインレイヤー群が出来上がっています。
ステップ2: Figma Makeの成果物を「HTML」として書き出す
ここが最初の分岐点です。次の「FigmaHTML (html.to.design)」プラグインで読み込むために、ステップ1で生成したFigmaデザインを一度Figmaの外（HTML）に出します。
- Figma Makeのプレビュー画面右上にある「公開」ボタンをクリック。
- サイト名を付けて公開し、生成された公開URL（
https://[...].figma.site/）をコピーします。- （別解：コードエディタからHTML/CSSコード自体をコピーすることも可能です）
【ポイント】 この時点で、Figma Makeは「Figmaデザイン」と「Webサイト（HTML）」の両方を同時に生成していることがわかります。
ステップ3: 「FigmaHTML (html.to.design)」でデザインを再インポートする
次に、ステップ2で取得したURLを使い、あえてFigmaにデザインを「逆輸入」します。
- Figmaで新規ファイルを開きます。
- Figmaコミュニティからプラグイン「html.to.design」を実行します。
- プラグインの「URL」タブに、ステップ2でコピーしたFigma Makeの公開URLを貼り付け、「Import」をクリックします。
- プラグインが公開サイトを解析し、Figmaキャンバス上にデザインレイヤーとして再構築します。
ステップ4: 「Bubble To Figma (Figma to Bubble)」でBubbleに連携する
最後に、ステップ3で再インポートしたFigmaデザインを、Bubbleに取り込みます。
- Figma側:
設定>個人アクセストークンでBubble連携用のトークンを発行し、コピーします。 - Bubble側: Bubbleエディタの
Settings>Generalタブを開きます。 - 「Design import」セクションに、Figmaアクセストークンと、ステップ3のFigmaファイルURLを貼り付けます。
- Bubbleエディタの「Import from Figma」ボタンから、インポートしたいフレームを選択して実行します。
- FigmaのデザインがBubbleの要素（Element）として変換され、配置されます。
💡 検証結果：このフローは「実用的」か？
さて、この「Figma Make」→「FigmaHTML」→「Bubble To Figma」という流れは実用的だったのでしょうか。
結論から言えば、「技術的には可能だが、非常に遠回り」です。
なぜ遠回りなのか？
最大の理由は、ステップ1とステップ3にあります。
- ステップ1: 「Figma Make」は、AIに指示した時点で既にFigmaの編集可能なデザインレイヤーを生成しています。
- ステップ3: 「html.to.design」は、Webサイト（HTML）をFigmaのデザインレイヤーに変換するためのツールです。
つまり、「Figma Makeが生成したFigmaデザイン」を、一度HTML化し、それを「html.to.design」でわざわざ「Figmaデザイン」に戻しているのです。これは、テキストファイルを一度PDF化し、それをOCRで再度テキストファイルに戻すような二度手間と言えます。
🏆【最適解】AI to ノーコード開発の「実用的な」ワークフロー
では、Figma MakeとBubbleを連携させる場合の、
最も効率的で実用的なフローはどれでしょうか。 答えは非常にシンプルです。
最適なワークフロー (ステップ2, 3を省略)
- Figma Make でデザインを生成
- AIがFigmaキャンバス上にデザインを生成します。
- （推奨）Figma でデザインを微調整
- AIが生成したデザイン（特にAuto Layoutやコンポーネント設定）を、Bubbleに持ち込みやすいよう手動で調整します。
- Figma to Bubble でインポート
- ステップ1（または2）のFigmaファイルURLを直接Bubbleに設定し、インポートします。
【ポイント】 「FigmaHTML (html.to.design)」プラグインは、**Figma Makeとは無関係の「既存のWebサイト」**をFigmaにインポートして改修したい場合に非常に強力なツールです。
結論
今回の「Figma Make → FigmaHTML → Bubble To Figma」というフローは、各ツールの連携可能性を探る興味深い「実験」ではありましたが、実務で使うメリットはほぼありません。
AppTalenthub読者の皆様がAIとノーコードを連携させる際は、ぜひ「Figma Make → （調整） → Figma to Bubble」という最短・最強のワークフローをご活用ください。
AIがデザインの「0→1」を、ノーコードが「1→100」のロジック実装を担う。この強力なコンビネーションで、アプリ開発はさらに加速していきます。
