概要
https://zenn.dev/jambo_dev/articles/f383623d5cafd1
詳細内容
## FigmaMCP＋Cursorで直感的にUIを作成してみる🎨
https://zenn.dev/jambo_dev/articles/f383623d5cafd1
FigmaMCPとCursorを組み合わせることで、FigmaデザインからSwiftUIのUIコードを直感的に自動生成する具体的な手法を解説します。
**Content Type**: ⚙️ Tools
**Scores**: Signal:4/5 | Depth:3/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 81/100 | **Annex Potential**: 80/100 | **Overall**: 80/100
**Topics**: [[AIコーディング, UI自動生成, Figma, Cursor, SwiftUI]]
「FigmaMCP＋Cursorで直感的にUIを作成してみる🎨」は、Figmaで作成したデザインからSwiftUIのUIコードを自動生成する具体的な手法を解説する記事です。従来、デザイナーが作成したFigmaデザインを目視でコーディングする作業は多くの時間を要していましたが、FigmaMCPを介してFigmaとCursorを連携させることで、このデザインからコードへの橋渡しを自動化し、UI開発を大幅に高速化できると筆者は述べています。
特に「デザインからコーディングまでを一貫して行う」「ロジックよりも直感的にデザインを決めたい」「0-1で新しいViewを作ることが多い」といったWebアプリケーションエンジニアにとって、このワークフローは非常に有効です。具体的には、FigmaでデザインしたUIのリンクをCursorに渡し、シンプルなプロンプト一つでSwiftUIコードが生成される様子がLINE風トーク一覧画面の例で示されています。これにより、手動での実装では避けられない微調整や「やっぱりこうしたい」という修正が初期段階で減るとのことです。
設定にはFigmaの個人アクセストークンとNode.js、そしてCursorの`mcp.json`にFigmaMCPの設定を記述する必要があります。生成されるコードの品質は、Figma側でのAuto Layoutやレイヤー命名規則の統一に依存するといった注意点も挙げられています。また、AIエージェントへの情報提供は一度に多くせず、コンポーネント単位で絞り込むことや、Cursorでのノード変換ルールを事前に設計する「コンテキスト設計のコツ」も紹介されています。
UI実装の生産性向上に直結するツール連携であり、特にデザイナーがいない開発チームや迅速なプロトタイピングが求められる場面でその価値を発揮します。AIを活用した開発の新たな可能性を示唆しており、今後の進化にも期待が高まります。