Claude Code と Figma MCP を軸に、デザインとコードを往復しながら制作を進める一連の流れを、こもりまさあきさんに実践的に解説いただきます。
本イベントは有料イベントとして開催します。
無料での配信は行わず、お申し込みいただいた方のみに配信URLをお知らせします。
アーカイブはサブスク対象ですが、こもりまさあきさんの「Figma × AI」講座（7,700円）は付属しません。
これから始めるClaude Code 〜 Figma MCP編
本セッションでは、「Claude Code」を中心に、コードとデザインを行き来する実践的なワークフローを体験します。
前半は基礎固めのパートです。Claude CodeとClaude Desktopの違いを明確にしたうえで、基本操作・初期設定・プラグイン導入までを効率よく習得します。あわせて、スキルの概念やVS Code拡張との使い分け、効果的なプロンプト設計、CLAUDE.mdの構築・運用方法など、日常的に使いこなすための土台を整えます。
Claude Code と Claude Desktop との違い
Claude Code の基本操作と設定
Claude Code のプラグインを追加する
Claude Code のスキルとは
VSCode の拡張機能と使い分け
プロンプトで指示を与えよう
CLAUDE.md の作り方、育て方
後半は実践パートです。プロンプトによるコード生成・修正を起点に、コードからFigmaファイルを生成し、特定フレームを編集。さらにその変更をコードへ反映するという、双方向のループを実際の手順で確認します。サンドボックス環境の扱いや配布ファイルの使い方、思い通りに動かない場合のトラブル対処にも触れます。
配布ファイルについて
サンドボックスについて
プロンプトによるコード生成と修正指示
コードからFigmaファイルを作成する
Figmaの特定のフレームを編集する
修正したFigmaをコードに反映する
「言うことを聞かない、動きが怪しい」ときは
機能の紹介にとどまらず、「何を自動化できるか」「どこに人の判断が必要か」という視点も交えながら、実務への導入に向けた現実的なゴールを示します。
特典
本イベントには、こもりまさあきさんの「Figma × AI」講座...
プラットフォーム: techplay
関連タグ
関連タグ
関連タグ
関連タグ
