はじめに
こんにちは、ふるしょうです。
DRESS CODEは画面数が既に200を超えており、新規機能開発や既存機能の拡張が目まぐるしく進んでいます。
デザイントークンやタイポグラフィをデザインシステムとして運用していますが、画面内のレイアウトや複合コンポーネント、共通UIコンポーネントがFigmaのデザインデータと微妙に「ズレ」ていることが課題になってきています。(絶賛解消に向けて試行錯誤中🔥)
今回は、デザインデータとUIのズレを解消する手段として、2025年6月4日にベータリリースされたFigmaのDev Mode MCPサーバーとCursorを活用して既存画面のUIメンテナンスに取り組んだ事例について紹介します。
TL;DR
- Dev Mode MCPサーバーと Cursor を連携し、デザインデータと実装 UI のズレを爆速で修正
- 17ファイルをCursorとペアプロしながら約30分でUI調整完了
- タイポグラフィやガイドラインをProject Rulesに定義することで、高精度なアウトプット
- レスポンシブ対応や複合コンポーネントの境界値など、一部は人手による微調整が依然必要
フロントエンド技術スタックと開発環境(2025/06/20時点)
- 主要ライブラリ: React, TanStack Router, Zustand, XState
- 言語: TypeScript
- スタイリング: Tailwind CSS
- ビルドツール: Vite (Turborepo を利用したMonorepo構成)
-
デザインシステム: 独自の
dresscode-ui- 現時点ではデザイントークン、Typography, Spacingなどプリミティブな値を管理
-
エディタ: Cursor (Businessプランを全社導入済)
- Project Rulesにタイポグラフィやアイコンなどのガイドライン、コーディング規約、アーキテクチャ構成などを定義
- デザインツール: Figma (Professionalプラン)
Dev Mode MCPサーバーとCursorのセットアップ
Dev Mode MCPサーバー利用ガイド通りに実行します。
※ 2026/06/20時点では、Dev Mode MCPサーバーはFigmaデスクトップアプリからのみ使用可能
- Figmaデスクトップアプリを開き、最新バージョンであることを確認します。
- 任意のデザインファイルを開きます。
- 左上のメニューから、 [Preferences] > [Enable Dev Mode MCP Server] を選択します。
画面下部にDev Mode MCP server enabled on localhost:3845/sseという確認メッセージが表示され、ローカルでサーバーが起動します。
次に、Cursorをセットアップします。
-
Cursorを開き、Cursor Settingsを開く
-
メニューから [Tools & Integrations] タブを選択
-
[New MCP Server] をクリック
-
以下のJSONスニペットを貼り付けて保存
.cursor/mcp.json
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
これで準備は完了です。CursorがFigmaのデザインコンテキストを読み取れるようになりました。
Cursorを導く
今回、デザインデータとUIのズレを修正した画面と主な問題点は以下の通りです。
- 対象プロダクト: HR Force
-
対象画面: People > Overview (2024/12 に初期リリース)
- 企業に纏わる人の推移や、入社・退職・オンボーディングなどのダッシュボード画面
-
主な問題点:
- カード間の感覚やパディングがデザインデータと乖離
- 共通のレイアウトコンポーネント（
Gridなど）が使われていない - タイポグラフィやアイコンが最新のガイドライン通りに実装されていない
- レスポンシブ対応が不完全で、特定の画面幅でレイアウトが崩れる
People > Overviewのデザインデータ(今回の対象レイヤー)
Figma design のコンテキストを Cursorに提供する方法は選択ベースとリンクベースの2つがあります。
普段レイヤーをリンクベースでプロダクト関係者と認識合わせすることが多いので、今回はリンクベースでCursorを利用しました。
- 実装済の画面のため、該当route配下のディレクトリをCursorのContextに追加
(※タイポグラフィなどのProject RulesはRule Type : Alwaysで常にCursorが読み込むように設定して運用) - 対象のレイヤーをリンクベースでチャットに添付
- 段階的に修正を指示
a. レイヤー内部のコンポーネント間の間隔・paddingを修正
b. 各カードコンポーネント単位にレイヤーを添付し個別に修正
上記の手順で指示出しをした結果、感動しましたw
Figmaのデザインデータ自体が固定の画面幅のため、そのWidthではほぼ完璧の仕上がりでした。
Cursorの実装したデザインデータと同じwidthのUI(local環境)
また、Figmaのtext variantの命名とTypographyコンポーネントのvariantを揃えているため、問題点にあったタイポグラフィの適用も完璧です。
(今後、新規実装時もPR前にMCP経由でタイポグラフィ揃えるでいいやって素直に思いましたw)
画面幅や要素数の境界値によっては多少レイアウトシフトが発生していたので、Cursorとペアプログラミングしながら、デザインデータで表現しきれていないwidthや境界値のUIを調整しました。
課題にあったGridレイアウトの修正例
導入効果
FigmaのDev Mode MCPサーバーを導入した結果、UIの微修正にかかる時間が劇的に短縮されました。これまで1,2時間かかっていたであろう17ファイルのUI修正作業が、約30分で完了しました。
個人的にはFigmaのLayout Propertyと睨めっこしてピクセルベースやデザイントークンを合わせる面倒さから解放されたことが非常に嬉しいですw(目にも優しいね)
完全自動化の難しさと、残る手動作業
また、実際に運用してみて「すべてが自動化されるわけではない」という知見やProject Rulesなどの規定との相性の良さを体験できました。
特に、以下のケースでは依然としてエンジニアによる手動での調整が必要です。
-
レスポンシブ対応
Figmaのデスクトップビューのレイヤーを読み込ませた場合、モバイルやタブレットでの最適なレイアウトを完全には推論できません。ブレークポイントごとの細かなスタイル調整は、手動での確認と修正が不可欠です。 -
複合コンポーネントのレイアウト
複合コンポーネントにおいて、要素間のマージンやコンテンツの折り返しといった境界値のハンドリングは、個々のコンポーネントスタイル・複合コンポーネント自体のスタイル修正ともに必要なケースでは微妙でした。
現時点では、あくまで「8〜9割の修正作業をAIに任せる」ためのものであり、最後の仕上げや複雑なレイアウトの担保は、引き続きフロントエンドエンジニアの重要な責務だという所感です。
ただし、明瞭なProject Rulesや、デザイントークンの規定などAIを正しく導くための道具を揃えていくことで、AIと協働して精度高く高速にUIの整備を進めていけると確信しました。
まとめ
本記事では、FigmaのDev Mode MCPサーバーとCursorを連携させ、既存画面のUIとデザインデータとのズレを高速に修正した事例を紹介しました。
Background Agents が2025/06/20時点ではPrivacy Modeが有効だと使えないので、弊社で試すのは先になりそうです。
ただ、DevinやClaude Codeも社内で活用し始めているので、これらも駆使して細かいUIのズレを爆速で修正していきたいです🔥
そして、実はこの事例は今週水曜の社内輪読会のネクストアクションでした！w
Dress Code社のプロダクト開発組織で運用している輪読会は@anizozinaさん が先日記事にしているので、気になる方はぜひ読んでください！
最後までお読みいただき、ありがとうございました！
Views: 0
