No.156

Transcript

1. 2025.08.06 KAWAMURA Figma Dev Mode MCP 試してみた 自動コーディングする仕組みって何？
2. M C P ( Model Context Protocol )とは AIと外部のデータソースやツールを接続するための標準的な プロトコルとして共通のインターフェースを提供することを目指している ▪MCPサーバー 外部へのアクセスを提供するプログラム MCPクライアントからのリクエストに応じて、必 要な情報を取得して返す ▪MCPクライアント AIが外部のデータやツールにアクセスする必要が ある際に、MCPサーバーにリクエストを送信 クライアント サーバー ↑↓ ← → ← → Figma クライアント VScode Copilot サーバー Dev Mode MCP claude Gemini chatGPT 外部 サービス MCP AI
3. FigmaのDev Mode MCPサーバーとは Figmaが提供するMCPサーバー 有効化すると、クライアントを担うアプリ（VS Code／Cursor／Claude Code） からFigmaのフレームやコンポーネントの構造／スタイル／テキストなどを アプリを通じてAIが直接取得できるようになる µ 現在のDev Mode MCPサーバーはオープンベータ³ µ Devまたはフルシートでのみ利用可‚ µ Dev Mode MCPサーバーはFigmaデスクトップアプリからのみ使用可‚ µ MCPサーバーをサポートするアプリケーションが必要（クライアント）
 (VS Code、Cursor、Claude Codeなどがサポートしている)
4. 実際に自動コーディングを試してみる Dev Mode MCPサーバーを使って FIgmaデザインデータをAIにコーディングさせてみる 使用するツール/デーq  Figmaのデザインデータ（Figma siteテンプレートを使用s  Figmaデスクトップアプリ（Dev Mode MCPサーバー設定済みs  Dev Mode MCPサーバー（MCPサーバーs  VScode（Copilot Chat設定済みs  GitHub Copilot Chat（MCPクライアントs  claude sonnet3.5　または　チャットGPT4.1（無料版）
5. 使用したプロンプト https://www.figma.com/design/xxxxxxxx 上記のURLを使用して以下の内容をおこなってください。
 重要: html/cssで作成してくださいs R デザインを正確に一致させるために、Figmaの忠実度を優先してくださいs R ハードコードされた値を避け、Figmaのデザイントークンが利用可能な場合はそれを使用してくださいs R アクセシビリティに関するWCAG要件に従ってくださいs R コンポーネントのドキュメントを追加してくださいs R cssをstyle.cssに配置し、本当に必要な場合を除き、インラインスタイルは使用しないでください。
6. カラーコードまとめなど土台作りに使えそう！ 複雑なデザインのコーディングはまだ不向きかも 有料版AIや他のMCPを組み合わせることで 精度を上げられる可能性もあるみたい 引き続き検証していきたい