Figmaの元データとコーディング指示を配布開始

お世話になっております(今回は季節の挨拶はなし)。

先日講座へ新規コンテンツとして追加、単品販売も開始した「生成AI × Figma MCP」の動画ですが、「Figma Design - マスター編」は10章の7に、「生成AI × Figma MCP 」の単品の方も7に、コーディング前のFigmaファイルのデータ(.fig)とVSCodeのCopilotへの指示(.md)、生成後のコーディングデータをダウンロードファイルとして公開しました。

Figmaのダッシュボードのインポート画面から「.fig」ファイルを読み込んで内容確認ができます。解説動画の内容とほとんど一緒ですが、ナビゲーションメニュー内部の構造とレイヤー名を少しだけ変更しています。

Figma中にはモバイル版の画面もドロップダウンの絵もいれていませんが、今回はAIが自らその部分を追加してコーディングしてくれました。5分ぐらいでこれができるんですから、使わない手はないですね。実際にコーディングされたHTML(修正なし)は以下においています。

https://jmtg.net/figmamcp/

(元のFigma)

(生成後のDesktopとMobileの表示結果)