こんにちは。一番高い花粉症の目薬を買ったのに症状が全く出ない木曽原です。
様々な分野でAIが普及していますが、Web制作の現場でもその傾向は急激に浸透しつつあります。今回は少し前にX上で話題になったFigma MCPについて少し書いてみたいと思います。
Figma MCPとは
Figma MCPとは、FigmaのデザインデータをAI（LLM）が直接、かつ正確に理解できるようにするための仕組み（プロトコル）のことです。
「Model Context Protocol（MCP）」という、Anthropic社が提唱したAIと外部ツールを繋ぐ共通規格をFigmaに適用したもので、エンジニアがコードを書く際やAIエージェントがUIを実装する際の効率を劇的に高めます。
主な役割とメリット
従来のAI（ChatGPTやCursorなど）にFigmaのデザインを反映させるには、スクリーンショットを撮って読み込ませるか、手動でスタイルをコピー＆ペーストする必要がありました。Figma MCPを使うと、AIが直接Figmaの内部データにアクセスできるようになります。
- 正確な数値の取得: AIが「色（Hex）」「余白（Margin/Padding）」「フォントサイズ」などの詳細なパラメータをJSON形式で直接読み取ります。
- 構造の理解: オートレイアウトの構成やコンポーネントの親子関係を、AIがコードに近い構造として把握できます。
- デザインとコードの同期: 「このFigmaのボタンをReactコンポーネントにして」と指示するだけで、デザインに忠実なコードを生成できます。
- デザイントークンの活用: デザインシステムで定義された変数（Variables）をそのままコードに反映させることが容易になります。
「デザイン→実装」から「デザイン即実装」へ
これまでは、Figmaで作ったデザインをエンジニアが目視で確認し、コードに「翻訳」する作業が必要でした。
それが、Figma MCPでは「描いたものが、そのまま動く」。
デザイナーを「図面作成」から解放し、「ユーザー体験の設計」に専念させるための重要な鍵となります。
私もまだ少し触った程度なので、しっかりと使い込んだら、その感想をブログに書きたいと思います。
次回のENGAWA SALONは2月28日に開催
ENGAWA SALONでは、Canvaの操作だけでなく、参加者の質問に対しての疑問も大切にしています。
次回のENGAWA SALONは
2月28日（土）13:30〜17:00 松阪市公民館 にて開催予定です。
ぜひこちらからお申し込みください。
皆さまとお会いできるのを楽しみにしています！
