🎨Figma MCPの構造化問題を改善！「Layermate」でデザイン再現率を向上させた話

みなさんこんにちは！

カンリーでVPoEをしてます長谷川です。

今回は、Figma MCPの構造化問題に取組んだお話ができればと思います！

✨ はじめに

Figma MCPを使ったことはありますか？MCPとは「Model Context Protocol」の略で、AIがFigmaのデザインファイルを読み取り、コード生成などを行うためのプロトコルです。しかし、実際に使ってみると、構造化されたデザインファイルからの再現性は高い一方で、非構造化されていないデザインファイルからの再現率の低さに直面することも多いです。

今回は、この問題を解決するために、AIデザインツール「Layermate」を活用することで、デザインの再現性を向上させることができたので、紹介です。

🔰 Figma MCPとは？

まず、Figma MCPについて簡単に説明します。

Figma MCPは、OpenAIのClaude等のAIモデルがFigmaファイルの内容を理解し、そのデザインを基にコード生成や分析を行うためのツールです。具体的には

• Figmaのデザインファイルを読み込める
• レイヤー構造やコンポーネントを解析
• React、HTML/CSSなどのコードを自動生成
• デザインの意図を理解してコーディングを支援

一見すると非常に便利なツールですが、実際の運用では大きな問題がありました。

⚠️ 直面した課題：構造化されていないデザインファイル

Figma MCPを実際に使用してみると、以下のような問題が発生しました

1. 再現率の低さ

デザインファイルのレイヤーが適切に構造化されていないため、AIがデザインの意図を正確に理解できず、期待したコードが生成されませんでした。特に

• レイヤー名が「Rectangle 1」「Frame 23」など意味不明
• コンポーネント化されていない重複要素
• グループ化が不適切でレイアウトの関係性が不明確

2. レイアウトの誤解釈

構造化されていないFigmaファイルでは、要素間の関係性が曖昧になり、以下のような問題が頻発しました

• フレックスボックスで実現すべきレイアウトがabsoluteポジションで生成される
• レスポンシブ対応が困難なコードが出力される
• セマンティクスが考慮されていないHTML構造

🔍 Figma AIでの構造化を検討→現実を知る

この問題を解決するため、まず「Figma AI」を使って既存のデザインファイルを構造化できないか調査しました。

Figma AIは「Organize your file by giving all your layers meaningful names with a click」という機能を提供しており、レイヤーのリネーム機能で「auto-renaming layers with contextual titles」が可能です。

しかし、詳細に調べた結果、Figma AIの現在の機能は

• テキストのリライト、画像生成、レイヤー名の自動生成が中心
• 既存デザインの構造的な再編成機能は存在しない
• レイヤー名の変更はできるが、グループ化やコンポーネント化の自動化は未対応

つまり、根本的な構造化問題の解決には至らないことがわかりました。

🎉 救世主「Layermate」との出会い

そこで見つけたのが、AIデザインツール「Layermate」 でした。

https://www.layermate.ai/

Layermateとは

Layermateは、既存のFigmaデザインを解析し、以下のような構造化を自動で行うAIツールです：

• スマートなレイヤー命名: 要素の役割に基づいた意味のある名前を自動生成
• 適切なグループ化: 関連する要素を論理的にグループ化
• コンポーネントの提案: 再利用可能な要素をコンポーネント化
• レイアウトの最適化: Auto Layoutの適用とレスポンシブ対応の改善

構造化の効果

Layermateによる構造化後、以下の改善が見られました

1. 再現率の向上: 約8-9割（筆者の主観）のデザイン要素が適切に再現されるように
2. メンテナブルなコード: 意味のあるクラス名とコンポーネント構造
3. レスポンシブ対応: Auto Layoutの活用により画面サイズ対応が容易に
4. 開発効率の向上: デザイナーと開発者間のコミュニケーションが円滑に

さらなる品質向上のコツ

構造化だけでなく、以下のテクニックを組み合わせることで、さらに高品質なコード生成が可能になります

Auto Layoutの徹底活用

Figma側でAuto Layoutをしっかりと設定することで、レスポンシブ対応がより効果的に機能します

