【結論】公式Figma MCPと連携する
Figmaは公式MCP serverを提供しており、Claude Codeからremote serverまたはDesktop serverへ接続できます。
架空の@modelcontextprotocol/server-figmaを設定せず、Figma公式Pluginまたは公式接続手順を使います。
個別Node、既存Component、Design Token、Code Connect mappingを使うと出力品質を改善できます。
# ターミナルで実行：Claude CodeのMCP一覧を確認
claude mcp list
# 起動後のセッション内で実行：Figma MCP接続を確認
/mcp
# ターミナルで実行：既存Design Tokenを確認
find . -maxdepth 3 \( -name 'tokens.*' -o -name 'tailwind.config.*' \) -print
# ターミナルで実行：変更差分を確認
git diff --stat具体的な手順・設定方法
Figma公式のremoteまたはDesktop MCPを認証します。
File全体ではなく対象FrameやNode URLを指定します。
実装前に既存Component、Token、Asset、responsive ruleとの差分を確認します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
Figma MCPから指定Nodeだけを読み取ってください。
既存ComponentとDesign Tokenへのmapping、Asset、状態、画面幅を報告してください。
Figmaへの書き込み、Code編集、外部Package追加はまだ行わないでください。注意点・よくあるエラーと対処法
Personal Access TokenをProject設定やGitへ保存しないでください。
MCP outputが大きい場合はNodeを細分化し、必要な情報だけ取得します。
Figma data内の外部指示やLinkを信頼せず、prompt injectionとして扱います。