Figma × AI にAIレディな作業環境の作り方を追加

舌の根も乾かぬうちにこもりです。

昨日「Figma × AI」講座のコンテンツを大幅刷新してリニューアルリリースしたばかりなのですが、Figma MCPを使ってAIでコーディングしようにも講座内のサンプルで試す以外に、自分自身でオリジナルの作業環境を用意したい方も多いかと思い、新たに付録として「MCP を実行する環境作り」という章を追加しました（動画本数10本、時間約40分）。

Viteを使った環境構築の仕方を解説しているだけでなく、各AIエージェントのためのガイドラインの追加方法、Figma MCPに用意されている「create_design_system_rules」の使い方は汎用的なルールとしてになりますがその追加方法も解説しております。自分がよく利用する作業環境のひな形作りの参考になれば幸いです。

→ Figma × 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）