Cowork Figma連携でコードとデザインを往復させる手順

Cowork Figma連携は、コードとデザインを一方通行ではなく往復させるための接続です。本番コードの画面をFigmaの編集可能なレイヤーとして送り、そこで直した内容をコードへ戻して実装します。

先に結論を書くと、この往復の仕組みはFigma側のMCPサーバーが持っています。Coworkのコネクタはその入口で、Figmaの公式ドキュメントと突き合わせないと分からない条件がいくつもあります。必要な席の種類、使えるクライアント、書き込みの制限は、Claude側のコネクタ紹介ページには出てきません。

Claude CodeからFigmaを使う技術的な接続手順(リモートとデスクトップのサーバーの違い、ツール一覧、レート制限)は、Figma MCPサーバーの使い方が扱っています。この記事は、往復を実際に回すときの判断と、止まったときの切り分けに絞ります。

どこから往復を始めるか

往復には起点が2つあり、最初に決めるのは「どちらが正のソースか」です。同じ画面をコードとFigmaの両方で直し始めると、後から差分を突き合わせる作業が発生します。

どちらから始めても、最後はもう一方に戻ります。Figmaのドキュメントは、この流れを「コードから描画したUI、キャンバスでの合意、コードへの実装」と説明しています。

接続前に確認すること

接続はチャット下部の「+」メニューか、「Customize > Connectors」から行います。この接続はチャットとCoworkで共通で、一度つなげば両方の画面から同じFigmaコネクタを呼び出せます。CoworkはPro・Max・Team・Enterpriseの有料プランが前提で、Freeプランでは使えません。

書き込みを伴うツールは、承認の設定にも左右されます。Coworkには、コネクタの操作の前に許可を求めるかを決める3つのモードがあり、新しい体験ではメッセージ欄の設定がAutoとManual(既定)の2つになります。組織が書き込み系のコネクタツールにタスクごとの承認を求める場合もあります。

Claudeのコネクタ紹介ページで確認できるFigmaコネクタの基本情報は次のとおりです。

• サインインが必須で、コネクタのURLは https://mcp.figma.com/mcp
• 掲載カテゴリは「Creative」、追加は2025年11月、Figma自身が提供元
• ツールは generate_diagram get_design_context get_screenshot get_metadata create_design_system_rules get_variable_defs get_code_connect_map get_figjam whoami の9つ

ここで気づくのは、紹介ページのツール一覧に、デザインの書き込みに使う use_figma とコードの取り込みに使う generate_figma_design が載っていないことです。Figmaのドキュメントはこの2つをリモートサーバーの機能として説明しています。Coworkのコネクタ経由でそれらが呼べるかどうかは、確認できた公式ページには書かれていません。送り込む機能が使えるかは、実際に指示を出して試す必要があります。

紹介ページには別の制限もあります。get_screenshot は、ClaudeとClaude Codeから呼ぶとFigma上のスクリーンショットの説明文を返す扱いで、画像そのものは返りません。デザインを見た目で比較させる作業は、この制限を踏まえて組み立てます。

席の種類で書き込みの可否が変わる

Figmaの席の種類は、往復の途中で最も詰まりやすい条件です。

往復の前半(コードからFigmaへ)で他人のファイルへ直接取り込めるかは、取り込みを実行する人自身の席と権限で決まります。Full席とそのファイルの編集権限が要ります。どの席でも自分の下書きになら取り込めるので、エンジニアが下書きへ取り込み、そこからリンクを共有する形なら席の制約を避けられます。

View席やCollab席もMCPサーバーを使えますが、呼び出しはStarterで月20回まで、それ以外は月6回までで、書き込みもできません。

本番コードをFigmaの編集可能レイヤーへ送る

コードからデザインへの変換は、code-to-canvasの公式例を日本語にすると次のような指示になります。

アプリのローカルサーバーを起動して、UIをこのFigmaファイル(<URL>)に
取り込んでください。

