FigmaオフィシャルMCPでHTMLマークアップの自動生成

2025年7月13日 • ☕️☕️☕️ 16 min read

tl;dr
これまでのFigma-to-code自動化の試行錯誤
- 画像解析ベースのアプローチ
- 従来のFigmaプラグインの限界
Figmaオフィシャル MCP：救世主の登場
- MCPの革新的な特徴
実装手順：FigmaオフィシャルMCPの導入
運用上の注意点とベストプラクティス
高精度のマークアップ自動生成を実現
- 成功例：ECサイトの商品カード
- 成功例：フォームコンポーネント
フロントエンドエンジニアの役割変化
- 消滅しそうな業務
- 重要性が増す業務
Figmaデザインの整備が成功の鍵
Claude Sonnet 4の優位性
まとめ：フロントエンド開発の新時代
- 短期的な効果
- 中長期的な展望

フロントエンド開発において、デザインからマークアップへの変換作業は依然として時間のかかる反復的なタスクです。これまで様々なFigma-to-codeツールを試してきましたが、多くは精度に課題があったり、APIトークンの管理が煩雑だったりと、プロダクション環境での実用性に疑問を感じていました。そんな中、Figmaが公式にリリースしたMCP（Model Context Protocol）サーバーが、この問題を根本的に解決する救世主となりました。

tl;dr

FigmaオフィシャルDev Mode MCP Server + Claude Sonnet 4の組み合わせで、Figmaデザインからの高精度なマークアップ自動生成が可能になりました。デザインが多少雑（SP版とPC版が分離、命名ルールが曖昧、コンポーネント化不完全）でも、AIが忖度して綺麗なコードを生成してくれます。FigmaデスクトップアプリのSSE経由での接続なので、APIトークン漏洩の心配も不要。現在はbeta版ですが、高精度なマークアップ自動生成を実現し、フロントエンドエンジニアの簡単なマークアップ作業が変革される可能性を感じています。

これまでのFigma-to-code自動化の試行錯誤

画像解析ベースのアプローチ

最初に取り組んだのは、デザインのスクリーンショットをLLMに投げる方法でした。ChatGPT、Claude、V0などに「このデザインを再現して」と頼むパターンです。しかし、画像解析による制約で以下の課題が常に発生していました：

色の再現性の低さ: #FF5733のような具体的な色コードがtext-red-500のような汎用値に変換されてしまう
余白の不正確性: paddingやmarginがデザインと微妙に異なる
フォント指定の曖昧さ: 具体的なフォントファミリーやウェイトが正確に反映されない

結果として「それっぽい」ものは作れても、ピクセルパーフェクトな再現には程遠い状況でした。

従来のFigmaプラグインの限界

次に試したのがFigma to CodeやBuilder.ioのVisual Copilotなどのプラグインです。これらは確かにデザインデータに直接アクセスできるため、画像解析よりは精度が向上しました。しかし以下の問題が残っていました：

APIトークンの管理負担: サードパーティサービスにFigmaのAPIトークンを渡す必要があり、セキュリティ面での不安
プラグインの制限: Figma内で完結するため、コードエディタとの連携が煩雑
生成精度のばらつき: Auto Layoutを理解できずに固定サイズのコードを出力することが多い

特にAPIトークンについては、開発チーム全体での管理や定期的なローテーションなど、運用面での課題が大きかったのが実情です。

Figmaオフィシャル MCP：救世主の登場

そんな中、FigmaがオフィシャルにDev Mode MCP Server（Model Context Protocol）をリリースしました。このMCPサーバーは、FigmaのデスクトップアプリとAIエディタを直接接続する革新的なソリューションです。

MCPの革新的な特徴

現在beta版での提供 Dev Mode MCP Serverは現在beta版として提供されています。Professional、Organization、またはEnterprise planのDev or Full seatが必要となります。

Server-Sent Events（SSE）による安全な接続 FigmaデスクトップアプリからSSEでデザインデータを送信するため、APIトークンをサードパーティに渡す必要がありません。ネットワーク設定も不要で、ローカル環境での完結した連携を実現します。

リアルタイムデザイン同期 Figma上でデザインを変更すると、MCPサーバーがリアルタイムで変更を検知し、AIエディタ側に反映されます。デザインとコードの同期が格段にスムーズになりました。

Claude Sonnet 4との高い親和性 特にClaude Sonnet 4以上のモデルとの組み合わせで、驚異的な精度のコード生成を実現します。GPT-4やGeminiでは同等の精度は得られませんでした。

実装手順：FigmaオフィシャルMCPの導入

実際の導入手順を、公式ガイドを参考にしながら紹介します。

1. FigmaデスクトップアプリのMCPサーバー有効化

最新版のFigmaデスクトップアプリをダウンロードし、設定からMCPサーバーを有効にします：

Copy

# Figmaデスクトップアプリの設定
Figma menu > Preferences > Enable Dev Mode MCP Server

デフォルトではポート3845でサーバーが起動します。ファイアウォールの設定で3845番ポートがブロックされていないことを確認してください。

2. CursorへのMCPサーバー追加

CursorでSSE対応のMCPサーバーを設定します。設定ファイルでSSE URLを指定：

Copy

SSE URL: http://localhost:3845/sse

具体的な設定方法は、お使いのエディタの公式ドキュメントをご参照ください：

3. 実装フロー：SP版から始める

まずはスマートフォン版の1つのセクションを選んで実装を依頼します：

Copy

Figmaの[セクション名]を実装してください。
以下の要件でお願いします：
- Tailwind CSSを使用
- レスポンシブ対応は後から追加予定
- 既存のLayoutコンポーネントを活用
- 色コードはFigmaの値を忠実に再現

