AI to Figma：ClaudeやCursorで生成したUIをFigmaに送る

Model Context Protocol（MCP）は、AIツールが外部ツールを呼び出せるようにするオープンな標準です。HTML to Framesはインポート機能をMCPサーバーとして公開しているため、MCPに対応したあらゆるクライアントからFigmaにページを送れます。

接続情報の取得

FigmaでHTML to Framesを開き、AIタブに移動します。個人用のトークンと、お使いのクライアント向けのコピー＆ペースト用設定が表示されます。設定を手書きする必要はありません。

Claude Code

AIタブの設定を使ってサーバーを追加し、作成中のページをFigmaに送るようClaudeに依頼します。Claudeはファイルの内容を使ってimport_htmlを呼び出します。

Claude Desktop

提供されたスニペットを使ってClaude DesktopのMCP設定にサーバーを追加し、変更が反映されない場合はアプリを再起動します。すると会話の中にHTML to Framesのツールが表示されます。

Cursor

同じ情報を使ってCursorのMCP設定にサーバーを追加します。エディターで作業している間に、エージェントが生成したページやURLをインポートできるようになります。

その他のMCPクライアント

MCPサーバーに対応したクライアントであれば、同じトークンで接続できます。なお、OAuthを使うclaude.aiのWebコネクターにはまだ対応していません。

各クライアントの正確な手順はドキュメントで最新の状態に保たれています。

AIが生成したHTMLは、細かい点で一貫性に欠けがちです。ボタンごとに少しずつ違う青、ほとんど同じ3種類のフォントサイズ、数ピクセルずつ異なる余白などです。そのままインポートすると、散らかったデザインファイルになってしまいます。HTML to Framesは、取り込む段階でそれを整えるための機能を用意しています。

• **検証済みのAuto Layout。**生成されたCSSのflexboxやgridのレイアウトは、すべての子要素が2 px以内に収まる箇所でAuto Layoutフレームになるため、下書きを簡単に並べ替えられます。
• **Styles & variables（Pro）。**繰り返し使われる色とCSSカスタムプロパティがバリアブルになり、テキストスタイルとシャドウスタイルが作成されます。
• **Snap to my file's styles（Pro）。**システムと完全一致しない値が既存の最も近いカラースタイルとテキストスタイルにスナップするため、AIの下書きがシステムに沿った状態で届きます。
• **コンポーネント（Pro）。**繰り返し使われるカード、ボタン、リスト項目が、インスタンスを持つコンポーネントになります。

実用的なループは次のとおりです。AIにレイアウトを依頼し、Figmaに送り、視覚的に調整してから、次の反復に向けて変更内容をAIに伝えます。各ラウンドは新しいフレームとして届くため、キャンバス上にバージョンの履歴が残ります。

インポートにはあなた自身のプランが使われるため、他のインポートと同じ上限が適用されます。詳しくは料金をご覧ください。

AIツールをデザインファイルに接続すると、何が共有されるのかという疑問が生じるのは当然です。MCP接続の扱いは次のとおりです。

トークン

接続トークンは、こちら側ではハッシュとしてのみ保存されます。パスワードと同じように扱い、共有リポジトリに含めないでください。クライアントがあなたのプラグインにページを送れるのは、このトークンがあるからです。

転送中のページ

AIが送ったページは、開いているプラグインが受け取るまで最大30分間メモリで待機します。URLインポートは、他のすべてのインポートと同じ隔離されたサンドボックスのブラウザでレンダリングされ、結果がディスクに書き込まれることはありません。

あなたのFigmaファイル

この接続を通じてAIがFigmaファイルを読み取ることはできません。プラグイン自体もファイルの内容は読み取らず、新しいレイヤーを書き込み、自身のフレームのメタデータだけを読み取ります。

制限

• import_htmlが受け付けるHTMLは最大2 MBです。
• ページを受け取るには、Figmaでプラグインを開いておく必要があります。
• 各ページはプランの1回のインポートとしてカウントされます。
• claude.aiのWebコネクター（OAuth）にはまだ対応していません。

データ保持の詳細はセキュリティページにあります。