皆さん、こんばんは。
CSS Niteのセミナー「Figma MCPと生成AIを使った時短コーディング」に参加いただいた方に重ねてお礼申し上げます。ありがとうございました。
セミナーをやっていてもあらためて思ったのですが、Figma MCPを使ってAIコーディングを試そうにもエンジニア職以外の皆さんにとっては、エディタであったりNode.jsの作業環境を作るところが最初の壁になってしまうだろうなぁ…と常々考えており、「その壁を取り除くには、仮想環境を使えば良いじゃないか！」と数日後ふと思いつきました。
幸い時代も進んで、いまどきはブラウザから利用できる「GitHub Codespaces」のようなクラウド上の仮想環境があります。これを使えば、手元のマシンにエディタやらNode.jsをインストールすることなく、VSCodeの画面そのままのものをブラウザ内で表示し操作することができます。しかも、デスクトップで操作するのと何の違いもなく。これなら自宅でちょっと実験することもできます。
そこで、今回マスター編に含まれる「生成AI × Figma MCP」のパートに新たに下記の10本の動画（約40分）を追加しました（※単体販売分にも追加されています）。
---
環境不要! ブラウザで試そう - 39分14秒
- 環境構築いらずの仮想環境を使う（2:48）
- 無料のGitHubアカウントを作成する（6:29）
- 無料アカウントの制限（4:49）
- GitHub Codespacesについて（3:15）
- Codespacesの起動（4:48）
- 仮想環境の基本操作（5:22）
- Codespacesの終了操作と削除（2:20）
- サンプルファイルを実行するには（4:52）
- Figma MCPサーバの登録（2:35）
- まとめ（1:56）
---
GitHubのサイトは英語と日本語が混じり合うので、念のため無料アカウントの開設から設定画面の説明、無料アカウントで使う場合の制限事項、実際のクラウド仮想環境の起動方法からその使い方、Figma MCPの登録の仕方まで、とりあえず開発環境を作るよりははるかに楽に試すことができると思います。
繰り返しになりますが、こちらは「Figma Design マスター編（パック含む）」に含まれており、単体で販売中の「生成 × Figma MCP」からもご覧いただけます。
導入部分だけですが、無料の講座プレビューにもおいておきましたので是非ご覧ください
Figma Design マスター編のAIパートを単体商品に一本化します
ついでのお知らせというか、重ねてのお知らせです。
こちら好評頂いているマスター編の一部としてこのAIパートを追加していました。しかし、Figmaさんの機能更新や追加のペースを考慮すると、「Figma Design - マスター編」は純粋にFigma Designの機能だけに絞った方が、今後の更新コンテンツがバラバラになりにくいのでは？と考え、2025年12月15日以降マスター編に含まれているパートを取り除き、単体販売中の「生成AI × Figma MCP」にその役目を移行します。
既にマスター編（パック含む）をご購入いただいているお客様はもちろん、新たにマスター編をご購入いただいたお客様には、引き続きコンテンツがご覧いただけるように、既に単品販売商品の講座をマイコース内に表示しております。
Figma MCPを使ったりというのはどのみちFigmaのファイルが必要で、Designの延長線上にありますからマスター編の一部コンテンツであるという立ち位置に変わりはありません。マスター編の中に含まれず別の講座に同じものが移動するというだけですので、途中まで講座を進めていた方には突然のコンテンツ移動でご迷惑をおかけしますが、何卒ご理解のほどお願いいたします。
環境構築とか面倒くさいし…と思って躊躇していた方、是非お試しください。