14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@albedo_qiita(TechTeam albedoJapan.Inc)inアルビド・ジャパン株式会社

VSCode + Claude Code + Figma MCPで始めるAIコーディング環境構築ガイド

14
Last updated at Posted at 2026-02-24

Figmaのデザインを見ながら手でコードに起こす作業、もう終わりにしませんか？

Claude CodeにFigma MCPサーバーを接続することで、デザインデータを直接AIに渡してコードを生成させることができます。この記事では、VSCodeをベースにしたその環境構築手順を一通り解説します。

この環境でできること

  • FigmaのフレームやコンポーネントをAIに読み込ませて、HTMLやCSS、Vue/Nuxtなどのコードを自動生成
  • デザイントークン（色・タイポグラフィ・スペーシング）をそのままコードに反映
  • 「このFigmaのリンクをコンポーネント化して」という自然言語指示だけで実装が進む

必要なもの

  • Node.js 18以上（Claude Codeの動作に必要）
  • VS Code（最新版推奨）
  • Anthropicアカウント（Claude Codeのサインインに使用）
  • Figmaアカウント（Professional・Organization・EnterpriseプランはDev/Full席でフル活用可。Starterプランは月6回まで）

Step 1：Claude Code（VSCode拡張機能）をインストールする

VS Code Marketplace から Claude Code 拡張機能を検索してインストールします。

インストール後、ツールバーにCaudeのロゴが表示されます。クリックしてAnthropicアカウントでサインインすれば準備完了です。

Step 2：Figma MCPサーバーを接続する

Figma MCPサーバーにはリモートサーバーとデスクトップサーバー（ローカル） の2種類があります。

方法A：リモートサーバーを使う（おすすめ）

Figmaデスクトップアプリなしで使えるリモート接続方式です。VSCodeの統合ターミナルで以下を実行します。

claude mcp add --transport http figma https://mcp.figma.com/mcp

全プロジェクトで使いたい場合は --scope user フラグを追加します。

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

その後、Claude Codeを再起動して /mcp コマンドを入力し、figma を選択して Authenticate（認証） を実行します。ブラウザでFigmaの認証画面が開くので Allow Access をクリックすれば完了です。

方法B：デスクトップサーバーを使う（ローカル）

Figmaデスクトップアプリが必要ですが、選択したフレームをリアルタイムで参照できます。

  1. Figmaデスクトップアプリを最新版に更新
  2. Figmaファイルを開き、Dev Mode（Shift+D）に切り替える
  3. インスペクトパネルの MCPサーバー セクションで「デスクトップMCPサーバーを有効にする」をクリック
  4. http://127.0.0.1:3845/mcp でサーバーが起動したことを確認

続いて、VSCodeの統合ターミナルで追加します。

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

または、mcp.json（Command Palette → MCP: Open User Configuration）に直接書いてもOKです。

{
  "servers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp",
      "type": "http"
    }
  }
}

Step 3：接続確認

Claude Codeのチャット欄で /mcp を入力し、figma（またはfigma-desktop）が Connected と表示されていれば接続成功です。

実際の使い方

リモートサーバーの場合（リンクベース）

Figmaファイルでフレームやレイヤーを右クリック → 「選択範囲へのリンクをコピー」でURLを取得し、Claude Codeのプロンプトに貼り付けます。

このFigmaデザインをVue/Nuxtのコンポーネントに変換してください：
https://www.figma.com/design/xxxx/...

デスクトップサーバーの場合（選択ベース）

Figmaで対象フレームを選択した状態で、Claude Codeに指示します。

選択中のFigmaフレームをTailwind CSSを使ったHTMLに変換してください

プラグインを使った一括セットアップ（Claude Code公式）

上記の手順をまとめてセットアップできるFigma公式プラグインもあります。

claude plugin install figma@claude-plugins-official

リモートサーバー・デスクトップサーバーの設定とAgent Skills（よく使うワークフローのレシピ）がまとめて入ります。

Code Connect との組み合わせ

Figma MCPはCode Connectと組み合わせると精度が大幅に上がります。Code Connectとは、FigmaコンポーネントとプロジェクトのVueコンポーネントなどを紐づける仕組みです。

接続しておくことで、AIがゼロからコードを生成するのではなく「この Button コンポーネントを使ってください」という形で、既存のコードベースに沿ったアウトプットを出せるようになります。

