皆さん、こんにちは。私はＳｋｙ株式会社のＳｋｙスタイル部のデザインチームに所属しています。今回は、FigmaのDev Mode MCP ServerとCode Connect UIを活用し、デザインとコードを連携させることで開発効率を向上させる取り組みについて、設定方法や効果、今後の展望を交えてご紹介します。
はじめに
前回の記事に引き続き、FigmaのDev Mode MCP Serverを使った検証について紹介します。AIを使ったデザインチームの取り組みを紹介していますので、ぜひ前回の記事もご覧ください。
目的
FigmaのDev Mode MCP Serverを使ってＳｋｙスタイル部の開発効率向上を目指しています。 品質を保った状態で開発効率向上できるよう、FigmaのDev Mode MCP Serverを使ってみて課題を洗い出し、対策をしていきます。
今回やってみたこと
① Code Connect UIを使ってみた
2025年9月23日にFigmaからCode Connect UIがリリースされました。
Code Connectを使うことでFigmaのデザインシステムのコンポーネントとコードベースを接続するこができます。Figmaのデザインシステムにひもづくコード情報をLLMにコンテキストとして渡すことができるようになるため、Dev Mode MCP Serverを使ったコード生成の精度向上が見込めます。
今までもCode Connectの機能自体はありましたが、CLIでの設定が必要ということで敬遠していました。ところが、今回新しくリリースされたCode Connect UIはFigmaの画面から手軽に設定できるのでトライしてみました。
設定は1日半
Figmaで公開しているデザインシステムのコンポーネントとGitHub上にあるデザインシステムのコードをひもづけていきます。Ｓｋｙスタイル部のデザインシステムは64個のコンポーネントを提供していますが、1人でやって1日半でCode Connectの設定が完了しました。
結果はかなり良い！
Code Connectを設定することでMCPクライアントであるLLMで以下の判断ができるようになります。
- Figmaのデザインシステムに存在するコンポーネントかどうか判断できる
- デザインシステムのどのコンポーネントを使えばよいか判断できる
- コンポーネントにひもづくGitHubのファイルパスを受け取ることができるので、コードを確認し正しいPropsの使い方を判断できる
今までデザインシステムのコンポーネントを使ってくれないことが多々ありましたが、Code Connectを設定することで、Figmaのデザインどおりデザインシステムのコンポーネントを使って実装してくれるようになりました。費用対効果が高いので設定した方がよいと感じました。
新たな課題の発見
Code Connectを設定している過程でFigmaのコンポーネントとコードで管理しているコンポーネントに結構な差があることがわかりました。今後検証を進める過程で、この差が原因で正しく生成できないなど課題として顕在化する可能性があると感じています。
▼Figmaとコードの差
② カスタムインストラクションなしで生成してみた
カスタムインストラクションなしだとうまくいかず、生成された画面はFigmaのデザインと大きな乖離がありました。 特に次の点に課題を感じました。
- Code Connectを設定しているのにCode Connectの情報を取得していない
- デザイントークンを使ってくれない
カスタムインストラクションはAIと一緒に作る
たたき台はDev Mode MCP Serverのtool：create_design_system_rulesを使って作ってもらい、Microsoft Copilotを使いながら改善をかけていきました。
Figmaデザインを実装する際のワークフローを作り、トークン変換ルールとしてFigmaとコードのデザイントークンのマッピング表を作りました。以下、カスタムインストラクションの一部を抜粋しています。
## 1. Figma to Code 実装ワークフロー
Figmaデザインを実装する際は、必ず以下の5ステップに従ってください。
### ステップ1 ： Code Connectを確認
Code Connectマッピングを取得
get_code_connect_map
### ステップ2 ： デザインコンテキストを取得
デザインの詳細情報を取得
get_design_context
スクリーンショットで視覚的確認
get_screenshot
### ステップ3 ： デザイントークンの変換
#### 3-1 ： Figma変数定義を取得
まず ’get_variable_defs’ を使用して、デザインで使用されている変数の実際の値を取得します。
#### 3-2 ： 変数をコードトークンに変換
取得した変数定義をプロジェクトのトークン形式に変換します。詳細な変換ルールは「2. トークン変換ルール」を参照してください。
### ステップ4 ： コンポーネントの実装
### ステップ5 ： 最終チェック
改善の結果
実装ワークフローとトークン変換ルールを整備することで、デザインシステムのコンポーネントとデザイントークンを使って実装してくれるようになりました。結果として、Figmaとの見た目が8割ほど合うようになりました。
今後やりたいこと
生成ワークフローを確立する
Dev Mode MCP Serverを使ってFigmaからコード生成するワークフローを確立したいです。
どの粒度で生成すれば、実装者の作業負担を最小に抑えつつ高品質な成果物を維持できるかを検証しています。まだ検証途中ですが、ページ単位で生成するとFigmaのデザインどおり生成できないことはわかっています。ページ単位だと情報量が多過ぎて品質が下がるのだと思われます。 この辺りはFigmaが提唱しているベストプラクティスのとおりで、大きなフレームだと精度が低くなります。
また、Figmaのアノテーションを使うことでどこまで挙動をつけられるかも今後検証していきたいと思います。
FigmaのDev Mode MCP Serverでどこまで生成するのかを線引きする
最適な開発フローを確立するため、開発メンバーと話しつつ「やること」「やらないこと」を整理したいです。
デザインシステムのすべてのコンポーネントを生成する
すべてのコンポーネントで正しいコードが生成できるか確認します。Figmaとコードでの差が課題として顕在化する可能性が高いと考えています。その場合は、コードに合わせてFigmaを修正したり、カスタムインストラクションでコンテキストを補完してあげる必要があると考えています。
どれだけ工数削減につながるか、ビフォーアフターを測定する
最終的にはFigmaのDev Mode MCP Serverを使った場合と使わなかった場合の工数を出して、実績としたいと考えています。