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

Cowork Figmaコネクタは、コードとデザインを一方通行ではなく往復させる仕組みです。本番コードの画面をFigmaの編集可能なレイヤーとして送り込み、そこで直した内容をClaude Codeに戻して実装する、という双方向のワークフローが公式に用意されています。

Claude CodeからFigmaのデザインを読んでコードを生成する技術的な接続手順(リモート/デスクトップサーバーの選び方、ツール一覧、レート制限)は、Figma MCPサーバー自体を扱う技術ガイドが対応します。同じ技術基盤の上に、Cowork経由の往復ワークフローと、FigJam図解・Figma Slidesの生成というコネクタ固有の機能が乗っています。

Cowork Figma連携とは

Cowork Figmaコネクタのカテゴリは「Design」、対応区分は「Interactive」です。公式の説明は次の4つを軸にしています。

• 本番コードを編集可能なデザインへ変換する
• デザインからコードを生成する
• デザインシステムの構築・保守を任せる
• FigJamの図解を作る

Interactive区分のコネクタは、チャット内にサンドボックス化されたUIを描画して動く仕組みです。決済や送金のような操作はInteractive connectorsでは行えません。この分類の仕組み自体はClaude CoworkのConnectors一覧で扱っています。Figma固有の挙動はこの上で決まります。

接続の準備

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

Team・Enterpriseプランでは、Figmaは組織単位で認可をまとめられる対象にも入っています。Okta経由のCross App Access(XAA)を使ったEnterprise-managed authの提供対象10件(Asana・Atlassian・Canva・Datadog・Figma・Granola・Linear・Notion・Slack・Supabase)の1つで、組織として一度認可すれば、メンバーは初回ログイン時に自動で権限を引き継ぎます。Team・Enterpriseプランで一般提供されています。

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

往復ワークフローの起点は、コード側からデザイン側への変換です。公式が示す指示例は次のようなものです。

このホームページのスクリーンショットを撮って、このFigmaファイルに
デザインシステムのコンポーネントを使ったレイヤーとして/figma-useで
取り込んでください。

出てくるのは画像ではなく、デザインシステムのコンポーネントを使った編集可能なレイヤーです。デザイナーはここから通常のFigma上の作業として調整・コメント・共有ができます。開発側で先に実装した画面を、デザイナーとのレビュー・すり合わせの起点として使いたい場面に向いています。

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

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

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

このときにモデルが参照する情報がCode Connect(Figmaのコンポーネントとコードベースのコンポーネントを紐付ける仕組み)です。紐付けが無いとモデルは推測でコンポーネントを選ぶため、既存コンポーネントの再利用が安定しません。個々のツールが何を返すかまで踏み込みたい場合は、後述のリンク先に技術的な一覧があります。

デザインシステムの構築・監査を任せる

Cowork Figmaコネクタは、コードベースからFigmaのコンポーネントと変数を生成し、既存ファイルとの乖離(drift)を監査する使い方にも対応します。

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

コードとFigma側のデザインシステムが別々に育ってしまい、どちらが正なのか分からなくなる状態は珍しくありません。この監査タスクは、両者の差分を洗い出す入口として使えます。ただしFigma側の実装(コンポーネント化・変数の付与・オートレイアウトの利用)が整っているファイルほど、監査結果の精度も上がります。

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

Figma連携が対応するのは画面のデザインだけではありません。文章で説明したシステム構成を、FigJam上のフローチャートに変換する使い方が公式に例示されています。

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

同様に、レポートの内容からFigma Slidesのプレゼンテーションを作る使い方もあります。「この添付レポートから、リリース後の振り返り用プレゼンテーションをFigma Slidesで作って」のような指示で、テキストベースの情報をスライドの形に変換できます。図解やスライド作成は、Figma MCPサーバーの技術的なセットアップ手順を扱う既存記事では触れていない、コネクタならではの用途です。

往復ワークフローを回すときの注意点

コード→デザイン→コードの往復は、各方向で参照する情報が異なる点に注意が必要です。コードからデザインへ送るときはデザインシステムのコンポーネントが、デザインからコードへ戻すときはCode Connectのマッピングとプロジェクトのルールファイル(Claude CodeならCLAUDE.md)が、それぞれ出力の質を左右します。どちらか一方だけ整備しても、往復の途中で情報が欠け、レイヤー名がFrame1268のような既定名のまま返ってきたり、コンポーネントの再利用が崩れたりします。

デザイナーとエンジニアがそれぞれ別の入口(Figma上の編集、Claude Codeでの実装)から同じ往復に参加する運用になるため、最初にどちらが正のソースかを決めておくと、途中で作業が競合しにくくなります。CoworkとClaude Codeは同じエージェント基盤を使いながら対象ユーザーと実行環境が異なるため、どちらの画面でこの往復を進めるかはCoworkとClaude Codeの違いの使い分け早見表も参考になります。

よくあるつまずき

デザインシステムのコンポーネントが整っていない。繰り返す要素がコンポーネント化されておらず、色・間隔にも変数が当たっていないFigmaファイルでは、送り返されるレイヤーもコードの出力も揃った形になりません。往復を始める前に、Figma側のコンポーネント整備を先に済ませておくほうが結果が安定します。

Interactiveコネクタなので書き込み権限の設定項目が見当たらない。DropboxやMicrosoft 365のような「Read & write」区分のコネクタと違い、FigmaはInteractive区分です。承認モードの扱いも読み取り・書き込みの区別ではなく、コネクタ全体の許可・確認・拒否の3段階で決まります。Dropboxをタスクの保存先・整理役としてそのまま使う具体的な手順はCowork Dropbox連携にまとめています。

往復のたびにFigmaファイルを開き直す必要がある。Figma Desktopアプリのローカルサーバーを使う設定では、対象ファイルをアプリで開いている間しか動きません。Coworkのコネクタ経由であれば、この制約を気にせず進められます。

よくある質問

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

技術的な基盤(Figma MCPサーバー)は共通です。Claude CodeでCLIからclaude mcp addやclaude plugin installで個別に設定すれば、同じツール群を呼び出せます。手順の詳細はFigma MCPサーバーの使い方にまとめています。Coworkのコネクタは、この設定をチャット画面上の接続作業だけで済ませられる点が違いです。

FigJamやFigma Slidesの生成に追加の権限は必要ですか

Interactive区分のコネクタは、接続時に許可した範囲を超える追加の権限を要求しません。決済や送金のような操作はこの区分では行えませんが、FigJamの図解生成やSlidesのデック作成はこの範囲に収まります。

エンタープライズ管理下でFigmaを一括認可できますか

できます。Okta Cross App Access(XAA)によるEnterprise-managed authの対象10サービスにFigmaが含まれています。組織として一度認可すれば、メンバーは初回ログイン時に個別のOAuth手続きなしで権限を引き継ぎます。Team・Enterpriseプランで一般提供されています。

まとめ

Cowork Figma連携の価値は、コードとデザインの往復を1つのコネクタで完結させられる点にあります。本番画面をレイヤーとして送る、Figma側の変更をコードに戻す、デザインシステムの乖離を監査する、FigJamやSlidesで別の成果物に変換する。この4つはどれも同じ接続の上で動き、往復のどちらの方向でもデザインシステム側の整備が結果の質を左右する点は共通しています。技術的な内部動作やツール1つ1つの詳細まで踏み込みたい場合は、前述の技術ガイドが対応します。