こんにちは。今回は、私たちの社内で最近注目しているMCP（Model Context Protocol）の一つFigma MCPについて、個人的に試してみた導入事例をご紹介します。
導入の背景
もともと社内で「MCPを活用して、開発をもっと効率的にできないかな？」という話題が盛り上がっていました。そんな中で見つけたのが、Figma MCP。「実際のところどうなの？」と気軽に検証を始めました。
導入前に特に大きな問題があったわけではなく、「デザインシステムが崩壊している」とか「チーム間のコミュニケーションが悪い」といった具体的な課題感はありませんでした。強いて言えば、「実装スピードがさらに改善できるかも？」という期待があったくらいです。デザインと開発間の細かな調整や手戻りを少なくできれば、プロダクト開発全体のスピードが上がるかもしれないと感じていました。
導入手順
導入手順は、以下の記事を参考にしました。
大まかな流れは以下の通りです。
- Figma APIキーの取得
- Cursorのインストールと設定
-
.cursor_rulesファイルにマークアップのルールを記述 - Figma MCPサーバーを起動し、Figmaファイルと連携
導入自体は比較的スムーズに進めることができました。
実際に使ってみた所感
個人的に試した結果としては、6〜9割くらいはデザイン通りの見た目で実装されるという印象です。特にFigma側で構造化やレイアウトがしっかり整理されている場合、かなり精度高く実装されました。一方で、デザイン側が雑然としていると、精度が落ちるように感じました。
また、共通コンポーネントが存在する場合は、Cursorの設定ファイル（.cursor_rules）にそのコンポーネントを使用するルールを明記しておくと効率がよくなります。特にルールを設定しない場合、単純なHTMLタグでマークアップされてしまいます。
さらに、すでに類似画面を実装済みであれば、その実装済みファイルをコンテキストとして渡すことで、より精度の高いコードを生成してくれます。
今後の展望（今後書けそうなトピック）
今回は個人での検証レベルでしたが、今後は以下のような内容で深掘りできそうです。
- 導入による具体的な開発効率化のケーススタディ
- デザインデータの構造化ベストプラクティス
- 導入時に注意すべきポイントや落とし穴
- 実際のコード生成例やデモのスクリーンショット紹介
この記事が、Figma MCP導入を検討している方の参考になれば嬉しいです！
Discussion