Claude DesignとFigmaの違い — 書き出し先に無い理由と使い分け

Claude DesignはFigmaと連携できるか

Claude DesignのFAQには、書き出し先のConnectorが9つ名指しで挙げられています。内訳はAdobe・Base44・Canva・Gamma・Lovable・Miro・Replit・Vercel・Wixです。この一覧にFigmaは含まれていません。一方でFigma自身は、Claude・Claude Code向けに独立したMCP Connectorを提供しています。Figma Connectorのページ本文にも、Claude Designとの連携は書かれていません。説明文・Key features・Toolsの各欄にも、Claude Designへの言及はありません。

Figma Connectorが実際にできること

Figma Connectorは、Figmaのデザインからコードを生成するためのツールです。説明文では「Figmaのコンテキストを取り込み、コードベースとデザイン意図に沿った高品質なコードを生成する」ことが目的だとされています。開発元はFigma自身です。Connectorsディレクトリには「Verified」ラベル付きで掲載され、サインインが必須、追加時期は2025年11月、接続先はhttps://mcp.figma.com/mcp、カテゴリはCreativeです。

主な機能は次の4つです。

ツールはgenerate_diagram get_design_context get_screenshot get_metadata create_design_system_rules get_variable_defs get_code_connect_map get_figjam whoamiの9種です。get_screenshotには注記があり、ClaudeおよびClaude Codeから呼び出した場合、スクリーンショットそのものではなく説明文を返す動作に限定されています。実際の接続手順とコード生成の使い方はFigma MCPサーバーの使い方にまとめています。

取得元として明記されているのは「Figma Design」と「Make files」の2種類です。Figma Designは通常のデザインファイル、Make filesはFigmaのアプリ生成機能で作られたファイルを指します。ツール数を比べると、Figmaの9種はCanva Connector(17種)やMiro Connector(31種)よりも少数です。ただしFigmaは、このコード生成用MCPツールとは別に、Claudeの会話画面内でデザインを直接確認・注釈できる「インタラクティブConnector」8社の一つにも数えられています(Amplitude・Asana・Box・Canva・Clay・Hex・Slackと並ぶ枠組み)。コード生成に閉じた製品ではなく、レビュー用途にも対応領域が広がっています。

Claude Designが実際に連携している先

Claude Designは、ユーザーがClaudeと対話しながらデザイン・スライド・プロトタイプのようなビジュアル成果物を作る、Anthropicのベータ版プロダクトです。Claude Pro・Max・Team・Enterpriseプランに含まれ、claude.ai/designかClaude Desktopのサイドバーから使えます。ただしEnterpriseプランでは既定でオフになっており、組織の管理者がOrganization settingsで有効化する必要があります。公式ヘルプの「Known limitations」には、対応環境がwebとdesktopのみである旨が明記されており、モバイル版はありません。

取り込み元はFAQ上ではコードベース・Web capture・DOCX/PPTX/XLSXファイルです。書き出し先はPPTX・PDF・HTML、組織スコープの共有リンク、Claude Codeへの引き渡し、そして前述の9つのConnectorです。プロジェクト単位ではこれとは別に、コードリポジトリや既存のデザインファイルをコンテキストとして読み込む機能もあり、公式ヘルプは「既存のプロダクトデザイン成果物を複数の方法でアップロードできる」と説明しています。Figma固有のファイル形式は名指しされていませんが、画面キャプチャや書き出したファイルを参考資料として渡す余地はこの経路にあります。

Claude CodeとClaude Designの間はスラッシュコマンドで行き来します。/design-syncはClaude Code側でデザインシステムを取り込むコマンド、/designはClaude Code内で直接デザイン作業をするコマンドです。加えてターミナルからClaude Design自体を呼び出す経路もあり、claude mcp addでMCPサーバーを追加し/design-loginでサインインすると、Claude Code内でClaude Designの作業を継続できます。Figma MCPとこのClaude Design MCPは別々のサーバーです。

サイトが挙げる想定用途はプロトタイプ・ワイヤーフレームやモックアップ・デザイン案の複数出し・ピッチデック・マーケティング素材・資料の6種です。デザインシステムはGitHubリポジトリやデザインファイル、ローカルのコードベースから取り込めます。大規模なチームでは、管理者ロールがデザインシステムの公開・組織の既定への設定・削除を管理できます。Anthropicの管理者向けガイドによれば、この権限はEnterpriseプランのカスタムロールとして提供されており、権限を持たないメンバーが操作しようとすると管理者への連絡を促すアラートが出ます。

生成した後の調整も、Figmaのようなベクター編集ツールとは別の操作体系です。ページの説明によれば、要素へのコメント・テキストの直接編集・調整用スライダーによる余白や配色の変更・要素のドラッグ/リサイズ/整列といった編集ができます。これはFigmaのレイヤーパネルやプロパティパネルを直接操作する編集方式ではなく、会話とスライダーを組み合わせた調整方式です。公式ヘルプは「複数人が同時に1つのデザインを編集する機能はまだ基本的で、安定して動かないことがある」とも記載しており、共同編集の成熟度も比較軸の一つです。

