AI to Figma：ClaudeやCursorで作ったUIをMCPでFigmaへ

AIコーディングアシスタントは、説得力のあるランディングページや設定画面、ダッシュボードを数分で作れるようになりました。問題は、そのUIがどこに置かれるかです。コードエディタやローカルプレビューの中にあり、チームがデザインをレビューし、注釈を付け、磨き上げるFigmaファイルからは遠く離れています。

このガイドでは、AI to Figma 接続でそのギャップを埋める方法を紹介します。HTML to Framesは MCP接続 を提供しており、Claude Code、Claude Desktop、Cursor、その他のMCPクライアントから、開いているFigmaプラグインへページを直接送れます。送られたページは、Auto Layout（オートレイアウト）付きの 実際に編集できるレイヤー に変換されます。

ここでいう「AI to Figma」とは

AI to Figmaと呼ばれるものには、大きく異なる2つの意味があります。

1. プロンプトから Figma内でデザインを生成するAI。
2. HTMLとCSSを書くAI と、そのコードをFigmaレイヤーに変換する橋渡し。

HTML to Framesが担うのは2つ目です。AIツールは得意なフロントエンドコードの記述を続け、プラグインはあらゆるWebページに対して行っているのと同じ変換を行います。フレーム、テキスト、ベクター、画像、バリアブル、そしてAuto Layoutです。同じキャプチャパイプラインを通るため、公開中のサイトを取り込む場合と同じ品質の結果が得られます。製品の概要は AI to Figma をご覧ください。

MCP接続の仕組み

Model Context Protocol（MCP）は、AIツールが外部ツールを呼び出すための標準的な方法です。HTML to FramesをMCPサーバーとして接続すると、AIツールで次の3つのツールが使えるようになります。

ページはFigmaで 開いているあなたのプラグイン に届き、あなた自身のプラン でインポートされます。そのため、1回のインポートあたりの画面数、スタイルとバリアブル、コンポーネントなど、通常のプランのルールがそのまま適用されます。

AIツールに返されるもの

AIにFigmaファイルが返されることはありません。返されるのは、ページが引き渡されたことを確認するツール呼び出しの応答で、AIは import_status を呼び出してインポートの進み具合を確認できます。デザイン作業そのものはFigmaのプラグイン内で行われ、フレーム、レイヤー、Auto Layoutの割合、警告を示す結果画面が表示されます。これは意図的な設計です。プラグインは Figmaファイルの内容を読み取らない ため、ファイルに関する情報がAIに流れることはありません。

設定：プラグインのAIタブからAIツールを接続する

設定はAIクライアントごとに一度だけ行います。すべてはプラグインから始まります。

1. FigmaでHTML to Framesを開き、AI タブに移動します。
2. トークンを取得します。 AIタブで接続トークンが発行されます。パスワードと同じように扱ってください。
3. クライアントを選びます。 AIタブには、対応クライアントごとの コピー＆ペースト用の設定 が表示されます。
4. 表示された設定を そのままクライアントに貼り付けます（クライアント別の詳細は下記）。
5. 新しいMCPサーバーを読み込ませるため、クライアントを再起動または再読み込み します。
6. 作業中は Figmaでプラグインを開いたままに してください。ページは開いているプラグインに届きます。

Claude Code

Claude CodeはMCPサーバーを設定から読み込みます。AIタブに表示されるClaude Code用の設定をコピーし、指示どおりに実行または貼り付けてください。その後、新しいセッションを開始してClaudeにツール一覧を尋ねると、import_html、import_url、import_status が表示されるはずです。

Claude Desktop

Claude DesktopはMCPサーバーを設定ファイルで管理しており、アプリの開発者設定から開けます。AIタブのスニペットをそのファイルに貼り付けて保存し、Claude Desktopを完全に再起動してください。新しいチャットのツールメニューにツールが表示されます。

Cursor

CursorはMCPサーバーを設定画面に一覧表示します。AIタブのスニペットを使って新しいサーバーを追加・保存し、そのサーバーが3つのツールとともに接続済みと表示されることを確認してください。

その他のMCPクライアント

MCPに対応したツールであれば、同じトークンと設定が使えます。AIタブの汎用設定を使い、お使いのクライアントのサーバー登録方法に合わせて調整してください。

未対応：claude.aiのWebコネクタ

claude.aiのWebコネクタ（OAuth）にはまだ対応していません。 ブラウザ版のClaudeで作業している場合は、そこでHTMLを生成して保存し、プラグインのLocal file（ローカルファイル）またはPaste code（コードを貼り付け）から取り込んでください。あるいは、現時点でMCP接続に対応しているClaude CodeやClaude Desktopに作業を移してください。

プライバシー：トークンとページの扱い

AIを使ったワークフローでは、コードやデザインがどこへ渡るのかが気になるのは当然です。この接続で行われることは次のとおりです。

• 接続トークンはハッシュとしてのみ保存されます。 サービスはトークンを照合できますが、トークンそのものは保持しません。
• ページがメモリ上で待機するのは最大30分です。 その間にプラグインがページを受け取らなければ、ページは消去されます。
• レンダリングは隔離されたサンドボックスのブラウザで行われます。 結果は一度だけ届けられ、その後メモリから削除され、ディスクに書き込まれることはありません。
• プラグイン、拡張機能、Webサイトのいずれにも Cookie、アナリティクス、トラッキングピクセルはありません。
• Figmaから お名前やメールアドレスを受け取ることはありません。アカウント識別子はFigmaのユーザーIDから生成されます。

