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

Claude DesignからFigmaへ直接送る手段はあるか

ありません。Claude Designの送り先として公式が名指しするツールに、Figmaは入っていません。一方のFigma Connectorは、Figmaのデザインをコードにするための独立したMCP Connectorで、ページ本文にClaude Designへの言及はありません。

つまり2つは、同じ「デザイン」を扱いながら向きが逆です。Claude Designは新しくデザインを作って外へ送り出し、Figma ConnectorはFigmaにあるデザインをClaudeへ引き込みます。

くらべる

2つの向きの違い

外へ送り出す

Claude Design

会話とキャンバスでデザインを作り、PPTX・PDF・HTML・Claude Code・各種の外部ツールへ出します。

Claudeへ引き込む

Figma Connector

Figma上のフレームやノードを読み、変数・コンポーネント・レイアウトを手がかりにコードを生成します。

送り先の公式リストは2つあり、数が食い違う

「書き出し先はいくつか」に対する答えは、どのページを見るかで変わります。Figmaが入っていない点は、どちらのページでも同じです。

数字

送り先として名指しされる数(ページ別)

• 製品ページのFAQ

  8社

  Adobe・Canva・Gamma・Lovable・Miro・Replit・Vercel・Wix

• ヘルプセンターの一覧

  15件

  Adobe製品は3つに分かれ、HubSpot・Netlify・v0なども載る

• Figma

  0件

  どちらのリストにも出てこない

ヘルプセンターの「Export and share」にある送り先は、Adobe Experience Manager・Adobe for Creativity・Adobe Journey Optimizer・Base44・Canva・Gamma・HubSpot・Hyperframes・Lovable・Miro・Netlify・Replit・v0・Vercel・Wixの15件です。FAQの8社はこの一部を会社名でまとめた形に見えます。FAQの8社にBase44は入っていません。

送り先とは別に、ファイル形式での書き出しもあります。ヘルプセンターに載るのはzipでのダウンロード・PDF・PPTX・スタンドアロンのHTMLと、Google Slides(claude.ai/designのみ)です。Claude Codeへの引き渡しは、ローカルのコーディングエージェントに送る形と、Claude Code Webに送る形の2通りです。

Figma Connectorが実際にできること

説明文の趣旨は、Figmaのコンテキストを取り込み、コードベースとデザイン意図に沿ったコードを生成することです。開発元はFigma自身で、Claude Marketplaceの掲載ページでは「Anthropic 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 Design」と「Make files」です。Make filesは、Figma Makeで作ったファイルを指します。接続手順とコード生成の実際はFigma MCPサーバーの使い方で扱っています。Claude Codeの側から呼び出す場合も、この9種が対象です。

もう一つ見落としやすいのが、インタラクティブConnectorの枠です。ヘルプセンターによると、Figmaは「Review and annotate designs」の用途でこの枠に入っています。同じ枠にはAmplitude・Asana・Box・Canva・Clay・Hex・Slackが並びます。Claudeの会話画面の中でデザインを確認し、注釈を付ける使い方があるので、Figma Connectorはコード生成専用とは言えません。

Figmaのファイルは取り込めるのか — 公式ページ同士の食い違い

製品ページのFAQが挙げる取り込み元は、コードベースとDOCX・PPTX・XLSXです。Figmaの名前はありません。一方で同じ製品ページは、GitHub・デザインファイル・ローカルのコードベースから取り込めるとも書き、デザインシステムのFAQにも「デザインファイル」が出てきます。さらにデザインシステムの設定ガイドには、こう書かれています。「接続したアプリ、アップロードしたファイル、Figmaファイル、スライド、ロゴ、フォントからデザインシステムを作るようClaudeに頼める」という趣旨です。

この一文は、デザインシステムを作る文脈でFigmaファイルが素材になりうることを示しています。ただし手段までは書かれていません。Figma Connectorを経由するのか、書き出したファイルを渡すのかは、ページから読み取れません。設定ガイドは、ブランド設計向きの使い方だとも述べています。フォント・色・ガイドラインを持つブランドデザインシステムに向く、という位置づけです。

プロジェクト単位の取り込みも見ておく価値があります。始め方のガイドは、既存デザインのスクリーンショットや、真似たいスライド・文書を添付できると説明しています。コードリポジトリのリンクに加えて、既存のプロダクトデザインを複数の方法でアップロードできるとも書かれています。

まとめると、Figmaの名前が出る箇所と出ない箇所が公式内で分かれています。「Figmaは一切取り込めない」と断言する根拠は、現行のページにはありません。「Figma専用の取り込みボタンがある」と断言する根拠もありません。

手順

Figma資産を手元に持つときの判断の流れ

1. 1

   Claude Designに寄せる場合は素材を渡す

   画面キャプチャや書き出したファイルを参考資料として添付するか、デザインシステムの素材としてFigmaファイルを渡せるかをClaudeに尋ねます。

2. 2

   Figmaへ戻すときは書き出しと再作成を挟む

   Claude DesignからFigmaへ送る経路はないため、採用案をFigmaへ持ち込むには、書き出したものを見ながらFigmaで作り直す手間が入ります。

なぜFigmaは送り先に入っていないのか

