結論
最初にやること：OSのターミナルでclaude plugin install figma@claude-plugins-officialを実行します。
Figma MCPは存在しない@modelcontextprotocol/server-figmaやPersonal Access Token直書きではなく、Figma公式リモートMCPを利用します。
Claude Codeでは公式プラグインの導入が推奨され、手動の場合もhttps://mcp.figma.com/mcpへHTTP接続してOAuth認証します。
プラグインにはMCP設定に加え、実装・Code Connect・デザインルール用Skillsが含まれます。
実行場所：OSのターミナルで実行します。
# 推奨: 公式プラグイン
# ターミナルで実行：プラグインを管理
claude plugin install figma@claude-plugins-official
# 手動接続
# ターミナルで実行：MCPサーバーを登録
claude mcp add --transport http figma https://mcp.figma.com/mcp具体的な手順
複数プロジェクトで使う手動接続は--scope userを追加できます。
プラグインまたはHTTP接続を追加し、新しいClaude Codeセッションを開始します。
/mcpでfigmaを選択してAuthenticateを実行し、ブラウザでアクセスを許可します。対象フレームのFigma URLを渡し、既存コンポーネント、変数、アセットを先に調査させます。
実行場所：コメントに従い、ターミナルとClaude Codeの対話画面を使い分けます。
# ターミナルで実行：MCPサーバーを登録
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
# ターミナルで実行：Claude Codeを起動
claude
# セッション内
# Claude Code起動後の対話画面で実行：MCP接続と認証状態を管理
/mcp実践プロンプト
ピクセル完全一致を断定せず、デザイントークンと既存コードの再利用条件を具体的に指定します。
入力場所：Claude Codeの対話画面へ貼り付けます。
Figma MCPで指定URLのLoginButtonフレームを読み取ってください。
色、余白、文字スタイル、Auto Layout、既存コンポーネントとの対応を整理してください。
新規アイコンパッケージを追加せず、既存のdesign systemを再利用してsrc/components/LoginButton.tsxを実装し、差分を提示してください。注意点
アクセス拒否はファイル共有権限、OAuth対象アカウント、組織ポリシーを確認します。
Figma MCPの構造化情報をコードへ変換するのはClaude Code側です。
画像やSVGのlocalhost URLが返る場合は、独自の代替素材を生成せず、Figma側のアセット指示に従います。
ツールが読み込まれない場合は/mcpの状態を確認し、デスクトップ型を使う場合はFigmaアプリで対象ファイルとDev Modeサーバーを有効にします。