《綿貫佳祐のFigma思考ラボ｜Vol.6》Claude × Figma連携が切り開くデザインワークフローの新しい形。現実的な使いどころは？

Web制作に携わる人にとって、いまや日々の業務に欠かせない存在となったコラボレーションプラットフォーム「Figma」。一方で、「もっと使いこなしたい」「ほかの人はどう活用しているのだろう」と感じている方も多いのではないでしょうか。

本連載では、Figmaの使い方や、Figmaを軸にしたワークフローを紹介します。ただし、単なる機能解説ではありません。各機能をどう捉え、どんな思考で使いこなしていくのか–––––その“思考”に焦点を当ててお届けします。ときには1人のUIデザイナーとして、ときにはチームの一員として、私がどのようにFigmaと向き合っているのかを共有していきます。

第6回は、今話題になっている「Claude × Figma連携」にフォーカス。新機能をレビューしながら、デザインワークフローの新しい形を模索していきます。

はじめに：AIとデザインツールの距離がまた一歩縮まった

2026年1月から2月にかけて、FigmaとClaudeの連携が大きく進みました。

1つ目は、Claudeとの対話からFigJamダイアグラムを直接生成できる機能です。テキストのプロンプトだけでなく、PDFや画像からも、フローチャートやガントチャートなどの構造的なダイアグラムをFigJam上に作り出せるようになりました。

2つ目は、コードで描画されたUIを、Claude Codeを通じてFigma上の編集可能なデータに変換する「Claude Code to Figma」の機能です。

これまでもFigmaはAIとの連携を進めてきていましたが、今回の連携はこれまでとは少し毛色が違います。新しいのは、Figma上にAI機能が追加されるのではなく、外部のAIサービスとFigmaが双方向的につながるという点です。

この記事では、それぞれの機能がどういったもので、実際に使ってみてどのようなことがわかったのかを整理します。

FigJamダイアグラム生成

何ができるようになったのか？

ClaudeのFigmaコネクターを有効にすると、Claudeとの会話からFigJamファイルを直接生成できるようになります。
フローチャートやガントチャートなど、FigJamがサポートしている形式のダイアグラムであれば問題なく作成できます。

入力として使えるのはテキストだけではありません。PDFや画像、スクリーンショットをアップロードして、その内容を解析した上でダイアグラム化することもできます。

たとえば、プロダクト要求仕様書をアップロードして「ここからユーザーフローを作って」と伝えれば、コピー&ペーストなしでFigJam上にフロー図が作成されます。

使うための準備

設定手順としては、Claudeの設定画面からFigmaコネクターをオンにするだけです。認証フローを経てFigmaアカウントと接続すれば、すぐに使い始められます。

実際の操作フロー

1. Claudeとの会話の中で、ダイアグラムを作りたい内容を伝える
2. Claudeがダイアグラムを生成し、プレビューが会話内に表示される
3. 追加のプロンプトで内容や見た目を調整できる（色の変更、レイアウトの調整など）
4. 「Edit in Figma」を選択すると、FigJam上で編集可能なファイルとして開ける
5. ファイルを自分のチームやドラフトに保存して、そこからさらに手作業で調整可能

なお複数のチームに所属している場合は、どのチームに保存するかを選択できます。

FigJamダイアグラム生成を使ってみてわかったこと

プロンプトの書き方で精度が変わる

実際に試してみると、プロンプトの書き方によって生成結果の品質に差が出ました。 いくつかのポイントを挙げてみます。

• 明示的にFigJamやFigmaに言及する
  • Claudeは文脈からダイアグラムが有用かどうかを判断してくれますが、「FigJamでフローチャートを作って」のように明示的に伝えたほうが確実
• シンプルなプロンプトから始める
  • 最初から複雑な指示を出すよりも、まずはシンプルに全体像を生成させて、その後分岐や条件を調整していくほうが良い結果になりやすい
• 図の種類を指定する
  • 「ダイアグラムを作って」だけでなく、「シーケンス図で」「意思決定ツリーとして」のように図の種類を指定すると、目的に合った構造で出力される

編集のワークフローにおける注意点

便利な機能ですが、注意点もあります。

たとえば一度FigJam上に取り込んだファイルを、再びClaude上で編集してもらうことはできません。編集や修正をClaudeに依頼すると、既存ファイルを更新するのではなく、新規のFigJamファイルとして生成されます。

そのため、実用的なワークフローとして以下のような流れを提案します。

1. Claudeでダイアグラムのたたき台を生成する
2. Claude上でのプロンプトによる調整を何度か行い、方向性を固める
3. FigJamに取り込んで、細かなレイアウトや文言の調整は手作業で仕上げる

「たたき台をAIで素早く作り、仕上げは人間が行う」という分業が、現時点ではもっとも効率的な使い方かと思います。

また、ダイアグラムの用途によっては、MermaidやPlantUMLなどテキストベースの記法を使った方が便利な場面もあります。テキストで記述されたダイアグラムはGitで差分管理ができ、ドキュメントやissueにそのまま埋め込めるなど、FigJamにはない利点があります。

FigJamでの生成が常にベストとは限らないので、用途に応じて使い分けることを意識するとよいでしょう。

Claude Code to Figma

