figma-local-bridge: Skill for Claude Code

TalkToFigma デザイン生成スキル

TalkToFigma MCP は Figma Plugin API を WebSocket 経由で叩く。ツールは薄いラッパーなので、 呼び出し順序と Plugin API の制約を知っているかどうかが成果物の品質を決める。

0. 接続（毎回最初に）

1. join_channel でプラグインUIのチャンネル名に接続する。デフォルトは figma-local-bridge（プラグインUIのConnectionタブで変更・永続化できる）。既定値と異なる名前を使っている場合はタスク指示に含まれる。
2. 接続確認のために get_document_info 等の全体read系を呼ばない（トークン浪費）。join成功メッセージで十分。
3. 注意: プラグインのウィンドウが閉じられると即切断される。しかも join_channel はプラグイン不在でも成功する（サーバーがチャンネルを作るだけ）ため、切断に気づけない。ツール呼び出しがタイムアウトしたら、リトライを重ねる前に「プラグインウィンドウが開いているか・チャンネル名が一致しているか」の確認をユーザーに依頼する。
   • プラグインはアクティブタブでしか通信できない。対象ファイルのタブが背面に回る（別タブ・別アプリへ切替）と通信は止まる。作業ウィンドウの確保（対象タブを前面に保つ時間帯）を段取りに織り込む。
   • 接続確認はログでなく TCP 実体で行う。リレーログの「join / broadcast 成功」は自分のクライアント（MCP・診断プローブ）を peer として数えるため誤検出する。lsof -nP -iTCP:3055 でプラグイン由来の接続（プロセス名・ポート）が実在するかを確認するのが唯一確実。
4. 書き込み前に get_document_info でページ名（対象ファイルの識別子）を確認してから着手する。複数エージェントで並行作業する場合は、座標バンドを事前に割り当てて衝突を防ぐ。ただしメッセージ到着順序は前後し得るため、重複作成の防止は「作業前のページ実態照合（トップレベル名の突き合わせ）」で担保する。
   • 複製ファイルは node ID を継承するため、node ID の一致はファイル同一性の証拠にならない。ファイル識別は「ページ名＋内容の照合」で行う（get_document_info はファイル名を返せない）。

0.5 運用標準（キャンバス設計）

1. 新規デザインは Figma の「ドラフト」に作成する（左上ロゴ → ファイル → 新規デザイン）。既存ファイルに相乗りしない。
2. コンポーネントのマスターは専用の「Components」ページに置く。無料プランは1ファイル3ページ制限があるため、ページ構成は3枚以内で計画する（例: Cover+Screens / Components / 予備）。
3. デザインカンプの標準フレームは モバイル 375×667 / デスクトップ 1366×768（幅は厳守。fullPage カンプでは高さのみコンテンツに従って拡張してよい）。
4. キャンバスの並び順は「モバイル各ページ → デスクトップ各ページ」。
5. フレーム間の間隔は 100px で統一する。

1. ビルドの基本形（Auto Layout ファースト）

絶対座標で並べると後の修正が全滅する。すべてのコンテナは Auto Layout フレームにする。

推奨ビルド順序

1. ルートフレームを create_frame で作成。この時点で layout 系パラメータを同時に指定する （layoutMode / padding* / itemSpacing / primaryAxisAlignItems / counterAxisAlignItems）。 後から set_layout_mode → set_padding → … と分けるより呼び出し回数が半分以下になる。
   • padding の暗黙既定値に注意（必須）: create_frame / create_component は padding 4辺の既定値が 10 であり、layoutMode を指定して padding を省略すると全辺 10px が黙って入る（「未指定＝0」ではない）。Auto Layout を指定する呼び出しでは padding 4辺と itemSpacing を必ず明示する（0 にしたい時も 0 を書く）。blog-cms では省略箇所28件に謎の10pxが混入した実績がある。
2. 子フレーム・テキストは必ず parentId を指定して親に直接生やす（後からの move_node は座標系がズレやすい）。
3. 子を親に入れた後に set_layout_sizing で FILL を当てる。