概要
https://zenn.dev/sre_holdings/articles/2dc5eb4bf06630
詳細内容
## Figma MCPって本当にすごいの？
https://zenn.dev/sre_holdings/articles/2dc5eb4bf06630
Figma MCPはレスポンシブデザイン生成やスタイルの抽象的指示に強みを示すものの、複雑なデザインの忠実な再現には課題があり、効果的な活用には綿密なプロンプトエンジニアリングが不可欠であることを実証します。
**Content Type**: ⚙️ Tools
**Scores**: Signal:4/5 | Depth:3/5 | Unique:4/5 | Practical:4/5 | Anti-Hype:5/5
**Main Journal**: 78/100 | **Annex Potential**: 79/100 | **Overall**: 80/100
**Topics**: [[Figma MCP, デザインtoコード, AIエージェント, プロンプトエンジニアリング, レスポンシブデザイン]]
SREホールディングスのエンジニアが、FigmaのModel Context Protocol (MCP) とAIエージェント (Cursor) を用いたデザインからコード生成の実際の効果を検証します。世間の高評価とは裏腹に、その実用的な側面と限界を具体的に示している点が、ウェブアプリケーションエンジニアにとって重要です。
検証では、まずシンプルなウェブページをHTML/CSSに変換する際に、画像の読み込み失敗、配色ミス、不正確なalt属性の認識など、多くの初期課題が浮上しました。特に画像や図形が重なる複雑なデザインでは、AIの誤認識が頻発し、完全な再現には複数回の修正依頼が必要で、手動修正の方が早いと感じる場面もありました。この結果は、AIによるデザインtoコードがまだ「魔法の杖」ではないことを示唆しています。
しかし、Figma MCPの真価は別の部分で発揮されました。特筆すべきは**レスポンシブデザインへの対応力**です。px指定からviewportに合わせたvw変換や、スマホ用デザインが未作成でも自動でmedia queryを生成し、適切なレイアウト調整を行う能力は、工数削減の大きな可能性を秘めています。また、「和モダン風」といった抽象的な指示でデザインの雰囲気やレイアウトを変更したり、既存デザインを基にした新規ページ（フォームなど）に、指示していないバリデーションを自動で付加したりする機能も確認されました。
全体として、Figma MCPは、デザインの基盤となる部分やスタイル、レスポンシブ対応においては有用ですが、複雑な構造や多ページ構成を一括で高精度に生成するには、現在のところ課題が多いと結論付けています。効果的な活用には、生成単位を細かくする（コンポーネント単位など）こと、そして高度なプロンプトエンジニアリングとFigmaの正しい設計作法が不可欠であり、過度な期待をせず、実践を通じてその特性を理解することが重要だと提言します。