Figma × AI

komori.video Verified independent store

→

Figma × AI（アップデート） 「Figma Design - マスター編」のAIに関係するパートを単体商品化。 ※本商品は「Figma Design - マスター編」に含まれています。重複購入にご注意ください 2026年2月26日、大幅にコンテンツ内容を刷新して、AIレディな作業環境の作り方も新たに追加しました。LLMとMCP／AIエージェントの話と いったAIコーディングやFIgma MCPの概要から、Figmaファイル編集時の注意点、Figma MCPを使った基本的なコード生成の方法、コンテキストエンジニアリングの解説などを含んだコンテンツに加え、VSCode、Gemini、CaludeへのMCPサーバの追加方法も最新の手法にアップデート。MCPの追加方法だけでなく、Geminiの公式拡張機能コードアシストやClaude Codeの公式拡張機能を使い、VSCodeの画面から操作する方法も追加。 2026年2月に公開されたMCPの新ツール「Code to Canvas（generate_figma_design）」に加えて、2026年3月に追加で公開された「Write to Canvas（use_figma）」、コードからFigmaファイルを生成する双方のツールの解説動画も追加済（2026.03.27）。 本編ではVSCodeを中心に解説を進めておりますが、【番外編】としてAIエージェントの活用に特化した環境でも利用が始まる可能性を考え、「903. Claude Codeの導入」を追加しました。画面分割できるターミナルの紹介なども含んでおります（2026.04.30） AIエージェントを活用する内容として【番外編】パートに「904. スキルを使った自動化」を追加しました。最新の開発環境（React版／HTML版）の添付ファイルにエージェント向けのスキルを組み込んで、その中にあるスキルを解説する内容となっております（2026.05.27） --- Figma MCPと生成AIを使ってFigmaファイルを試そうにも、エディタをはじめ開発環境の用意が必要になってしまいます。そこで、GitHubのクラウド仮想環境である「Codespaces」を立ち上げて、エンジニア職以外の方もブラウザから仮想環境を使ってAIコーディングを試せるような解説は【番外編】として同梱しております。 ---※こちらはFigma内の解説やファイル操作だけではなく、テキストエディタ（VSCode）での操作や設定方法、実行操作も多く含まれます。※本商品の購入後、販売中の「Figma Design - マスター編」「Figma Design - パック」のいずれかを後日あらためて購入される際には、チェックアウト時にクーポンコード「V9SVZ972YJB8」をご利用いただくことで現在の販売価格分の値引きが適用されます。 動画本数: 101本総時間: 8時間13分（2026年5月27日現在） --- 公式LINEアカウントの新規友だち登録で10%割引のクーポンコード発行中。購入前の事前登録がお得です。https://lin.ee/EOgmkKQ 実際にFigma MCPを使ってコーディングしている様子はノーカットでYouTubeに掲載済FigmaファイルをAIコーディング（HTML + CSS）FigmaファイルをAIコーディング（React + Tailwind）--- 【各講座の無料プレビュー公開中】 Show more