何ができるようになったのか？

Claude Code to Figmaは、コードで描画されたUIを、Claude Codeを通じてFigma上の編集可能なデータに変換する機能です。

コードやデータにも寄りますが、オートレイアウトを適用したフレームに変換され、ある程度の編集しやすさや再利用性もあります。

Claude Code上で「ローカルサーバーを起動してUIをFigmaファイルにキャプチャして」のように自然言語で依頼すると、Claude Codeがキャプチャに必要なスクリプトの注入やブラウザの起動を自動で行います。ブラウザに表示されるツールバーから、画面全体のキャプチャや特定の要素の選択キャプチャが可能です。

使うための準備

Claude Code to Figmaを利用するには、以下の環境が必要です。

• Figma：Fullシート権限
• Claude Code：インストール済みであること
• Figma MCP：追加のうえ、認証が完了していること

Figma MCPが未設定の場合、まずはコマンドラインから以下のコマンドを叩きます。

claude mcp add --transport http figma https://mcp.figma.com/mcp

MCPサーバーを追加した後、Claude Code上で/mcpと入力してFigmaサーバーを選択し、認証を完了させます。
接続状態が緑色で表示されれば準備完了です。もし表示されない場合は、Claude Codeを再起動してみてください。

想定されるワークフロー

Figmaが提示しているワークフローは以下のような流れです。

1. コード上で見た目を構築する
2. Claude Codeに「UIをFigmaに送って」と依頼する
3. Claude Codeがキャプチャスクリプトを注入してブラウザを起動する
4. ブラウザ上のツールバーから「Entire screen」（画面全体）や「Select element」（要素選択）でキャプチャを実行する
5. Figmaに編集可能なデザインデータとして取り込まれる
6. チームがFigma上で注釈を入れたり、バリエーションを検討したりする
7. 更新されたデザインをFigma MCPを通じてClaude Codeに渡し、実装させる

Claude Code to Figmaを使ってみてわかったこと

「双方向」の実態は？

Claude Code to Figmaのコンセプトは「コードとデザインの双方向的なワークフロー」ですが、現時点での実態はもう少し限定的です。

コードからFigmaへの変換は比較的スムーズに行えます。しかし、Figma上で行ったデザインの編集内容をClaude Codeが直接把握できるわけではありません。Figma MCPを通じてデザインを参照することはできますが、それはあくまでFigmaの情報を新たに読み取ってコード化するだけであり、差分を認識して既存のコードに反映するという動きではありません。

つまり、Figma側でデザインを修正してからClaude Codeに戻す際は、実質的にはゼロからのコード生成に近い状態になります。

また、生成されるFigmaデータにはチームで運用しているバリアブルやコンポーネントが適用されません。Code Connectを設定していても同様です。取り込んだデータをそのままデザインシステムの一部として扱うには、手作業での置き換えが必要になります。

現実的な使いどころ

こうした特性を踏まえると、Claude Code to Figmaがもっとも活きるのは、以下のような場面だと思います。

• プロトタイプの共有：Claude Codeで素早く作ったUIをFigmaに取り込んで、非エンジニアのチームメンバーとデザインを議論する
• デザインの比較検討：複数のアプローチをコードで生成し、Figma上に並べてチームで評価する
• 既存UIのデザインリソース化：本番やステージングに既に存在するUIをFigmaに取り込んで、デザインデータの出発点にする

シーン別の活用イメージ

会議やブレインストーミング

会議中にClaudeと対話しながらアイデアをダイアグラム化し、その場でFigJamに取り込んでチームで共有する、といった使い方が考えられます。議事録の代わりに、議論の構造をそのまま図として残せるのは便利です。

ドキュメントからのビジュアル変換

プロダクト要求仕様書や技術仕様書などのドキュメントをClaudeにアップロードし、ユーザーフローやシステムアーキテクチャ図に変換できます。長い文章を読んで理解するよりも、視覚的な図として把握できる方が効率的な場面は多いはずです。

共通認識の形成

エンジニア、デザイナー、PMなど異なるバックグラウンドのメンバーが、同じ図を見ながら議論できるようになります。Claude Codeで作ったUIをFigmaに取り込んでデザイナーがレビューする、といった職種を超えた連携も自然にできます。

まとめ：現時点での評価と今後への期待

Claude × Figmaの連携は、まだ発展途上にある部分も多いですが、デザインワークフローの新しい可能性を感じさせてくれるものです。

今回の内容を整理すると、以下のようになります。

• FigJamダイアグラム生成は、AIとの対話からたたき台を素早く作る用途として実用的
  • ただし、生成後の再編集はClaude上ではなくFigJam上で行う前提で考えるのが良い
• Claude Code to Figmaは、コードで生成したUIをデザインのキャンバスに持ち込むという新しい発想
  • ただし、現時点では「双方向」というにはやや弱い
• どちらの機能も「AIが作った出力を人間がレビュー・改善するワークフロー」が前提になっている

AIによる生成機能は日々進化しています。現時点での制約は今後のアップデートで解消されていく可能性も大いにあるでしょう。重要なのは、こうしたツールの特性を正しく理解した上で、自分たちのワークフローのどこに組み込めば効果的かを考えることではないでしょうか。

文：綿貫佳祐