出てくるのは画像ではなく、Figmaの標準のデザインレイヤーです。デザイナーはそこから通常の作業として、並べ替え、複製、文言の調整、注釈ができます。

Figmaのドキュメントが説明するコードの取り込み(generate_figma_design)の動きは、次の順になります。

取り込み先のファイルにライブラリがあり、変数が定義されていれば、色・数値・文字列の変数が互換性のあるプロパティへ自動で結び付けられます。自社の変数を使いたいなら、取り込みの前にそのライブラリをファイルへ追加しておきます。

同じ会話の中で複数画面を取り込むときは、2回目以降「同じファイルにチェックアウト画面も取り込んで」と短く頼めば、クライアントが取り込み先を引き継ぐのが普通だと書かれています。実在のWebアプリやサイトを取り込むなら、Playwrightのようなツールでスクリプトを差し込む方法が紹介されています。ローカルのUIでは不要です。

Figmaのデザインをコードに実装する

逆方向は、Figma上で選んだコンポーネントをコードに落とす指示です。

選択したFigmaコンポーネントを、このコードベースの規約とアノテーションに
従ってReactコードとして実装してください。

ここで効くのがCode Connect(Figmaのコンポーネントとコードベースのコンポーネントを紐付ける仕組み)です。Figmaのドキュメントによると、Code Connectで接続済みのコンポーネントを含むフレームを処理するとき、MCPサーバーは <CodeConnectSnippet> というラッパーをコンテキストに差し込みます。中身は次の4つです。

• コンポーネントの現在のプロパティ値(バリアント、真偽値、テキスト)
• インポート文
• 使い方のコードスニペット
• Code Connectに登録したカスタム指示

紐付けが無いコンポーネントにはこの情報が付かず、モデルが見た目から部品を選ぶ部分が増えます。既存コンポーネントの再利用がぶれやすいのは、この差が一因です。

ラッパーの中身は、Code ConnectをCLIで対応付けたか、UIで対応付けたかで変わります。UIの場合は、既定では完全なコードスニペットを含みません。

つまずいたときの切り分け

往復が止まったときは、Figmaの席、サーバーの設定、ツールの制限から順に確かめます。症状から原因をたどると次のとおりです。

取り込みや書き込みのツールが見つからない

Figmaのドキュメントが最も多い原因として挙げているのが、デスクトップサーバーの設定が残っているケースです。Figmaのデスクトップアプリは、起動している間 http://127.0.0.1:3845/mcp でローカルのサーバーを自動で立ち上げます。同じ名前に近いツールを持つ2つのサーバーが並ぶと、クライアントが古い方に呼び出しを振り分け、リモート限定のツールが読み込まれません。

Claude Codeなら、設定済みのサーバーを一覧にして確認できます。

claude mcp list

127.0.0.1:3845 を指す項目がリモートの項目と並んでいたら、公式の案内に従って次のコマンドで外します。

claude mcp remove figma-desktop

そのあとクライアントを再起動します。この手順はClaude Codeで直接つないでいる場合の話で、Coworkのコネクタ経由の接続には当てはまりません。

書き込みが途中で切れる、画像が入らない

use_figma には、公式が明記している制限があります。

• 1回の呼び出しの出力は20KBまで
• 画像・動画を含むコンポーネントの取り込みや、GIFの作成は未対応
• カスタムフォントは未対応
• Code Connectを完了させるには、コンポーネントを先に手動で公開する必要がある

大きな変更は、まずファイルの構造を確認し、変数、コンポーネント、レイアウトと小さな単位に分けて進めるよう案内されています。一度に画面全体を作らせるより、1回ごとに検証しながら進めるほうが安定します。

レイヤー名が既定のままになる、コンポーネントが再利用されない

