【結論】解決策 / 実行コマンド
Claude CodeとFigmaは、Figma公式MCPサーバーを通じて連携できます。
Remote MCPは幅広いプランで利用でき、Desktop MCPは対応する有料席でローカルFigma Desktopと接続します。
単なるCSSコピーより、コンポーネント、変数、Auto Layout、Code Connectを含む構造化データを取得できます。
# ターミナルで実行：Claude CodeのMCP管理方法を確認
claude mcp --help
# ターミナルで実行：登録済みMCPを確認
claude mcp list
# ターミナルで実行：Figma公式手順でRemote MCPを追加
# 実際のURLと認証方式はFigma公式セットアップ画面から取得具体的な手順・設定方法
Figma公式のClaude Code向け手順でRemoteまたはDesktop MCPを登録します。
対象フレームのURLやnode-idを指定し、読み込み範囲を限定します。
既存コンポーネントがある場合はCode Connectやコードベースの実装を優先させます。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
Figma MCPで指定フレームのレイアウト、変数、タイポグラフィ、コンポーネント参照を取得してください。
既存のsrc/componentsとdesign tokensを確認し、再利用可能なものを優先してください。
最初に実装計画を示し、承認後にReactコンポーネントを作成してください。注意点・よくあるエラーと対処法
存在未確認の@modelcontextprotocol/server-figmaを公式パッケージとして断定しないでください。
Personal Access TokenをJSONへ平文保存せず、Figma公式のOAuthまたは秘密管理を利用してください。
大きなFigmaファイル全体を一度に読むと遅延やコンテキスト増大を招くため、対象ノードを限定してください。