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へ進んでください。
あなたはどっち？利用環境に合わせた最適プラン判定フロー
導入から実装までの流れを、先に確認しておきます。内容は、このページの説明にもとづく目安です。ページは、2026年10月3日に確認した公式資料に基づいており、拡張機能のインストールや実接続を再現した結果は含みません。席や機能の条件は変わることがあるため、Figmaの公式ガイドで最新の内容を確認してください。
- まず、利用条件を確認する。ページでは、利用には有料プランのFull席またはDev席が必要と説明している。対象ファイルの閲覧権限も必要。
- VS CodeのExtensionsで、Figma for VS Codeを検索し、発行元がFigmaであることを確認してインストールする。
- アクティビティーバーのFigmaを開き、Figmaアカウントにログインして、Filesから権限のあるデザインファイルを選ぶ。
- ブラウザーやデスクトップ版で見ているフレームを開きたい場合は、FigmaのDev Modeに切り替え、対象のトップレベルフレームを選び、InspectのOptionsから「Open in VS Code」を選ぶ。
- 実装対象のフレームに絞って、Codeタブで言語と単位を指定し、寸法・色・余白などのコード候補を参照する。候補は材料として扱い、プロジェクトのコンポーネントやCSSに合わせて調整する。
- 開けない・表示されない場合は、Dev ModeとCSS設定、フレームの選択、対象ファイルへの権限、ログイン先のアカウントの順に確認する。
AIエージェントからフレームを参照したい場合は、この拡張機能とは別に、MCPの設定が必要です。
利用条件を確認する
拡張機能自体の入手と、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を実行してからログインし直します。導入条件、ファイル権限、機能ごとの設定を分けて確認してください。
よくある質問：Figma for VS Codeで迷ったときのチェックリスト
Figma for VS Codeは、無料で使えますか？
ページでは、利用には有料プランのFull席またはDev席が必要と説明しています。拡張機能自体の入手と、Dev Modeを利用できる席は別です。最新の条件は、Figma公式で確認してください。
Figma for VS CodeとMCPは、何が違いますか？
Figma for VS Codeは、エディター内でデザインを見て実装する公式拡張です。MCPは、AIクライアントにデザイン情報を提供する仕組みで、設定も役割も異なります。公式拡張を入れただけでは、AIエージェントのMCP接続は完了しません。
拡張機能にログインすれば、どのファイルも開けますか？
開けません。対象ファイルの閲覧権限も必要です。拡張へのログインだけで、非共有ファイルが開けるようにはなりません。
「Open in VS Code」が見つからないときは？
まず、Dev ModeとCSS設定、フレームの選択を確認します。拡張機能を再インストールする前に、対象ファイルへの権限とログイン先のアカウントを確認すると、原因を分けられます。
表示されたコード候補は、そのまま使えますか？
そのままでは使えません。レスポンシブ時の振る舞い、データの状態、アクセシビリティーまで完成した画面コードとして扱わず、プロジェクトのコンポーネントやCSSへ合わせて調整します。
名前の似た拡張と、取り違えないためには？
発行元がFigmaであることを確認します。ページでは、公式の拡張機能の識別子と、公式Marketplaceページの確認も案内しています。