Figma for VS Codeは、VS Codeの中でデザインを開き、寸法・コード候補・アセット・コメントを確認する公式拡張機能です。利用には有料プランのFull席またはDev席が必要です。 AIエージェントをFigmaへ接続するMCPとは、設定も役割も異なります。
この記事では、公式拡張の導入、デザインを開く方法、実装時の使い方と接続できない場合の確認順を説明します。2026年10月3日に確認した公式資料に基づき、拡張機能のインストールや実接続を再現した結果は含みません。Figma公式ガイド
公式拡張・MCP・Code Connectの違い
| 機能 | 主な用途 | 最初に設定するもの |
|---|---|---|
| Figma for VS Code | エディター内でデザインを見て実装する | 公式拡張とFigmaへのログイン |
| Figma MCP | AIクライアントにデザイン情報・対応するツールを提供する | MCPサーバーとクライアント認証 |
| Code Connect | Figmaコンポーネントと実装コードを対応付ける | UIのマッピング、またはCLIの接続定義 |
公式拡張を入れたことだけでは、AIエージェントのMCP接続は完了しません。AIからフレームを参照したい場合はMCPの設定方法、実装コンポーネントの対応を整えたい場合はCode Connectへ進んでください。
利用条件を確認する
拡張機能自体の入手と、Dev Modeを利用できる席は別です。Figma公式の利用条件は有料プランのFull・Dev席です。対象ファイルの閲覧権限も必要なので、拡張へのログインだけで非共有ファイルが開けるようにはなりません。
デザインの編集まで担当する人と、検査・実装を担当する人では必要な席が異なります。席の比較とDev Modeの使い方で作業範囲を確認できます。
Figma公式拡張をインストールする
- VS CodeのExtensionsを開き、Figma for VS Codeを検索します。
- 発行元がFigmaであることを確認し、公式拡張をインストールします。
- アクティビティーバーのFigmaを開きます。
- 初回の案内からFigmaアカウントへログインします。
- Filesから、権限のあるデザインファイルを選びます。
公式拡張の識別子はfigma.figma-vscode-extensionです。名前の似た拡張と取り違えないよう、公式Marketplaceページも確認してください。
FigmaのDev ModeからVS Codeで開く
ブラウザーやデスクトップ版で見ているフレームを開きたい場合は、Dev ModeのInspectから移動できます。
- FigmaでDev Modeへ切り替えます。
- Code settings、またはInspectのCodeで、優先する言語をCSSにします。
- 対象のトップレベルフレームを選びます。
- InspectのOptionsからOpen in VS Codeを選びます。
メニューが見つからない場合は、まずDev ModeとCSS設定、フレームの選択を確認します。拡張機能を再インストールする前に、対象ファイルへの権限とログイン先のアカウントを確認すると原因を分けられます。
デザインを確認しながら実装する
フレームを絞ってコード候補を見る
ファイルを開くと、ページ・セクション・ステータスなどでフレームを探せます。大きなファイルでは、実装対象のフレームに絞って確認します。レイヤーを選び、Codeタブで言語と単位を指定して、寸法・色・余白などの候補を参照します。
補完やコード候補は実装の材料です。レスポンシブ時の振る舞い、データの状態、アクセシビリティーまで完成した画面コードとして扱わず、プロジェクトのコンポーネントやCSSへ合わせて調整します。
アセットとコメントを確認する
Assetsから書き出し対象を確認し、必要な画像を取得できます。倍率やSVGの条件はFigmaの書き出しを参照してください。コメント・更新通知も確認し、古いフレームを元に実装していないかを見ます。
Dev resourcesから実装先へ移動する
Dev resourcesは、レイヤーにGitHub・Storybookなどの参照リンクを付ける機能です。リンクが対応するローカルコードファイルなら、開いているリポジトリからファイルを探して移動できます。メインコンポーネントの参照はインスタンスへ継承されますが、インスタンスへ直接追加した参照はそのインスタンスのものです。Dev resourcesの仕様
Dev resourcesのリンクと、Code Connectのプロパティ対応は別です。リンクを追加しただけで、バリアントごとの実装コードが定義されるわけではありません。
開けない・表示されない場合
| 状況 | 確認すること |
|---|---|
| ファイルが一覧にない | ログインしたアカウント、共有権限、対象チーム・ファイル |
| Dev Mode機能が使えない | 有料プランとFull・Dev席、対象ファイルへのアクセス |
| Open in VS Codeがない | Dev Mode、CSSの優先言語、トップレベルフレームの選択 |
| コードファイルへ移動しない | Dev resourcesのリンク先と、ローカルで開いているリポジトリ |
| AIがFigmaを参照できない | MCPを設定したか。拡張機能のログインとは別に確認 |
ログイン先を切り替える場合は、VS CodeのコマンドパレットでFigma: Log outを実行してからログインし直します。導入条件、ファイル権限、機能ごとの設定を分けて確認してください。