ターミナル不使用！FigmaとClaude Codeの連携方法
この記事では、ターミナルでコマンドを打たない、FigmaとClaude Codeの連携方法について解説します。
プラグインの追加から認証、使い方の例まで記載しているのでぜひ最後までご覧ください！
前提環境
| Claude Code | VS Codeにインストール済み |
| Figma | 有料アカウント |
【Figmaのプランについて】
FigmaのMCPサーバー（連携機能）は無料プランでも使用できますが、呼び出し回数が月6回までに制限されているため、実用的ではありません。
継続的に使う場合は、有料プランの使用がおすすめです！
プラグインを追加する
まずはClaude CodeにFigma用のプラグインを追加します。
1.入力欄で「/」をクリックし、「plugin」と入力する
2.「Marketplace」タブを開き、
anthropics/claude-plugins-official
を入力して「Add」を押す
3.追加に成功すると「Plugins」タブが開くので、検索欄に「figma」と入力する
4.表示されたFigmaプラグインの「Install」ボタンを押す
5.インストール範囲を選択する
「Install」を押すと、インストール範囲の選択肢が出てきますので、使用方法に合わせて選んでください。
基本は「Install for you」が便利でおすすめです！
【おすすめ】 Install for you
自分のアカウント全体で有効。
どのプロジェクトを開いても使える。
Install for this project
今開いているプロジェクトだけで有効。
チームで共有しているフォルダなら、他のメンバーにも共有される。
Install locally
今のプロジェクトだけ＋自分のPCだけで有効。
チームには共有されない。
Figmaと連携（認証）する
プラグインを追加しただけでは、Figmaアカウントとの連携は完了していませんので、次は認証作業を行います。
1.Claude Codeを再起動する（追加したプラグインを反映させるため）
2.入力欄で「/」をクリックし、「mcp」と入力する
3.「MCP servers」をクリックする
4.認証が済んでいない場合は、「Needs Auth」と表示されるので、「Needs Auth」をクリックし、続けて「Authenticate」をクリック
5.ブラウザが立ち上がるので、「同意してアクセスを許可する」をクリックする
【注意】
Figmaで複数アカウントを使っている場合は、許可をする前にログインしているFigmaアカウントが、使用したいアカウントになっているかを確認してください！
6.Claude Codeに戻り、「Connected」と表示されていれば連携完了
使い方の例
Figmaのデザインをコーディングする
1.Figma側でデザインのリンクをコピーする
コード化したいフレームやレイヤーを選び、リンクをコピーします。
コード化したいフレームやレイヤーを右クリック →「コピー/貼り付けオプション」→「選択範囲へのリンクをコピー」
【確認】
コピーしたリンクに ?node-id=… という記述が含まれていればOKです。
これがあることで、Claude Codeがどのフレームを参照すればよいか判別できます。
2.Claude Codeのプロンプトに貼り付けて指示する
入力欄に、やってほしいことと一緒に先ほどFigmaでコピーしたリンクを貼り付けます。
【プロンプト例】
このデザインを実装して： [コピーしたリンク]
3.出力されたものを確認して調整する
まとめ
今回は、ターミナルを使用しないFigmaとClaude Codeの連携方法について解説しました。
Figmaと連携することで、デザインデータをより正確にClaude Codeへ渡せるようになり、コーディングやデザイン確認などの業務効率化につながります。
Claude Codeを積極的に活用するうえで便利な機能になりますので、ぜひ今後の制作に取り入れて活用してみてください！
