「Figma × AI」講座の内容を大幅にアップデート

皆さん、こんにちは。しばらくぶりのこもりです。

2026年2月17日に公開された「Claude Code → Figma Design」のニュースに併せて、この度「Figma × AI」講座の内容を大幅に改訂しました。

もともとは「Figma Design - マスター編」の追加コンテンツの位置付けで用意した内容であったため、若干講座内容に継ぎ接ぎ感があったこと、また公開から半年足らずでいろいろな情報が新しくなったこともあり、前述のニュースを受けて講座全体の内容構成を見直し、2026年2月現在の最新の情報で講座をアップデートしました。

Figma MCP自体のアップデートもありますが、各種エディタやソフトへのMCPサーバの追加もプラグイン経由などで実行できるようになっています。GoogleのGemini 3.0は一般公開されており、これまでのような事前登録も不要、VSCodeの公式拡張機能である「Code Assist」経由で利用可能になっています。また、話題のClaude Codeもターミナルだけでなく、同じように公式の拡張機能を使ってVSCodeからも利用可能となっています。

AIにコーディングさせると古いバージョンの記述を持って来がちな「Tailwind CSS」も非公式ではありますがサードパーティー製のMCPサーバがあります。最新の仕様を参照したり、従来のCSSをTailwind CSSに置き換える機能などもあるので、そのMCPサーバの追加の仕方も併せて入れております。

Claude Codeを使ったFigma Designファイルへの変換についても、現段階でできることを中心に解説しました。現状まだコードのコンポーネントをそのままFigmaのコンポーネントにしたり、CSSの変数などを持って行ったりということはできません。今回発表され使えるようなった部分については正直まだまだかな？と思っていますが、AI界隈のアップデート速度は尋常ではないので、今現在できること以上のことがすぐにできるようになるのではないかと。

こちらの講座は単体販売もしておりますが、引き続き「Figma Design - マスター編」の講座をご購入いただくことでこちらも受講可能になっています。重複購入にご注意ください。

→ Figma × AI 講座
→ 講座の無料プレビュー

ということで、大幅刷新後の主なコンテンツは以下になっております。

---

101. 生成AIとFigma MCPの概要

  1. LLM、AIエージェントとMCP（8:43）
  2. Figma MCP でできること（3:32）
  3. 生成されるコード、技術スタック（3:07）
  4. MCPが使える環境を用意する（3:09）
  5. MCP Serverの追加方法（1:25）
  6. FigmaのデザインをAIに渡す（1:45）
  7. VSCodeでのコード生成デモ（3:54）
  8. より良い結果を得るFigmaの作り方（2:11）
  9. ルールとガイドライン（3:33）
  10. まとめ（2:16）

102. AIにも優しいFigmaファイル

  1. 繰り返す要素はコンポーネント化（11:58）
  2. 数値、書体、色などは変数で指定（6:58）
  3. レイヤーや要素はセマンティックに（7:23）
  4. 可変要素はオートレイアウトで丁寧に（7:55）
  5. 細かな指示はアノテーションを活用（4:45）
  6. プラグインで変数を一括登録する（10:43）
  7. サードパーティーアイコン付きのボタン（11:15）
  8. 文書構造を考慮したナビゲーション（9:09）
  9. コンポーネント作りに役立つプラグイン（7:39）
  10. まとめ（3:46）

103. Figmaからコードへ

  1. 出力結果はAIエージェント次第？（4:46）
  2. VSCodeを便利にする拡張機能とMCPの追加（10:46）
  3. GeminiへのMCP追加とVSCode拡張機能（6:42）
  4. ClaudeへのMCP追加とVSCode拡張機能（4:53）
  5. コード生成前に作業環境を用意しよう（2:21）
  6. 環境の仕様を伝えるガイドラインを作る（6:50）
  7. サンプルファイルを実行してみよう（3:57）
  8. Figmaファイルをコーディングしよう（8:32）
  9. Tailwind CSSのMCPサーバを追加する（4:09）
  10. 再実行とリファクタリング、まとめ（3:57）

104. コードからFigmaへ

  1. コードからFigmaファイルが生成できる？（1:10）
  2. Claude Codeとローカルサーバの準備（2:05）
  3. Claudeにプロンプトを入力してみよう（2:52）
  4. Figmaに変換するオプションの選択（1:50）
  5. 任意の要素を変換して保存する（1:18）
  6. 変換されたFigmaファイルを確認する（2:31）
  7. 修正済のフレームリンクをプロンプトへ（1:59）
  8. キャプチャスクリプトの除去（0:42）
  9. より効率よくコードを修正するには（2:05）
  10. まとめ（2:22）

105. コンテキストエンジニアリング

  1. うまくいってるのはAIの推論のおかげ？（10:54）
  2. 作っただけの画面 vs. 意図がわかる画面（9:21）
  3. エンジニアの思考: ReactとTailwind（10:26）
  4. コンポーネント＝お弁当箱の中身（11:47）
  5. バリアブル＝Tailwindの共通ルール（6:57）
  6. デザインを「構造」として捉え直す（4:10）
  7. オートレイアウトは「積み木」と考える（4:00）
  8. コンポーネント化で使える魔法「Props」（4:28）
  9. 命名規則とアノテーションはラブレター（3:53）
  10. まとめ（4:36）

901. 環境不要! ブラウザで試そう

  1. 環境構築いらずの仮想環境を使う（2:48）
  2. 無料のGitHubアカウントを作成する（6:29）
  3. 無料アカウントの制限（4:49）
  4. GitHub Codespacesについて（3:15）
  5. Codespacesの起動（4:48）
  6. 仮想環境の基本操作（5:22）
  7. Codespacesの終了操作と削除（2:20）
  8. サンプルファイルを実行するには（4:52）
  9. Figma MCPサーバの登録（2:35）
  10. まとめ（1:56）

---

さらにAIを使ってコーディングするための作業環境の作り方も追加

902. MCP を実行する環境作り

  1. 作成する作業環境について（1:34）
  2. Node.js のバージョン確認と更新（2:45）
  3. Vite で作業環境を用意しよう（7:51）
  4. Tailwind CSS の導入（8:36）
  5. アイコンライブラリを追加する（2:36）
  6. プロジェクトのドキュメントを整備する（6:43）
  7. Figmaのカスタムルールを追加する（2:59）
  8. FigmaをMCP経由でAIコーディング（2:41）
  9. ソフトウェアをアップデートする方法（3:04）
  10. まとめ（1:25）