4. PC版対応によるレスポンシブ化

SP版の実装が完了したら、PC版の同じセクションを指定してレスポンシブ対応を追加：

Copy

先ほど実装したセクションに、PC版のデザインを参考にレスポンシブ対応を追加してください。
ブレークポイント：
- sm: 640px以上
- lg: 1024px以上

この段階的なアプローチにより、Claude Sonnet 4が両デザインの差分を理解し、適切なレスポンシブコードを生成してくれます。

運用上の注意点とベストプラクティス

既存コンポーネントの活用ルール

プロジェクトで既に使用しているLayoutコンポーネントやUI部品がある場合、明確にルールを定義します：

Copy

// 使用必須コンポーネントの例
import { Container } from '@/components/Layout/Container'
import { Grid } from '@/components/Layout/Grid'
import { Button } from '@/components/UI/Button'

// 新規実装では必ずこれらを使用すること

AIには以下のような指示を与えます：「実装時は既存のContainer、Grid、Buttonコンポーネントを必ず使用してください。新しいレイアウトコンポーネントは作成しないでください」

実装方針の明確化

コンテキストとして実装方針を明記することで、一貫性のあるコード生成が可能になります：

Copy

実装方針：
- CSS: Tailwind CSS 3.x
- コンポーネント: React + TypeScript
- 状態管理: なし（props drilling）
- スタイリング: className のみ、styled-components禁止

デザイントークンの厳密性

デザイントークンが定義されていないプロジェクトでは、AIが勝手に汎用値に変換してしまうことがあります：

Copy

/* 避けたい変換 */
color: #FF5733; → text-red-500

/* 期待する出力 */
color: #FF5733; → text-[#FF5733]

このため以下のような指示が重要です：「色コードは必ずFigmaの値を忠実に再現してください。text-gray-200のような汎用クラスには変換しないでください」

高精度のマークアップ自動生成を実現

実際にプロダクションで使用してみた結果、以下のような高い自動化率を実現できました：

成功例：ECサイトの商品カード

Before（手動実装）: 4時間

デザイン確認： 30分
HTML構造作成： 1時間
CSS実装： 2時間
レスポンシブ対応： 30分

After（MCP使用）: 30分

デザイン指定： 5分
AI生成+確認： 20分
微調整： 5分

成功例：フォームコンポーネント

複雑なバリデーション表示やエラーハンドリングを含むフォームでも、以下の精度を実現：

レイアウト: 100%自動化
スタイリング: 95%自動化（微調整必要）
レスポンシブ: 90%自動化
アクセシビリティ: 80%自動化（ARIA属性など）

フロントエンドエンジニアの役割変化

消滅しそうな業務

静的マークアップの手組み: HTMLとCSSを手動で書く作業
デザインカンプの目視確認: ピクセル合わせの細かい調整
レスポンシブブレークポイントの手動設定: メディアクエリの書き出し

重要性が増す業務

Figmaデザインの最適化: Auto Layoutの効果的な活用
デザインガイドラインの策定: コンポーネント化とシステム化
AIとの協働スキル: 効果的なプロンプト設計とコード検証

Figmaデザインの整備が成功の鍵

Claude Sonnet 4があれば、Figmaがしっかり整理されなくても動きますが、MCPの効果を最大化するには、Figmaデザインの品質が重要です：

Auto Layoutの徹底活用

Copy

推奨：Auto Layout + 相対値でのサイズ指定
非推奨：絶対位置指定 + 固定サイズ

Auto Layoutを使用することで、AIが要素間の関係性を理解し、適切なFlexboxやGridコードを生成してくれます。

命名規則の統一

Copy

良い例：
- Header/Navigation
- ProductCard/Image
- Button/Primary

悪い例：
- Frame 123
- Rectangle 45
- Group 67

明確な命名により、生成されるコンポーネント名やクラス名も意味のあるものになります。

コンポーネント化の推進

同じUIパーツは必ずFigmaでコンポーネント化することで、コード側でも再利用可能な形で生成されます。

Claude Sonnet 4の優位性

他のLLMとの比較検証では、明確な精度差が見られました：

Claude Sonnet 4

デザイン理解: ★★★★★
コード品質: ★★★★★
レスポンシブ対応: ★★★★★

GPT-4o

デザイン理解: ★★★☆☆
コード品質: ★★★☆☆
レスポンシブ対応: ★★☆☆☆

Gemini Pro

デザイン理解: ★★☆☆☆
コード品質: ★★☆☆☆
レスポンシブ対応: ★★☆☆☆

特にClaude Sonnet 4は、Figmaの階層構造やAuto Layoutの意図を正確に理解し、セマンティックなHTMLとモダンなCSS（FlexboxやGrid）を生成する能力に長けています。

まとめ：フロントエンド開発の新時代

FigmaオフィシャルDev Mode MCP ServerとClaude Sonnet 4の組み合わせは、フロントエンド開発に革命をもたらす可能性を秘めています。現在はbeta版での提供ですが、高い自動生成精度は十分実用レベルです。

短期的な効果

開発スピードの向上: マークアップ作業の大幅短縮
品質の向上: ピクセルパーフェクトな再現性
工数削減: 単純作業からの解放

中長期的な展望

フロントエンドエンジニアには、マークアップ技術者からデザインシステム設計者への役割転換が求められるでしょう。Figmaデザインの最適化スキルや、AIとの効果的な協働能力が差別化ポイントになると考えています。

Figmaを精通し、デザインガイドラインを整える力を身につけることが、AI時代のフロントエンドエンジニアに求められる新しいコアスキルかもしれません。技術の進歩と共に、私たちも進化し続ける必要があります。