• フレックス方向の指定: 横並び・縦並びの意図を明確化
• 余白とパディング: 適切なスペーシングの自動化
• リサイズ設定: コンテンツに応じた柔軟な幅・高さ調整

これにより、生成されるCSSもFlexboxやCSS Gridを適切に活用した、真にレスポンシブなコードになります。

アノテーション機能で細かい意図を伝達

Figmaのアノテーション機能を活用することで、より細かな開発意図をFigma MCP側に反映できます

• インタラクション仕様: ホバー状態やクリック時の挙動
• データバインディング: 動的コンテンツの扱い方
• アクセシビリティ要件: WAI-ARIAラベルやフォーカス管理
• 技術的制約: 特定のライブラリやフレームワークの使用指示

https://x.com/figma/status/1937879218668609889

この組み合わせにより、単純な見た目の再現を超えて、実装時の細かい要件まで含めた高精度なコード生成が実現できます。

🔧 実際の変換プロセス

Step 1: Figmaファイルの準備

既存の非構造化されたFigmaファイルをそのままLayermateにインポート

Step 2: AI解析の実行

Layermateが以下の処理を自動実行

• デザイン要素の意味解析
• レイヤー階層の最適化
• 命名規則の適用
• コンポーネント候補の特定

Step 3: 構造化されたファイルの生成

出力されたFigmaファイルは

• 統一された命名規則
• 論理的なグループ化
• 適切なAuto Layout設定
• コンポーネントライブラリの基盤

Step 4: Figma MCPでの再検証

構造化されたファイルをFigma MCPで処理すると、品質の高いコードが生成されました。

⚠️ 課題と制限事項

完全性の問題

• 📊 Figma→Layermateへの変換率は8-9割程度: 完全な変換は困難で、細かい調整が必要

コスト面の課題

• Layermateの料金体系: 無料プランは実行制限があり、本格運用には有料プラン必須

📊 他のアプローチとの比較

手動構造化 vs Layermate

• 時間効率: Layermateが圧倒的に高速（数分 vs 数時間）
• 品質: デザイナーの経験値に依存せず一定品質を保証
• 一貫性: 命名規則とパターンの統一が自動化

他のAIツールとの比較

市場には類似ツールも存在しますが、Layermateの優位点

• Figmaネイティブサポート
• MCP連携に最適化された出力
• 日本語対応（レイヤー名の日本語解析）

🔮 今後の展望

Figma公式機能への期待

Figma AIは2025年7月24日に正式版がリリースされており、今後の機能拡張に期待しています

• より高度な構造化機能
• MCP連携の公式サポート
• デザインシステム自動生成

エコシステムの発展

デザインツールとAIの連携はまだ発展途上段階です。今後期待される改善点

• 精度向上: AIによるデザイン意図の理解精度向上
• コスト最適化: ツール間連携によるコスト削減
• ワークフロー標準化: 業界標準となるプロセスの確立

🎯 まとめ

Figma MCPの構造化問題は、適切なツールの組み合わせにより解決可能でした。特にLayermateの活用により

• 再現率の改善: 8-9割の精度でデザイン再現が可能
• 開発効率向上: コード生成品質の向上で実装時間短縮
• チーム連携強化: 統一された命名規則でコミュニケーション改善

ただし、完璧な解決策ではなく、コストや学習コストといった課題も存在します。

現在のところ、このアプローチが最も実用的な解決策と考えていますが、技術の発展は早く、より良いソリューションが登場する可能性も十分にあります。

🤔 皆さんの現場では、どのような方法でFigmaとAIツールの連携を行っていますか？より効率的なワークフローやおすすめのツールがあれば、ぜひコメントで教えてください！

デザインとエンジニアリングの橋渡しは、まだまだ発展の余地がある分野です。一緒により良いソリューションを見つけていきましょう。🚀

また、Figma MCPに限らず、Coding Agent や AIを用いたイネーブルメント、改善に興味がある方、Figma MCPを活用してフロントエンドの実装をリードしていきたい方などいれば、是非カジュアルにお話しましょう！（転職を考えていない方も歓迎です！）
https://x.com/ryo_v2