公式ページに理由の説明はありません。以下は送り先の顔ぶれからの読み取りです。

Adobe・Canva・Gammaは、仕上げと配布の受け皿です。Base44・Lovable・Replit・Netlify・v0・Vercel・Wixは、生成したものをアプリやサイトとして動かす先にあたります。Miroはチームの合意形成に使うキャンバスです。Figmaだけは、Claude Designと同じく「デザインが最初に作られ、保存される場所」に当たります。出力を受け取る側と、作業の起点になる側は、役割が違います。

製品ページの導線も、この見方と噛み合います。冒頭のコピーは「説明すると最初の版を作り、絞り込み、共有し、普段使いのツールへ引き渡す」という流れです。原文はツールを名指ししていません。普段使いのツールがFigmaなら、その引き渡しは自動ではなく、人が書き出しと再作成を挟みます。

状況別の使い分け

Figmaでデザインが既にあり、コードにしたいなら、Figma Connectorの出番です。ClaudeまたはClaude Codeからフレームやノードを指定すれば、既存の変数やコンポーネントに沿ったコードが得られます。

まだ何も作っていない段階で、Claudeと対話しながらデザインを起こしたいなら、Claude Designです。完成後にCanvaやMiro、Adobeへ送る流れは、Claude Canva Connectorの使い方やClaude Miro Connectorの使い方で個別に確認できます。基本操作はClaude Designの使い方にあります。

Figmaを編集の主戦場にするチームは、案出しにClaude Design、仕上げにFigmaという二段の運用が現実的です。コードとデザインの往復まで含めるなら、Cowork Figma連携でコードとデザインを往復させる手順が具体的なワークフローを扱っています。

Claude Codeのコマンドを取り違えやすい

Claude Code側には、Claude Designに関わるコマンドが3つあります。名前が似ていますが、役割が違います。コマンドリファレンスの記述は次のとおりです。

/design-syncは、Claude Designのデザインシステムを手元に取り込むコマンドではありません。リポジトリ側から見た場合、コードの部品をClaude Designへ送る向きです。初回の同期は全コンポーネントを検証するため、大きなリポジトリでは数時間かかることがあるとされています。ヘルプセンターは/designについて、デザインをコードベースへ取り込む使い方にも触れています。

/designはClaude Code v2.1.265以降が必要で、アーティファクトが使えるセッションと、Designテンプレートが有効なアカウントを前提にします。組織がテンプレートを無効にしていれば、下書きは作られません。/designと/design-syncは、Bedrock・Agent Platform・Foundry・Claude Platform on AWS経由では使えません。アートボードの編集はデスクトップのブラウザで行い、各アートボードはPNGかPDFで書き出せます。

Figma MCPは、これらのコマンドとは別系統の接続です。

Figmaとの往復で当たりやすいClaude Designの制約

ヘルプセンターの「Known limitations」には、Figmaと組み合わせる運用で効いてくる項目があります。

• バージョン履歴がまだない: 機能としての履歴はありません。別の方向を試す前に「今の状態を保存して別案を試して」と頼めば、Claudeが現在のプロジェクトを保存し、保存先を示します
• 複数人の同時編集は基本的な水準: 2人以上で同じプロジェクトを同時に触ると、安定して動かないことがあります
• コメントが表示されない場合がある: インラインコメントが画面に出ないことがあり、コメント一覧から見られます
• 取り込みの質は素材次第: 散らかったコードベースや不完全なファイルは、出力にそのまま出ます

iOS・Androidアプリでは、デザインを頼み、Artifactsタブから全画面で見て、編集もできます。共有設定の変更は、WebかデスクトップのClaudeが必要です。

利用量は、Claude Design専用の枠がなくなり、プラン全体の共有枠から引かれます。大きなコードベースや反復の多いプロジェクトは、多くを消費します。

提供範囲と有効化

Claude Designは正式版で、Freeを含む全プランで使えます。Enterpriseは2026年10月15日に既定でオンになり、それ以前は組織のオーナーがOrganization settings > Artifactsで前倒しできます。

製品ページのFAQも、Freeを含む全プランに含まれ、Enterpriseは10月15日に既定でオンになると書いています。ただしHIPAAを有効にしている組織は、既定オンの対象外です。組織で使えない場合は、Organization settingsの設定を確認してください。

利用できる入口は、会話中、Artifactsタブ、Claude Code、claude.ai/designのスタンドアロン版です。スタンドアロン版は独立した設定を持ちます。

Enterpriseの管理者は、デザインシステムの公開・組織の既定への設定・削除を、特定のユーザーに限定できます。この制御はカスタムロールで行い、Claude Designの利用そのものを段階的に広げる際にも使えます。

まとめ

Figmaは、Claude Designの送り先にも、公式が挙げる連携先の一覧にも入っていません。両者をつなぐのは人の手です。Figmaを編集の主戦場にするなら、Claude Designで出した案をFigmaへ戻す際に、書き出しと再作成の手間を見込んでおく必要があります。デザインシステムの素材としてFigmaファイルを渡せるかは、設定ガイドの一文に頼るしかない状態なので、自分の組織のプランと画面で試すのが確実です。