詳しくは セキュリティのページ をご覧ください。

知っておきたい制限

• HTMLのサイズ： import_html が受け付けるのは最大2 MBです。巨大なbase64画像のインライン化は控えめにし、可能であればホストされた画像にリンクしてください。
• import_url は公開URLのみ対応です。 AIのプレビューが localhost で動いている場合は、AIに import_html でHTMLを直接送らせるか、localhostやログインが必要なページに対応した Chrome拡張機能 で実行中のページをキャプチャしてください。
• プランの利用枠が適用されます。 各ページはプランのインポート1回としてカウントされます。Freeは月10回のインポートで、1回あたり1画面です。ProとTeamはフェアユースの範囲で無制限、1回のインポートあたり最大4画面です。料金 をご覧ください。
• 変換ルールは通常のページと同じです。 iframe、WebGLキャンバス、ポスター画像のない動画は、その領域のスクリーンショット画像になります。skewや3D変形はまだ変換されません。

試したいプロンプト

接続したら、いつもどおりAIと会話し、結果をFigmaに送るよう指示するだけです。うまくいくプロンプトの例を紹介します。

1. 「flexboxを使ったプレーンなHTMLとCSSで3段階の料金ページを作り、import_htmlでFigmaに送って。」
2. 「今作った設定画面のCSSをインライン化してFigmaにインポートして。その後import_statusを確認して。」
3. 「ステージングサイトはこの公開URLにあります。料金ページとサインアップページをimport_urlでFigmaにインポートして。」
4. 「このヒーローセクションのバリエーションを2つ作って。見出しが左揃えのものと中央揃えのもの。それぞれ別のインポートとしてFigmaに送って。」
5. 「このカードグリッドを色にCSSカスタムプロパティを使う形で書き直してから、バリアブルが反映されるようにインポートして。」

きれいなFigma出力を得るためのプロンプトのコツ

CSSの書き方を少し誘導すると、AIはより良いインポート結果を生みます。

• 兄弟要素の間隔にはマージンではなく、gap を使った flexboxとgrid を求めましょう。これらはAuto Layoutにきれいに対応します。CSSのflexboxとgridをAuto Layoutへ をご覧ください。
• 色には CSSカスタムプロパティ を求めましょう。Styles & variables（スタイルとバリアブル、Pro）をオンにすると、--brand-primary は brand/primary バリアブルになります。
• 見出しをすべて編集可能に保つため、画像に焼き込んだテキストではなく 実際のテキスト を求めましょう。
• 1回のインポートにつき1ページ にしましょう。長い複数画面のドキュメントはレビューしにくくなります。

デザインとコードのループ

本当の価値は1回のインポートではありません。デザインとコードのずれをなくすループにこそあります。

1. プロンプト： AIがコードで最初のバージョンを作ります。
2. インポート： AIが import_html または import_url でFigmaに送ります。
3. Figmaでレビュー： デザイナーがAuto Layoutフレームで余白、文字、色、レイアウトを調整し、コメントを付け、代替案を検討します。
4. 変更内容を伝える： 何を変えたかをAIに伝えるか、該当する値を貼り付け、コードを更新させます。
5. Re-import（再インポート） して、コードが一致したことを確認し、前のフレームと比較します。

メリットがある人

• デザイナー は、AIのプロトタイプを手で描き直す必要がなくなり、編集可能なフレームから始められます。
• フロントエンド開発者 は、スクリーンショットを書き出さずに、実際の出力に対するデザインレビューを受けられます。
• プロダクトマネージャー は、プロンプトからステークホルダー会議用のレビュー可能なFigmaページを作れます。
• 個人開発者 は、すべての反復の記録を1つのファイルに視覚的に残せます。

AI to Figmaと他の方法の比較

プラグインを使う3つの方法は、すべて同じエンジンを使います。MCPはコピー＆ペーストの手間をなくし、AIに操作を任せるだけです。Auto Layoutは 検証済み です。すべての子要素の位置が2 px以内で確認され、レイアウトが保たれない場合はよりシンプルな案が試されるか、フレームが絶対位置のまま残されます。デザインが崩れることはありません。詳しくは Auto Layoutの仕組み をご覧ください。

トラブルシューティング

• AIがツールを使えないと言う。 サーバーを追加した後にクライアントを再起動し、スニペットが変更されずに貼り付けられているか確認してください。
• インポートが表示されない。 Figmaでプラグインが開いているか確認してください。ページは最大30分待機するので、その間にプラグインを開けば受け取られます。
• トークンが拒否された。 AIタブで新しいトークンを発行し、クライアントの設定を更新してください。
• レイアウトがおかしい。 結果画面の診断情報で、フレームが絶対位置のまま残った理由を確認し、そのセクションにflexboxまたはgridを使うようAIに依頼してください。

はじめに

プラグインを開いてAIタブに移動し、クライアントを1つ接続しましょう。AIツールに小さなコンポーネントを作ってFigmaに送るよう頼めば、画面全体を任せる前に動作を確かめられます。AIタブについては ドキュメント を、インポートが対応するすべての機能は 機能一覧 をご覧ください。