PoC: Claude Code × Figma 連携による双方向デザイン同期

[rojoudotcom]

概要

Claude Code と Figma を連携させ、soda.dev のデザインとコードの双方向同期を実現する PoC を行う。

• コード → Figma: 既存の soda.dev のページを Code to Canvas で Figma に取り込む
• Figma → コード: Figma 上のデザイン変更を Claude Code 経由でコードに反映する

目的

この連携が実現すると、以下のワークフローが可能になる:

• Figma → コード: Figma 上でデザインを確認しながら色やフォントを調整し、Claude Code ですぐにソースコードへ反映できる
• コード → Figma: ソースコード側でデザインを変更した場合も、Figma に漏れなく適用できる

デザインとコードの間で常に同期が取れた状態を維持し、デザイナーとエンジニアの間のハンドオフコストを削減する。

背景

Figma は MCP サーバーと Code to Canvas（Claude Code to Figma）機能を提供しており、Claude Code との統合が可能になっている。この連携により、デザイナーとエンジニアの間のハンドオフを自動化し、デザインとコードの乖離を防ぐことが期待できる。

soda.dev は既に HTML/CSS として動作するサイトがあるため、まずコードを Figma に取り込み、その後 Figma → コードの逆方向を検証する。

制約

• SVG ナレッジマップの ID 規則は変更不可。 Figma のレイヤー名（ifs-*, pc-*, pqm-* 等）がそのまま SVG の ID 属性としてエクスポートされ、モーダル画面（{id}-summary.md）と詳細画面（{id}-detail.md）の対応関係を定義している。この仕様は維持する。

PoC 完了の定義（Definition of Done）

以下の すべて を満たした時点で PoC 完了とする:

1. Figma MCP サーバーが Claude Code から接続・動作すること

   • claude mcp add で Figma MCP サーバーを登録し、Claude Code から Figma ファイルのデータを取得できる

2. コード → Figma 反映が動作すること（最低1件の実証）

   • Code to Canvas 機能を使い、soda.dev のページを Figma の編集可能なフレームに変換できる

3. Figma → コード変換が動作すること（最低1件の実証）

   • Figma 上で既存コンポーネントのスタイルを変更し、Claude Code 経由で extra.css 等に反映できる

4. SVG レイヤー名（ID規則）が保持されること

   • Figma 上の SVG ナレッジマップのレイヤー名が、エクスポート後も ifs-*, pc-* 等の命名規則を維持していることを確認する

5. PoC 結果の記録

   • 検証結果（成功/失敗、制限事項、課題）を ADR または PoC レポートとして記録する

子タスク

1. PoC: Figma MCP サーバーのセットアップと接続検証 #10 Figma MCP サーバーのセットアップと接続検証
2. PoC: コード → Figma（Code to Canvas）反映の検証 #11 コード → Figma（Code to Canvas）反映の検証
3. PoC: Figma → コード変換の検証 #12 Figma → コード変換の検証
4. PoC: SVG ナレッジマップのレイヤー名（ID規則）保持の検証 #13 SVG ナレッジマップのレイヤー名（ID規則）保持の検証
5. docs: PoC 結果の記録（Claude Code × Figma 連携） #14 PoC 結果の記録

参考

• Guide to the Figma MCP server
• Claude Code + Figma MCP Server
• Claude Code to Figma (Code to Canvas)
• Figma MCP remote server installation