FigmaのMCPを繋いでコーディングするまでの流れ
この記事でわかること
FigmaのMCPを繋いでコーディングするまでの流れ
この記事でわかること
- MCPを繋ぐコマンドは、たった一行
- 繋いだだけでは使えない、認証という一手間
- FigmaのURLから、どの部分を渡せば読んでもらえるか
- 実際にコーディングが始まるまでの流れ
- 接続を解除する方法
前回、Figmaのデザインを渡す方法には「ファイルを直接渡す方法」と「MCPで繋ぐ方法」の2通りがある、という話をしました。今回はそのうちの後者、MCPを使ってコーディングにたどり着くまでの流れだけを、手順として紹介します。
そもそもMCPとは何か
MCPは、AIが外部のサービスと直接やり取りするための共通の窓口です。Figmaも専用のMCPサーバーを公開していて、これに繋ぐと、AI側からFigmaのデザインデータに直接アクセスできるようになります。
ファイルをダウンロードして渡す必要がなく、FigmaのURLを伝えるだけでデザインの中身（座標・色・フォント・テキストなど）を取得できるのが特徴です。
ステップ1：接続先を登録する
まず、AIのツールに「Figmaという名前のMCPサーバーが、このURLにあります」と教える必要があります。ターミナルで次の一行を打つだけです。
claude mcp add --transport http figma https://mcp.figma.com/mcp
これで接続先の登録自体は一瞬で終わります。
ステップ2：認証する
ただし、登録しただけではまだ使えません。この時点で確認すると、こういう状態になっています。
figma: https://mcp.figma.com/mcp (HTTP) - ! Needs authentication
「認証が必要」という表示です。ここでFigmaのアカウントにログインし、「Claude Codeにアクセスを許可しますか」という画面で許可を出す一手間が必要になります。
この認証さえ済めば、次からは自動で繋がった状態が保たれます。毎回ログインし直す必要はありません。
ステップ3：FigmaのURLを渡す
接続ができたら、あとはコーディングしたいFigmaのページを開いて、そのURLをコピーして渡すだけです。
FigmaのURLには、こういう情報が含まれています。
https://www.figma.com/design/【ファイルの識別番号】/ファイル名?node-id=【対象の場所】
このURLの中の「ファイルの識別番号」と「対象の場所」の2つを読み取れば、AI側はどのファイルのどの部分を見ればいいか特定できます。
ここで大事なポイントが一つあります。ファイル全体を指すだけのURL（node-id が付いていないもの）だと、「どこを見ればいいか」が分からず、対象を絞り込めません。ページ内の特定のフレームやセクションを選択した状態でURLをコピーする、つまり node-id まで含んだURLを渡すことが必要です。
ステップ4：デザイン情報を取得する
URLを受け取ると、AI側はそこから座標・サイズ・色・フォント・テキスト・使われている画像などをひとまとめに取得します。
このとき返ってくる情報は、そのままコピーして使える完成コードというより、「参考コード」としての性質が強いものです。実際のプロジェクトで使っている言語や、既存のCSSの書き方・命名ルールに合わせて調整する前提で扱います。
たとえば、すでにあるCSSクラスの命名規則（BEM記法など）に従う、既存のコンポーネントを流用できないか探す、といった作業をこの段階で行います。取得した情報をそのまま当てはめるのではなく、今あるコードの土台に馴染ませる、という意識が仕上がりの質を左右します。
ステップ5：画像・アイコンを正しく扱う
デザインの中に写真やアイコンが含まれている場合、それぞれの画像も一緒に書き出せる状態で渡されます。
ここで注意したいのは、画像は自分で描き直したり、似たようなものに差し替えたりせず、書き出された実物をそのまま使うことです。見た目が近い別の画像に置き換えてしまうと、細かいサイズや余白がずれる原因になります。
ステップ6：接続を解除する
作業が終わったら、接続を解除することもできます。
claude mcp remove figma -s local
このコマンド一つで、今操作しているフォルダだけの接続が消えます。他のプロジェクトやパソコン全体の設定には影響しません。
まとめ
- 接続は
claude mcp addの一行、解除はclaude mcp removeの一行 - 登録しただけでは使えず、Figmaアカウントでの認証が必要
- 渡すURLは、対象の場所（
node-id）まで含んだものにする - 取得したコードは「参考」であり、既存のコードの書き方に合わせて調整する
- 画像やアイコンは書き出された実物をそのまま使う
手順だけを並べると難しそうに見えますが、実際にやることは「一行のコマンドを打つ」「ブラウザでログインを許可する」「URLをコピーして渡す」の3つだけです。仕組みを一度理解してしまえば、次からは迷わず進められます。