繰り返す要素がコンポーネント化されておらず、色や間隔に変数が当たっていないファイルでは、送り返されるレイヤーもコードの出力も揃った形になりません。往復の前にFigma側のコンポーネントと変数を整えておくと、出力が安定します。コード側では、プロジェクトのルールファイル(Claude Codeなら CLAUDE.md)が出力の質を左右します。

往復のたびにファイルを開き直している

デスクトップサーバーはFigmaのデスクトップアプリが起動している間だけ動き、選択中のレイヤーを渡す使い方では対象ファイルを開いておく必要があります。リモートサーバーはデスクトップアプリを必要とせず、公式ももっとも機能が広いのはリモートだと説明しています。往復を繰り返す運用なら、リモート側に寄せるのが前提です。

デザインシステムを土台に作らせる

Figmaのドキュメントは、デザインシステムはこの書き込みの流れと相性が良いと説明しています。コードベースからコンポーネントと変数を作らせ、既存ファイルとのずれを確認させる指示は、たとえば次のように書けます(この文面自体は公式の例ではありません)。

このコードベースのコンポーネントからFigmaのコンポーネントと変数を生成し、
既存のFigmaファイルとの間にずれがないか監査してください。

別々に育ったデザインシステムでは、どちらが正かを先に決める必要があります。この種の指示は、両者の差分を洗い出す入口になります。Figmaのドキュメントは、コンポーネントの定義、変数、命名規則が整っていれば、エージェントがそれを土台に作れると説明しています。整っていないファイルの監査は、差分の列挙より先に整備の話になります。

FigJamの図解とFigma Slidesのデック作成

画面のデザイン以外にも対応します。文章で説明したシステム構成を、FigJamのフローチャートに変換する使い方が公式に例示されています。

このシステムアーキテクチャの説明をFigJamのフローチャートにしてください。

Claudeのコネクタ紹介ページでは、フローチャートやガントチャートなどの図をFigJamに作れると書かれ、対応するツールは generate_diagram です。Figmaのドキュメントでは、use_figma が(figma-use-slidesスキルと併用して)Figma Slidesのデックを作成・編集できると説明されています。ただし紹介ページのツール一覧に use_figma は無く、Coworkのコネクタ経由で動くかは確認できていません。図解とスライドは、接続して実際に試してから使う判断になります。

往復を運用に載せるときの注意

デザイナーとエンジニアが別々の入口(Figma上の編集、Claude Codeでの実装)から同じ往復に参加する運用になります。冒頭で決めた「正のソース」を、チームの合意として残しておくと競合しにくくなります。

CoworkとClaude Codeは同じエージェント基盤を使いながら、対象ユーザーと実行環境が異なります。どちらの画面で往復を進めるかはCoworkとClaude Codeの違いの使い分け早見表が参考になります。

Coworkのコネクタ全体の仕組みはClaude CoworkのConnectors一覧に、書き込み系コネクタの運用例はCowork Dropbox連携にあります。

よくある質問

Claude Code単体でも同じことはできますか

基盤は共通で、Claude Codeは取り込み・書き込みの両方の対応クライアントに載っています。設定はCLIから行い、手順はFigma MCPサーバーの使い方にあります。Coworkのコネクタは、その設定をチャット画面上の接続作業で済ませられる点が違いです。

Claude Desktopからも書き込めますか

書き込み(use_figma)の対応クライアントにはClaude Desktopが載っています。一方、コードの取り込み(generate_figma_design)の対応クライアントの一覧にはClaude Desktopが入っておらず、Claude Codeが載っています。コードをFigmaへ送る前半は、Claude Codeで行う前提で組むと確実です。

まとめ

Cowork Figma連携を使うかどうかは、コードの取り込みをCoworkのコネクタに任せるか、Claude Codeで直接つなぐかで決まります。公式ページ同士でツールの一覧が一致しない部分があるので、送り込みの機能は小さく試してから運用に載せると安全です。席の種類とライブラリの整備が、往復の成否を分けます。