東京地方はこのところだいぶ涼しくなっております。インフルなども流行っているようなので、皆様季節の変わり目は朝晩冷え込んだりするかと思うのでくれぐれもお気を付けください。と、季節のご挨拶はこれぐらいにして…。
Figmaが現在オープンβとして公開している「Figma MCP Server」の解説動画をマスター編の追加コンテンツとして登録しました（単体パッケージも販売開始↓）。
ここのところずっと話題の生成AI（LLM）ですが、お仕事の効率化や自動化で皆さんもお使いかもしれません。しかし、ChatGPTやGeminiのようなLLMだけを使って、Figmaから書き出した画像を登録してコーディングしても意図した通りにはならないのでは？
「Figmaで作ったデザインを意図した通りに、指定した技術スタックで実装できたら楽なのに…」という願いを叶えてくれるものが、この「Figma MCP Server」です。これまではFigmaアプリをインストールしてローカルのサーバを使うだけだったものが、2025年の9月末あたりからFigmaが公開するリモートのMCPサーバを使うことができるようになりました。また、Googleが公開している「Gemini CLI」からも利用することが可能です。
そんなわけで満を持してといいますか、最新の事情を踏まえて「LLMとMCPの関係、AIエージェント」の基本的な話から、実際にエディタにMCPサーバを登録する方法、FigmaのデザインをもとにAIが正しく内容を解析してコード化できるようなファイルの作り方、実際のプロンプトの指示の方法やカスタムのルールの作り方まで、まるっと1章分のコンテンツの追加です。1章分まるまるあるので50分程度のものになっております。
取り急ぎ、内容をピックアップしたプレビューをおいておきます。
せっかくなので、「こんなに楽になるよ」というのがわかるように、作成したFigmaのデザインから1回指示をあたえるだけで、時間にして3分程度、カップ麺にお湯入れて待っている間にコーディングがあらかた終わります。今回は、デフォルトの仕様である「React」を使わないで、シンプルでアクセシブルなHTMLとCSSのみを指定して意図した通りのレスポンシブなページになっていく様子を丸っと収録したものもYouTubeにおいてみました。
具体的な章の内容は以下になります。
```
10. 生成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）
```
正しい使い方で「生成AI × Figma MCP」を組み合わせて使えば、生成されるコードに大きな不満も出ず、圧倒的に生産性はあがるかも？と思うので（謎）、AIフレンドリーなFigmaのファイルを作ってMCPを使いこなして楽をしましょう。
既に「Figma Design - マスター編」ならびに「Figma Design - パック」をご購入いただいている方は、ご自身のアカウントにログイン後、注文の画面からアクセスできるマイページの「マスター編」から内容にアクセスしていただけます。
商品の購入は以下からお願いします。今、Figma Design関連の商品いずれかを購入いただくと、先日リリースした「Figma Sites 2025β版」の動画解説にも無料でアクセスできます。
Figmaの操作は既にだいたいわかっているという方も多いかと思うので、この1章分のコンテンツだけを抜粋した単体パッケージも販売開始しました（2025.10.17）
余談ですが、ここ最近はこもりのリソースが空いていますので、Figma関連問わず今ならお手伝いできることがあるかもしれません。