こんにちは、25卒で新卒入社いたしました、OTTサービス技術部開発第4グループの今村です。
業務では主にフロントエンドを担当しております。
担当案件にて他端末ですでに実装されていたコンポーネントを一から新規作成する機会がありました。 その際にFigma MCPを用いて開発を行ったのですが、デザインからコードへの反映がとてもスムーズになり、実装工数が大幅に削減されました。 本記事では、Figma MCPの導入手順から実際にデザイン実装する流れ、そして実務での活用事例と使用して感じた利点と課題点についてお話しいたします。
Figma MCPとは？
Figma MCPは、FigmaのデザインデータをAIエージェントが直接参照できるようにするための仕組みです。 従来のAIを用いた開発フローでは、人間がデザインを確認して、具体的な情報をプロンプトに含ませる必要がありました。しかし、Figma MCPを活用すれば、エージェントはFigma上の構造情報（オートレイアウト、デザイントークン、レイヤー構造など）をコンテキストとして直接読み取ることが可能となるため、Figmaのデザインをすぐにコードに落とし込むことができます。
具体的には、Figma MCPから以下のようなツールが提供されており、エージェントがこれらを使用できるようになります。
| ツール | 機能 | 取得内容 |
|---|---|---|
| get_design_context | デザインの構造をデータで読み取る | 余白、サイズ、レイアウト設定、テキスト内容など |
| get_variable_defs | デザインの変数を読み取る | カラー名やサイズ名などの定義 |
| get_screenshot | デザインの見た目を画像で確認する | 対象のスクリーンショット |
導入方法
前提として利用条件は以下の通りです。
| リモートMCPサーバー(ブラウザ版) | デスクトップMCPサーバー | |
|---|---|---|
| 利用可能なユーザー | 全てのプラン・シートで利用可能 | 以下有料プランのみ（DevまたはFullシート必須） - Professional - Organization - Enterprise |
| レート制限 | 無料プラン: 月6回まで Dev / Fullシート(有料プラン): 10〜20回/分 |
Dev / Fullシート(有料プラン): 10〜20回/分 |
Figma側の設定
個人的にブラウザ版だと他のタブと混同してしまうため、今回はデスクトップ版を使用します。
1. Devモードの有効化
画像右のボタンを押して、Devモードを有効にします。
2. MCPサーバーの有効化
画面右メニューのMCPから、MCPサーバーを有効にします。
VSCode側の設定
1. mcp.jsonの作成
command+shift+Pでmcpと検索し、MCP: ワークスペース フォルダーMCP構成を開くを選択します。
mcp.jsonに以下を記載して保存します。
{
"servers": {
"Figma Dev Mode MCP": {
"type": "sse",
"url": "http://127.0.0.1:3845/sse"
}
}
}
記載するとserversの下に起動というボタンが表示されるため、そちらを選択します。
以上でMCPサーバーの準備が完了しました！
試してみる
それでは、実際にMCPサーバーを使用して実装してみましょう。
今回は新卒研修で作成した、以下の画面を使用していきます。
実装したい画面を右クリックして、画像のようなメニューから選択範囲へのリンクをコピーを選択します。
こちらでコピーしたリンクを使用することで、AIエージェントが直接デザイン情報を読み取ることが可能になります。
こちらを使用した上で、以下のプロンプトを投げてみます。
https://www.figma.com/design/[FILE_ID]/[FILE_NAME]?node-id=[NODE_ID]&m=dev このデザインをFigmaから参照した上で、以下の要件を満たして実装してください。 # 技術スタック - React: 関数コンポーネント - TypeScript - Tailwind CSS - Lucide React: アイコン # 実装ルール 1. コンポーネント分割: - 画面全体を1ファイルにせず、componentsディレクトリ内に再利用可能な最小単位（Button, Card, Header等）で分割してください。 2. 型定義: - Propsの定義にはtypeを使用してください。 3. Figma変数の反映: - Figma内のVariables（色、余白、角丸など）を読み取り、TailwindのクラスまたはCSS変数として忠実に再現してください。 4. レスポンシブ対応: - Figmaのオートレイアウト設定（Fill, Hug, Fixed）を解析し、モバイル・デスクトップ両方で崩れない構成にしてください。 5. アクセシビリティ: - 適切なHTMLタグ（header, main, section, button等）を使用してください。
するとFigma内のデザイン情報を確認して、実装するべき画面が注文管理画面であることを読み取った上で実装を開始しました。
そして画面は以下のように実装されました。
技術スタックとプロジェクト構造
技術スタック
- React 18: 関数コンポーネントベース
- TypeScript: 型安全性を確保
- Tailwind CSS: ユーティリティファースト CSSフレームワーク
- Lucide React: アイコン（拡張可能）
- Vite: 高速ビルドツール
プロジェクト構造
src/ ├── components/ # 再利用可能なコンポーネント │ ├── Button.tsx # ボタンコンポーネント（primary, secondary, danger） │ ├── Header.tsx # ヘッダーナビゲーション │ ├── TabNavigation.tsx # タブコンポーネント │ ├── StatusBadge.tsx # ステータスバッジ │ ├── OrderTable.tsx # 注文テーブル │ ├── OrderDetail.tsx # 注文詳細セクション │ └── index.ts # エクスポート用 ├── pages/ │ └── OrderListPage.tsx # 注文一覧ページ ├── types/ │ └── order.ts # 型定義（Order, OrderStatus等） ├── assets/ │ └── images.ts # 画像アセット管理 ├── App.tsx # ルートコンポーネント ├── main.tsx # エントリーポイント └── index.css # グローバルスタイル
驚くべきことに、一度の指示だけでFigma上のカラーやサイズ、余白などを忠実に再現したコードが生成されました。デザインに関しては手作業での調整がほとんど不要なレベルの完成度です。
またFigma上ではPC向けのデザインしか用意していませんでしたが、指示一つでモバイル対応まで行うことができました。こちらもデザイン部分はFigmaで作成したものと遜色ないものが完成していることがわかります。
実務での活用事例
ここからは私が実際にFigma MCPを実務にて活用した際の事例をご紹介します。
導入背景
私の所属するチームでは複数のデバイス向けの開発を行っており、私はそのうちの1つを担当しています。とあるタスクにて、担当デバイスにおいて、他デバイスでは既に実装されている既存機能が未実装であることが判明し、一から開発を行うことになりました。
これまで既存機能の修正や新規機能の開発経験はありましたが、他デバイスで稼働中の機能を、自分の担当環境で一から作るという経験は初めてでした。当初は新規機能の開発と同様に考えていましたが、いざ着手してみると参考になるドキュメントが存在せず、他デバイスの実装コードだけが唯一の正解という状況に直面しました。
この状況において懸念したのは、実装漏れが発生することです。限られた工数の中で、ビジネスロジックの実装にできるだけ多くの時間を割きたいと考え、デザイン反映をいかに効率化し、正確に終わらせるかが大きな課題となりました。
そんな時に所属チームの先輩から提案を受けたのがFigma MCPでした。
デザインの構造情報などを直接コンテキストとしてAIに渡せるため、仕様書が不足していてもデザインデータから実装の土台を構成することができると考え、導入することにしました。
使用して感じた利点と課題点
利点: 繰り返し作業からの解放
実際に導入して感じた最大の利点は、これまで不可欠だったデザインデータの確認と実装という、繰り返しの作業が不要になった点です。 デザインをコードに落とし込む作業は、避けては通れないものの、手作業では時間がかかる上、数値の読み取りミスなどのヒューマンエラーが発生しやすい工程でもあります。Figma MCPを活用することでこれら二つの課題を一度に解決でき、結果として大幅な工数削減に繋がりました。
課題点: svgアセットが含まれている際のエラー
一方現状の課題として、デザイン上にSVGが含まれているとエージェントのリクエストが失敗し、動作が停止してしまうことがあります。
これは主にget_screenshot実行時に発生する現象で、Figma側ではなくVSCode側の制限によるエラーのため、現在はMicrosoft側の対応待ちという状況です。
対策としては、プロンプトでget_screenshotの使用を制限するよう指示を与え、SVGに関してはFigmaから手動でエクスポートして使用する運用が挙げられます。
おわりに
今回初めてFigma MCPを実務で使用してみて、AIによるデザイン実装の自動化に大きな可能性を感じました。 利用にあたっては基本的に有料プランの契約が必要であり、コスト面でのハードルは少なからずありますが、大幅な工数削減の利点を考えれば、短期間であっても導入する価値は十分にあると強く実感しました。 また今回は活用しきれませんでしたが、Code Connectと連携させることで、プロダクトの品質を担保しつつさらに作業効率を向上させられる手応えも得られました。
デザイン実装を行う方は一度ぜひお試しください！
