【結論】Figma公式MCPと連携する
Figma連携はFigma公式MCP serverを使うのが現行の推奨です。
Claude CodeではFigma pluginまたはRemote serverを認証し、選択Node、Design Token、Component mappingを取得します。
Personal Access Tokenを設定Fileへ直書きせず、OAuthまたはSecret管理を使います。
# Claude Code起動後に実行：Figma pluginを追加
/plugin marketplace add figma/figma-mcp
# Claude Code起動後に実行：Figma pluginを導入
/plugin install figma@figma-mcp
# ターミナルで実行：MCP接続を確認
claude mcp list
# 起動後のセッション内で実行：MCP状態を確認
/mcp具体的な手順・設定方法
Figma側で対象FileとNodeを選び、必要最小限のAccessを認証します。
Code Connectと既存Component libraryのmappingを確認します。
生成CodeをDesign Token、Responsive、a11y、Testへ照合します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
Figmaの選択Nodeだけを読み取り、Layout、Typography、Color token、Component対応を報告してください。
既存src/componentsを再利用する案を優先してください。
File編集、Asset upload、Figma canvas変更は行わないでください。注意点・よくあるエラーと対処法
巨大なPage全体を取得するとToken limitやTimeoutの原因になります。
Figmaの見た目だけでBusiness logicやAccessibilityは確定できません。
MCPのWrite toolやAsset uploadは明示承認後に限定します。