なぜFigmaだけ挙がっていないのか

書き出し先9社の性格を見ると、Adobe・Canva・Gammaは仕上げ・配布の受け皿です。Base44・Lovable・Replit・Vercel・Wixは、生成したデザインをそのままアプリやサイトとして稼働させる先です。Miroはチームでの合意形成用キャンバスに当たります。Figmaだけは、Claude Design自身と同じく「デザインが最初に作られ、保存される場所」を担うツールです。出力を受け取る側と、作業の起点になる側は役割が違います。コード生成用のFigma Connectorに限って見れば、Figmaを「コード生成の入力」として扱う向きは、Claude Designの書き出し先とは逆です。

実務ではどちらを使えばいいか

すでにFigmaでデザインを作っていて、それをコードにしたい場合はFigma Connectorが担当です。ClaudeまたはClaude CodeからFigmaのフレームやノードを指定すれば、既存デザインに沿ったコードが生成されます。

Claude Design自身も、この使い分けを想定した動線を公式サイトで示しています。原文は「Generate a dozen directions in minutes, then narrow down in your primary tool.」で、数分で何案も出し、そこから普段使いのツールで絞り込む、という流れです。原文はツール名を特定していませんが、普段使いのツールがFigmaなら、案出しはClaude Designで済ませ、絞り込み以降をFigmaに戻す運用と読み替えられます。ただしClaude DesignからFigmaへ直接書き出す手段は無いため、書き出したファイルや画面キャプチャを見ながらFigma側で作り直す形になります。

逆に、まだ何も作っていない状態からClaudeと対話しながらデザインを起こし、完成後にCanvaやMiro、Adobeのようなツールへ送りたい場合はClaude Designの領分です。Claude Designの使い方で基本操作を確認できます。

Figmaでの編集を前提にするなら、Claude Designで案出しをしてから画面キャプチャや書き出したファイルを参考にFigma側で作り直すか、最初からFigmaで作ってコード化の段階でFigma Connectorに切り替えるか、いずれかの運用になります。逆にClaude Designから始めた案は、コードベースやCanva・Miroのような書き出し先、または画面キャプチャのような参考資料としての受け渡しに限られます。Claude Code上でFigma MCPとClaude Design MCPを両方セットアップすれば、同じ端末内で両方のツールを呼び出せます。ただしこれは各MCPを個別に使う手順を組み合わせているだけで、公式にファイル連携の仕組みとして明記されているわけではありません。

CoworkでFigmaとコードを往復させる運用まで含めて検討したい場合は、Cowork Figma連携でコードとデザインを往復させる手順が実際のワークフローをカバーしています。

よくある質問

FigmaのファイルはClaude Designに取り込めますか

Figma専用の取り込み機能はありません。FAQが挙げる正式な取り込み形式はコードベース・Web capture・DOCX・PPTX・XLSXで、Figmaは含まれていません。ただし公式ヘルプには、プロジェクト単位で既存のデザインファイルや画面キャプチャを参考資料として渡せる経路も別に説明されており、Figmaから書き出した画像やファイルを参考として持ち込むこと自体は排除されていません。Figma上のデザインをそのままコードに変換したい場合は、Figma Connector側の役割になります。

Figma ConnectorはどこのClaudeで使えますか

Connectorsディレクトリ自体はClaude.ai・デスクトップ・モバイル・Claude Code・Coworkで共通のカタログを使う仕組みです。Figma Connectorのページ本文で対応製品が名指しされているのはget_screenshotの注記(ClaudeとClaude Codeでは説明文を返す動作になる、という制限の説明)だけで、それ以外の項目に利用製品の限定は明記されていません。

今後Figmaが追加される可能性はありますか

ページに将来の予定は記載されていません。Claude Designの書き出し先一覧は「more destinations coming soon(今後も追加予定)」という表現で締めくくられており、追加の余地自体は示唆されています。Figmaは書き出し先一覧にもFigma Connectorの説明にも含まれていません。

まとめ

Claude DesignとFigma Connectorの間に、ファイルを自動でやり取りする連携はありません。Claude Designの書き出し先9社にFigmaは入っておらず、Figma Connectorの説明・機能・ツール一覧にもClaude Designへの言及はありません。ただし画面キャプチャやファイルを参考資料として持ち込む経路や、Claude Code上で両方のMCPを併用する道は残っています。コード生成用のFigma Connectorに限れば、Figmaのデザインをコードに変換する入力側のツールです。Claude Designは、ゼロからデザインを起こして他ツールへ送り出す起点側のツールです。この軸で見ると、両者は逆方向の役割分担です。すでにFigma資産があるならFigma Connector、ゼロから起こすならClaude Design、案出しから絞り込みまで両方使うなら参考資料経由での受け渡しを挟む、という切り分けが実務上の目安になります。