FigmaMCP＋Cursorで直感的にUIを作成してみる🎨

初めまして！未経験でiOSエンジニアにジョブチェンジして約半年の五十嵐です🦑
元々はバナー制作や動画制作などクリエイティブ業務を主に担当していたため、それらの経験をエンジニアとして活かせないかと模索した結果、今回のFigmaMCP＋Cursorで直感的にUIを作成してみる🎨に辿り着きました！

弊社ではAIを活用したプログラミングが活発に行われているため、iOS開発にはXcodeと一部Cursorを使用しています👀

CusorでSwiftプロジェクト開発を行う場合はSweetPadという拡張機能を使用します。
SweetPadとXcodeBuildMCPを利用してCursorでiOS開発をする

こんな人におすすめです

デザインからコーディングまでを一貫して行う
ロジックよりも直感的にデザインを決めたい
PhotoshopやIllustratorなどAdobeソフトの操作に親しみがある
0-1で新しいViewを作ることが多い

Transcript

1.    Saika Igarashi  2025/08/19 FigmaMCP＋Cursorで 直感的にUIを作成してみる🎨 UIをもっと直感的に、速く・可愛く・スタイリッシュに仕上げる！
2.  自己紹介 未経験からiOSエンジニアへジョブチェンジして約半年の五十嵐です🦑 元々はバナー制作や動画制作などクリエイティブ業務を担当。  記事テーマ クリエイティブ経験をエンジニアとして活かせないかと模索した結果、 FigmaMCP＋Cursorで直感的にUIを作成する手法を見つけました！  こんな人におすすめ  デザインからコーディングまでを一貫して行う  ロジックよりも直感的にデザインを決めたい  Photoshopなど Adobe ソフトの操作に親しみがある  0-1で新しいViewを作ることが多い はじめに
3.  ワークフローの革新 FigmaMCPを選択し た理由 従来の方法 Figmaでデザイン作成 ↓ 目視でコードに書き起こし ↓ 手作業で調整 FigmaMCP＋Cursor Figmaでデザイン作成 ↓ 自動コード生成 ↓ 微調整のみ CusorでSwift開発を行う場合はSweetPadという拡張機能を 使用します。   デザインからコードへの橋渡し FigmaMCPを連携することで、 デザインからコードへの自動変換が実現 Figmaのノード情報を直接Cursorに渡 し、SwiftUIなどのコンポーネントを自動生成 (今回はCursorを使用した例で解説しますが、Claudeなどの使用も可能)  得られるメリット  工数の大幅削減 - デザインからコードへの変換を自動化  品質向上 - デザインの意図を正確にコードに反映  創造的な作業に集中 - 単純作業から解放
4.  Figma Figma（Dev Mode推奨）と個 人アクセストークンが必要です  Node.js 18+ Node.js 18以上のバージョンと npx が必要です  MCP対応エディタ 今回はCursorを使用します 前提条件
5. 1 Figmaにログイン Webブラウザ（またはアプリ版）で Figma.com にアクセスして アカウントにログインします 2 個人アクセストークンを取得 ［設定］→［アカウント］から［Personal access tokens］を 見つけて、新しいトークンを発行します 3 CursorのMCP設定 ルートディレクトリに .cursor/mcp.json を作成し、 APIキーを指定して連携を有効化します { "mcpServers": { "figma-mcp": { "type": "command", "command": "npx", "args": ["-y", "figma-developer-mcp", "--", "--figma-api-key", "${FIGMA_API_KEY}", "--stdio"] } } } セットアップ 手順
6.  実装フロー 1 Figmaでセルデザイン 2 デザインURLを取得 3 Cursorに渡す 4 コードを自動生成 5 UIを表示・調整  Figmaでのデザイン作成 セル部分のみを作成し、リスト表示はAIに任せる  「選択範囲へのリンクをコピー」でFigmaデザインURLを 共有  Cursorでの実装 FigmaのURLをCursorに渡し、実装指示を行う  たった1つのプロンプトで クオリティの高いコードを生成  実際にCursorの生成したコードはこちら 実践例：LINE風 トーク一覧画面
7.  効率的な使い方  一度にたくさんの情報を投げない — 情報量が多いと精度が下がります  要素ごとに細かく依頼 — ボタンやセルなどコンポーネント単位で分割 複雑なUIを一度に生成するよりも、個別の要素に分解して依頼することで、より高品質な結果が得られます  精度向上のポイント  Cursor Rules設計 — 事前にノード変換のルールを設定しておくと変換精度アップ  微調整はエディタ側で — 小さな修正はFigmaに戻るよりエディタで直接修正が効率的  プロンプトは具体的に、デザイン意図も伝えるとより良い結果に コンテキスト 設計のコツ
8.  デザインからコーディングまでの一貫開発が加速し、作業効率が大幅に向上！  「やっぱりこうしたい」という修正も柔軟に対応できるようになり、作業スト レスが軽減  可愛く＆効率的なUI実装を後押しする技術の進化に今後も期待！ 伸び代も大きいので今後の進化が楽しみです！ まとめ・今後の展望