はじめに
こんにちは、Gakken Leap のフロントエンドエンジニアの katashima です。
皆さん、突然ですがFigmaのDev Mode、活用されていますか？
デザインと開発の連携を強力にサポートしてくれるDev Modeですが、先日、Figmaから開発者にとって非常に嬉しい新機能が発表されました。それが「Dev Mode MCP サーバー」です！
実は、FigmaのMCPはオープンソースで利用されているものがあります。
- 非公式版（オープンソース）: https://github.com/GLips/Figma-Context-MCP
しかし今回、ついにFigma自身が公式のMCPサーバーを発表しました。これによる主なメリット：
- 公式サポートの安心感: バグ修正や機能追加が継続的に行われる
- APIの安定性: Figmaの仕様変更に迅速に対応
- セキュリティ: 公式による検証済みの実装
- パフォーマンス: 最適化された通信プロトコル
今回は、このMCPを実際にVS Codeを使って試してみたので、その手順と所感をご紹介します。
⚠️ 注意: 現在はまだベータ版です。
🚧 The Dev Mode MCP Server is currently in open beta. Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the beta period.
※日本語訳
🚧 開発モード MCP サーバーは現在オープンベータ版です。一部の機能と設定はまだご利用いただけない場合があります。ベータ期間中は機能が変更され、バグやパフォーマンスの問題が発生する可能性があります。
環境構築
前提条件
- Figma デスクトップアプリ（最新版）
- Visual Studio Code（最新版）
- ポート 3845 が利用可能であること
結論
Guide to the Dev Mode MCP Server
こちらの通りに設定するだけでOKです。
試した手順
ステップ1: Figma側の設定
- Figmaデスクトップアプリを開く
- デザインファイルの左上からFigmaメニューを開く
- 基本設定 → Dev Mode MCP サーバーを有効にする を選択
Figma側はこれだけでOKです。
サーバーは でローカルに実行されますhttp://127.0.0.1:3845/sse。次の手順で設定ファイルに使用するため、このアドレスを手元に用意しておいてください。
そのため、port:3845 は開放しておいてください。
ステップ2: VS Code側の設定
1.VS Codeの設定画面を開く（⌘ + ,）
2.右上の設定ファイルアイコンをクリックして settings.json を開く
3.公式の通り、以下を追加:
"chat.mcp.discovery.enabled": true,
"mcp": {
"servers": {
"Figma Dev Mode MCP": {
"type": "sse",
"url": "http://127.0.0.1:3845/sse"
}
}
},
"chat.agent.enabled": true
4.MCPを起動 (起動 をクリック)
実際に使ってみた
デモ用デザインの準備
今回は、シンプルなショッピングカートのデザインを試してみました。
ステップ1: Figmaの作成したいデザインのリンクを取得
- 実装したいデザインのFigmaファイルを開く
- 実装したいレイヤーを選択
- 右クリックして「選択範囲へのリンクをコピー」ボタンからリンクをコピー
ステップ2: VS Code Copilotでの実装依頼
GitHub Copilotのエージェントモードで、デザインリンクの実装依頼を入力：
ステップ3: 生成結果
いくつかの実行確認に同意したら、自動で動作し、index.htmlとstyles.cssを数分もかからずに作成してくれました。
このプロンプトのみでの最終的な出力はこんな感じです。
生成結果の品質
✅ 良かった点
- Figma のデザインに忠実な実装
- レスポンシブ対応済み
- セマンティックな HTML 構造
⚠️ 修正が必要だった点
- 一部のマージンやパディング等の微調整
- 画像の修正
感想と今後の展望
今回、Figma Dev Modeの公式MCPをVS Codeで試してみて、その手軽さと強力さに驚きました。これまで非公式のMCPを利用していた方も、公式サポートの安心感は大きいのではないでしょうか。
簡単にサンプルで試しましたが、現在私が携わっているプロジェクトはNuxt.jsを扱っています。
Vueファイルの形式や、Tailwind CSSのクラスを用いた実装にも対応してくれるので、うまく活用していきたいと思いました。
まだベータ版ですが、今後のさらなる発展が非常に楽しみです。
実際に使ってみての所感
👍 期待以上だった点
- セットアップの簡単さ: 公式ドキュメント通りで迷わず設定できた
- 生成速度: 数分でデザインに近いコードが完成
- コードの品質: Tailwind CSSやVue.jsの記法も適切
- レスポンシブ対応: 自動でモバイル対応も考慮されていた
🤔 課題と改善点
- 細かいデザイン調整: ピクセルパーフェクトな実装には手動調整が必要
- 複雑なインタラクション: JavaScriptロジックは別途実装が必要
-
コンポーネント設計: 再利用性を考慮した設計にはリファクタリングが必要
- → これらにおいてもプロンプトの工夫で改善できる可能性があると感じました
プロジェクトでの活用可能性
現在携わっているNuxt.jsプロジェクトでの活用を検討した結果：
適用できそうな場面
- プロトタイプ作成: デザインの素早い実装
- UIコンポーネント: ボタンやカードなどの基本コンポーネント
より活用するための今後の取り組み
- デザインシステムとの連携検討
- 既存コンポーネントとの統合
- チーム内でのワークフロー整備
まとめ
Figma Dev Mode の公式 MCP は、デザインシステムを運用しているチームや、デザインと開発の連携を強化したいチームにとって、非常に強力なツールです。特に、これまで非公式のソリューションに頼っていた方々にとっては、公式サポートという大きな安心感が加わりました。
ぜひ皆さんも、ご自身の開発環境で MCP を試してみて、その恩恵を実感してみてください！
エンジニア募集中
Gakken LEAP では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！
ぜひお気軽にカジュアル面談へお越しください！！