Figma上のデザインに対するAIレビューや実装相談などはFigma MCPが活用できそう
この記事は？
Figma MCPを利用してFigmaのファイル情報を読み取れるAIを準備できると、Figma上のデザインデータに対するAIレビューや実装相談、情報の抽出などがおこないやすくなります。
今までもデザインの情報を画像やテキストで情報を渡してAIに相談とかしていましたが、もっと「AIといっしょにFigmaファイルを見ながら相談するる」感覚に近づくイメージです。
利用例
Figma MCPについて、使い方（割愛）
MCP及びFigma MPC利用に関する解説はとてもわかりやすい解説記事があったので割愛します。
Cloude Desktopで使ってみる
Claude Desktopではjsonに設定を記述するだけでMCPサーバーを立ち上げることができるので（上記記事参照）、それだけでFigmaの情報を取得できるClaudeとコミュニーケーションすることができるようになります。
※自分は無料アカウントで試してみたらなにかのlimitに引っかかってしまったのかFigmaからの情報取得が失敗していたので、有料アカウントに切り替えたら使えるようになりました（原因未確認）
例えばFigmaにデザインガイドライン、コンポーネントライブラリ、施策のUIデザインなどがまとまっている場合、
「（施策UIデザインファイルURL）のUIデザインを、（ガイドラインファイルURL）のガイドラインを参考に訂正すべき点がないかレビューしてもらえますか？」
「（施策UIデザインファイルURL）のUIを実装する時、（コンポーネントライブラリファイルURL）のコンポーネントライブラリで活用できるものはありますか？」
みたいなレビューや相談などがCloudeで可能になります。
今までも画像を渡すなどでできていましたが、MCP経由のほうがより効率よく詳細の情報をあつかえる印象です。
もちろんそこから具体的な実行コードを出力してもらうこともできますし、仕様書などのドキュメント作成もお願いできそうです。
他のMCPを併用した活用方法もあり？
例えばガイドラインなどの情報がFigma外にあっても（Notionとか）、そちらの情報にアクセスするためのMCPさえあれば組み合わせて利用できそうですね。
Cursorで使ってみる
実装と絡めて使うにはCursorなどの実装環境とFigmaを繋いであげるのが効率良さそう。
Cursorも、SettingにMCPの項目があるので、そちらからjsonを設定することができます。
Claudeでの設定と同じですね。
Figmaデザインファイルを見てサンプル実装してもらう、実装とデザインに齟齬がなさそうかどうかをチェックしてもらう、などの実際のコードを絡めた作業に活用できそうです。
Discussion