Figma MCP×Cursor Rulesで実現するデザインレビューと品質管理

デザイナーもエディタを開く時代へ

最近、CursorをはじめとするAIツールの話題をXなどで見かけない日はありません。
コード生成のスピードが飛躍的に上がったことで、今やエンジニアだけでなく、デザイナーがコードベースに触れるハードルも劇的に下がってきているのを感じます。

デザインツール内だけでなく、実装されたデザインの品質にも向き合う。
デザイナーの関わり方が少しずつ変わっていっている感覚があります。

目視頼りのデザインレビューから脱却

これまで、プロダクトのUI品質を担保するレビュー作業はデザイナーの目視に頼っている部分が多くありました。
Figmaの画面と、エンジニアが上げてくれた開発環境の画面を左右に並べて、ひたすら余白やサイズのズレを探す目視確認。
「ここのマージン、4pxほど詰めてほしい」「ボタンのドロップシャドウが指定と違っているかも」と、テキストで細かく指摘を書き出す。
こうした微小な修正のやりとりで、1日の大半が溶けていくのはよくある光景でした。

さらに実装段階に限らず、デザインフェーズでも同様の課題が存在します。
他のデザイナーが作成したFigmaデータが、自社のUIガイドラインやデザイントークンのルールに正しく準拠しているかを確認するデザインレビューの負荷です。
手作業での間違い探しに工数を奪われていると、本来向き合うべきユーザー体験の根幹に時間が割けなくなってしまいますよね。

Figma MCPとCursor Rulesの連携

そこで最近、解決の糸口として手応えを感じているのがFigma MCPとCursor Rulesを組み合わせたアプローチです。
MCPとは、AIに特定の外部ツールの文脈を持たせることができる拡張機能です。
この仕組みを使うと、Cursor上でAIに対して「Figmaのこのデザインデータを参照して」と直接指示が出せるようになります。
さらに、Cursor Rulesに自社のUIガイドラインやコンポーネントのルールを定義しておく。
そうすることで、Figmaの実データと実装結果、そしてプロジェクトの基本ルールをAIに照合させ、人間が見落としがちなルール違反やズレを自動的に検知・指摘してくれる仕組みが作れるわけです。

デザイナー同士のデザインレビューの自動化

まずは実装に入る前のフェーズでのユースケースを見てみましょう。
他のデザイナーが作成したFigmaファイルに対して、Figma MCPの力を借ります。
CursorのAIチャットにFigmaのURLを渡し、「この画面のデザインが、Cursor Rulesで定義したカラートークンやスペーシングルールに準拠しているか確認して」と投げかけます。
これまではデザイナーの目でくまなくチェックしていた意図しないローカルスタイルの使用や標準外のマージンの適用などを、AIがFigmaのプロパティ値をもとに瞬時に指摘してくれます。
デザイナー同士のレビューがルールの確認から解放され、そのUI構成がユーザーフローとして適切か？という壁打ちに集中できるようになるのは、大きなメリットだと感じます。

実装されたデザインのレビューの自動化

次に、実装があがってきた後のレビューです。
開発環境に反映された画面を見て「なんだか少し違う気がする」と感じたとき、これまでは目視やブラウザの開発者ツールを開き、コードを参照して確認するしかありませんでした。
そこで、Cursorの機能をフル活用したよりスマートなアプローチをとります。
Cursorが該当の開発環境にアクセスできる状態にしておけば、いちいちソースコードをコピペする必要はありません。
Cursorのチャットに開発環境のURLと、Figmaの対象コンポーネントのURLを渡し「この実装画面とFigmaのデータを比較して、マージンやカラーコードにズレがないか教えて」と指示を出します。
ブラウザの検証ツールを開かなくとも、Cursor自体が該当機能のコードを読み込み、Figmaの実データと突き合わせる。すると、目検では気づきにくいパディングの1pxの不足や、微妙に違うグレーのカラーコードの誤りなどを、AIが的確に見つけ出してくれます。
デザイナーがエンジニアリングの深い部分に入り込みすぎずとも、高い精度でデザインとの一致確認ができる強力なフローです。

ここで少し脱線しますが、「ツールの自動検知に頼りすぎると、デザイナー自身の審美眼や直感で違和感に気づく力が鈍るのではないか？」と心配になる方もいるかもしれません。
しかし、私はむしろ逆だと考えています。
機械的なチェックをツールに委ねることで、デザイナーは仕様通りに組まれているかの確認作業から解放され、そのUIが「本当にユーザーにとって触り心地が良いか」という本質的な審美眼を発揮する余裕が生まれるのです。

数値化できない定性的価値と、越境するチーム体制

とはいえ、すべてのデザイン要件をツール検知だけで完結できるわけではありません。
「ここのホバーアニメーションは、もっと心地よいバウンス感を取り入れたい」
「このインタラクションは、コンテキストに合わせてあえて標準ルールから少し逸脱させたい」
こうした暗黙知や、数値化しきれない定性的なニュアンスは、Cursor RulesやMCPでカバーするには限界があります。
だからこそ、この仕組みが真にワークするためには、チームの体制やカルチャーが極めて重要になります。
デザイナーが自らCursorを活用しつつ、エンジニアと同僚デザイナーと建設的に対話をする。
職能の壁を越えて互いの領域へ越境できる自律性の高いチームであって初めて、ルールの余白を埋める人間同士のコミュニケーションが活きてくるのではないでしょうか。

本質的な議論へシフトしよう

ツールを活用して品質管理を自動化していくことで、チーム内の会話の質は確実に変化していきます。
これまでは「ここの色が違う」「ルール通りに作られていない」といった表層的な指摘に大半の時間が溶けていました。
それが「データを突き合わせてズレはない状態だけど、実際の画面で見るともう少し余白を広げた方が自然だね」といった、より良い体験を目指すための建設的な議論する時間へとシフトしていく。
ツールの進化に合わせてプロセスをアップデートしていくのです。
環境の変化をポジティブに捉え、プロダクトの価値をチーム全員で高めていく。
これからも、そんな前向きな開発の現場を増やしていけたらと思います。