生成AI × Figma MCP

生成AI × Figma MCP

「Figma Design - マスター編」の追加コンテンツを単体商品化しました

2025年10月現在の最新の事情を踏まえ、LLMとMCPの関係、AIエージェントの基本的な話から、エディタにMCPサーバを登録する方法、FigmaのデザインをもとにAIが正しく内容を解析してコード化できるようなファイルの作り方、実際のプロンプトの指示の仕方やカスタムのルールの作り方まで、10本の動画にまとめました。

※こちらはFigma内の解説やファイル操作だけではなく、テキストエディタ（VSCode）での操作や設定方法、実行操作も多く含まれます。
※本商品は「Figma Design - マスター編」に含まれています。重複購入にご注意ください

動画本数: 10本
（2025年10月16日現在）

実際にFigma MCPを使ってコーディングしている様子はノーカットでYouTubeに掲載済
FigmaファイルをAIコーディング（HTML + CSS）
FigmaファイルをAIコーディング（React + Tailwind）
---

内容の紹介動画（YouTube）

【各講座の無料プレビュー公開中】

---

生成AIとFigma MCP

1. LLMとMCP、AIエージェント（5:53）
2. Figma MCP Serverでできること（4:20）
3. 書き出されるコード・技術スタック（2:18）
4. エディタ環境の用意（5:19）
5. エディタへのMCP Serverの追加（8:14）
6. より良い結果を得るFigmaの作り方（4:16）
7. VSCode ＋ Copilot でのコード生成（7:57）
8. Gemini CLI でのコード生成（6:42）
9. カスタムルールを追加する（6:26）
10. まとめ（3:47）