プランとVueのインタラクティブセットアップ
Code ConnectはFigmaのOrganizationまたはEnterpriseプラン、かつDev/Full席が必要です。
また、VueはReactと違いインタラクティブな自動セットアップが非対応で、figma.config.json とコネクションファイルを手動で作成する必要があります。

現状の制限事項

  • 既存コードの差分更新が難しい： デザインが変わったとき、Claude Codeは新規生成は得意ですが、既存コンポーネントへの差分適用には追加のプロンプト調整が必要なことがあります
  • マルチフレームのフロー： カルーセルやオンボーディング画面など複数フレームにまたがるUIは、フレームごとに変換してから結合する手順が必要です
  • Figmaプロトタイプのアニメーション： プロトタイプのトランジションは直接変換できません
  • Starterプランの制限： 月6回のツールコール上限があります（Professional以上で実質無制限）

複数人で管理する場合の注意点

チームでこの環境を使う場合、設定の共有方法とコード品質の統一が主な課題になります。

MCPサーバー設定の共有

--scope user で追加した設定は個人のローカル環境にのみ保存されます。そのため、チームメンバーそれぞれが自分で claude mcp add を実行する必要があります。

プロジェクト単位で設定を共有したい場合は、リポジトリに .mcp.json を含める方法があります。ただし認証情報は含めず、URLのみ記載するようにしてください。

{
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

各自の認証（OAuth）はそれぞれのFigmaアカウントで行います。また、全員がそのFigmaファイルへの閲覧または編集権限を持っていることも確認しておきましょう。

CLAUDE.md でチームの規約を共有する

Claude Codeはプロジェクトルートに CLAUDE.md というファイルを置くと、その内容を常にコンテキストとして読み込みます。チームでの利用では、ここにコーディング規約・ディレクトリ構成・使用コンポーネントのルールを書いておくことで、誰が使っても一定品質のコードが生成されるようになります。

Webフロントエンドプロジェクトでの記述例

# CLAUDE.md

## プロジェクト概要
ECサイトのフロントエンド実装。Nuxt 3 + Tailwind CSS + Pinia を使用。
SSR（サーバーサイドレンダリング）構成。

## ディレクトリ構成
components/
  ui/           # 汎用UIコンポーネント（ボタン・インプット・モーダルなど）
  features/     # 機能単位のコンポーネント
composables/    # useXxx 形式の再利用ロジック
pages/          # ファイルベースルーティング
stores/         # Pinia ストア
assets/
  css/          # グローバルCSS・Tailwind設定

## コーディング規約
- コンポーネントは必ず components/features/ 以下に作成すること
- ボタン・インプット・モーダルは既存の components/ui/ のコンポーネントを使うこと。新規作成しない
- コンポーネントは Composition API（<script setup>）で書くこと。Options API は使わない
- スタイルは Tailwind CSS のユーティリティクラスを優先。スコープ付きCSSが必要な場合のみ <style scoped> を使う
- 型定義は必ず TypeScript で行い、any は使わないこと
- propsには defineProps で型を明示すること

## Figmaからコードを生成するときの注意
- カラーはデザイントークン（CSS変数）を使うこと。ハードコードしない
  例：`text-primary` / `bg-surface` など Tailwind の extend に定義済みの値を使う
- FigmaのAuto layoutはFlexboxで再現すること
- 画像は <NuxtImg> を使うこと（@nuxt/image 導入済み）
- リンクは <a> タグではなく <NuxtLink> を使うこと

## 使用ライブラリ
- アイコン：@iconify/vue
- アニメーション：@vueuse/motion
- フォーム：vee-validate + zod
- データフェッチ：useFetch / useAsyncData（Nuxt組み込み）
- 状態管理：Pinia

このファイルをリポジトリに含めておけば、チーム全員が同じルールのもとでClaude Codeを使えます。プロジェクトが進むにつれてよく発生する指摘や修正パターンが出てきたら、随時 CLAUDE.md に追記していくのがおすすめです。

まとめ

VSCode + Claude Code + Figma MCPの組み合わせは、デザイン→コード変換のワークフローを大きく変えてくれます。セットアップ自体は数分で完了するので、まずはリモートサーバー方式から試してみてください。

チームで使う場合は CLAUDE.md の整備を最初にやっておくのが効果的です。Code Connectと合わせて導入しておくことで、既存のデザインシステムやコンポーネントに沿った品質の高いコードが安定して生成されるようになります。

参考リンク

免責事項

本記事は技術的な環境構築手順の共有が目的です。
AIツールの業務利用については、所属組織の方針や契約・情報管理ポリシーに従って個別に判断してください。

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?