Maker Collective Tokyo 2026 Oct - Komori

FIGMA AGENT / SESSION DAY 2 手仕事からの解放！ Figmaエージェントを 使いこなす Free Yourself from Manual Labor! Mastering the Figma Agent Maker Collective Tokyo 2026 | Masaaki Komori 01 / 19

ABOUT ME DAY 2 こもりまさあき Masaaki Komori 1990年代前半、都内のDTP系デザイン会社で 入出力・デザイン・ネットワーク関連業務に従事。 2001年に退職して以降、何でも系フリーランス25年 近年は複数のプロジェクトに参画しながら、 Figmaの研修、企業のデザインシステム構築、 コンサルティングなど、幅広く活動中 Web制作関連書籍の執筆／監修多数 Unsplashの全アカウント中で閲覧数上位500人の1人 2026年から https://kmrvid.com/ https://kmrvidskills.dev/figma/ Maker Collective Tokyo 2026 今すぐジョイン可 リソース空きあり AIネイティブなワークフローへの移行と、 効率化のためのエージェントスキルを開発・販売 https://x.com/cipher/ https://instagram.com/cipher 02 / 19

• https://kmrvid.com/
• https://kmrvidskills.dev/figma/
• https://x.com/cipher/
• https://instagram.com/cipher

SESSION / OVERVIEW DAY 2 Agenda 01 Figmaエージェントって何？ 解説 まずはエージェントを知り、 デモでその可能性を探ろう 02 Figma Makeとの違い 解説 03 Figmaエージェントでできること デモ 04 プロンプトを使った新規作成と修正指示、注意点 デモ 05 エージェントパネルとカスタムスキル デモ 06 カスタムスキルの登録と実行 デモ 07 まとめ まとめ Maker Collective Tokyo 2026 03 / 19

SESSION / CHAPTER 01 DAY 2 Figmaエージェントって何？ An assistant that understands your canvas Maker Collective Tokyo 2026 04 / 19

01 / FIGMA AGENT DAY 2 キャンバスやライブラリ、ガイドラインの文脈を理解し、 私たちデザイナーと一緒に手を動かしてくれる 自律型のアシスタント 自然言語で新規作成・修正・再配置・最適化のタスクを指示すれば、構造を読み取り実行する CONTEXT 選択中のフレーム オートレイアウト コンポーネント ライブラリ ガイドラインなど 私たちがディレクター。エージェントは有能なアシスタント。 Maker Collective Tokyo 2026 05 / 19

SESSION / CHAPTER 02 DAY 2 Figma Makeとの違い Generation and orchestration Maker Collective Tokyo 2026 06 / 19

02 / FIGMA MAKE & AGENT DAY 2 違いは、キャンバスの文脈をどこまで背負わせられるか。 使い分けの重心 Figma Make Figmaエージェント 主な重心 ゼロからの生成 ジェネレーション キャンバス上の協調作業・実行 オーケストレーション 進め方 プロンプトから動くプロトタイプへ アイデアを素早く探索 既存デザインの文脈を読み取り 制作途中の作業を進める 活用の焦点 0 → 1 を中心に
 バックエンドまであつかえる 1 → 10 を中心に 新規作成もできる 今日の視点 アイデアを形にする レイアウト再構成、命名ルール、トークンの整備・適用 生成できる領域は重なる。今日は、制作途中の手仕事にフォーカス。 Maker Collective Tokyo 2026 07 / 19

SESSION / CHAPTER 03 DAY 2 Figmaエージェントで できること Explore through making Maker Collective Tokyo 2026 08 / 19

03 / POSSIBILITIES LIVE DEMO DAY 2 Figmaエージェントでできること 01 コンテキストを渡して、新規作成〜修正、最適化まで 02 「こういうことはできる？」と聞いてみよう 03 エージェントへの依頼は、並列で同時に実行可能 Maker Collective Tokyo 2026 09 / 19

SESSION / CHAPTER 04 DAY 2 プロンプトを使った 新規作成と修正指示、注意点 Create, refine, verify Maker Collective Tokyo 2026 10 / 19

04 / PROMPTING LIVE DEMO 01 生成AIなので、雑な依頼＝残念な結果 02 詳細なコンテキストを渡せば、最終成果物の精度は上がる 03 エージェントが適当に仕事する？ → 対処法あり Maker Collective Tokyo 2026 DAY 2 新規作成 / 修正指示 11 / 19

SESSION / CHAPTER 05 DAY 2 エージェントパネルと カスタムスキル Agent panel and custom skills Maker Collective Tokyo 2026 12 / 19

05 / PANEL & SKILLS LIVE DEMO 01 エージェントパネルの全体像 02 入力エリア、コンテキストの追加方法 03 繰り返すタスクは、プロンプトよりカスタムスキル Maker Collective Tokyo 2026 DAY 2 エージェントパネル / カスタムスキル 13 / 19

SESSION / CHAPTER 06 DAY 2 カスタムスキルの登録と実行 Register and run Maker Collective Tokyo 2026 14 / 19

06 / REGISTER & RUN LIVE DEMO DAY 2 スキルの登録 / 実行 01 Figmaコミュニティでは、既に数多くのAIスキルが公開中 02 オリジナルのカスタムスキルこそ、エージェントに相談しよう 03 スキルは複数をパイプライン（連続）実行することもできる Maker Collective Tokyo 2026 15 / 19

SESSION / CHAPTER 07 DAY 2 まとめ Take back time for creative decisions Maker Collective Tokyo 2026 16 / 19

07 / TAKEAWAYS 01 02 03 DAY 2 適切にコンテキストを渡す。大事 手仕事はとりあえず一回任せてみよう 繰り返すタスクはスキルにして実行 時間は有限。あなたがやるべき仕事に時間を取り戻そう Maker Collective Tokyo 2026 17 / 19

APPENDIX / FIGMA SKILLS DAY 2 手作業から解放されるスキルを実際に使ってみる コミュニティで公開中のスキル 10本 https://www.figma.com/@masaakikomori hey-polish-me 原本を残してデザイン改善案を作成。コンパニオンスキル対応 i18n-translator 言語別に複製・翻訳し、実装前のレイアウトを確認。インスタンス内も対象 slot-table-maker 固定ヘッダー＋可変データ行のスロット式テーブルを生成。.xlsx貼り付け対応 tidy-up オートレイアウト・レイヤー名・スペーシングを整理して再構築 weather-audit AIコーディングへの準備度を4観点で採点し、改善点を報告。詳細表示あり エージェントが実際の画像を確認し、具体的なALTテキスト案を提案 Google Spec準拠の DESIGN.md と変数・ローカルスタイル・コンポーネントを双方向同期 完成デザインから、コーディングエージェント向け実装プロンプトを生成 会話を引き継ぎ文書にまとめ、新しいチャットへ継続 作業開始時や入念に進めたいときの、エージェント行動ガイド alt-suggest design-md coding-prompter agent-handoff hey-be-careful 公開10本は単独で動作。一部は機能限定、または他スキルとの組み合わせで機能を拡張。多言語版なので事前に少し日本語を入力してね Maker Collective Tokyo 2026 販売中 KMRVID Figma Skills 全30本 v v / https://kmrvidskills.dev/en/figma/ 公開10本を含む全30本（日本語／多言語）。 複数スキルの組み合わせや、 パイプラインでの連続実行に対応。 実務利用に加え、オリジナルスキルの土台、 高度化の参考としても利用可能。 KMRVID Claude Skillsも提供 Figma MCPを介し、コーディングエージェント から同等の操作が可能。 https://kmr idskills.de /figma Maker Collective Tokyo 2026 登壇記念 🎉 mct2026 で特別価格 販売サイトのチェックアウト時に入力してください。
 Claude版／Figma版スキルのパッケージが対象です。 期限：2026年10月28日23:59まで コード 18 / 19

• https://www.figma.com/@masaakikomori
• https://kmrvidskills.dev/figma/
• https://kmrvidskills.dev/en/figma/

APPENDIX / FIGMA MCP × AGENT SKILLS DAY 2 エンジニアさんは、Figma MCPを使ってチェック＆実装 Agensi.io に掲載中のコーディングエージェント用スキル 30本 https://www.agensi.io/creators/masaaki-komori フレーム／セクションを走査し、コントラスト比をチェックしてレポート（WCAG AA） Contrast Check (Lite) 上記Lite版の機能に加え、Figmaの自動修正にも対応（WCAG AA/AAA） Contrast Check Figma AI-Readiness Audit フレームのAI実装精度を4観点で検査してレポート出力。改善点などをレポートで出力 オートレイアウト・レイヤー名・スペーシングを整理して再構築 Figma Tidy Up フレーム／セクション全体を走査し、自動生成レイヤー名を意味のある名前にリネーム Figma Layer Rename ベタ打ちで指定された色、フォントサイズ、スペースなどをトークン化して変数バインド Figma Tokenize 繰り返し要素等を検出し、コンポーネント化＋バリアント生成を確認を挟んで実施 Figma Componentize 整備済のファイルを監査（バリアント統合・プロパティ追加・バインド漏れ等）し実装 Figma Enhance 上記5タスク（Tidy Up〜Enhance）から実行したいものを選択し依存順に自動実行 Figma Optimize 実装済みコードをFigmaに書き出し（キャプチャ〜コンポーネント生成まで4段階） Code to Figma Agensi.io に掲載中のスキルは「KMRVID Claude Skills」に含まれます。有償スキルも無料で3回までお試しいただけます。 Maker Collective Tokyo 2026 販売中 KMRVID Claude Skills 全48本 https://kmrvidskills.dev/claude/ https://kmrvidskills.dev/en/claude/ 全48本（日本語／多言語）。 環境構築からモックアップ作成、
 Figma MCP経由での連携〜コードの実装、
 仕上げの品質チェックまで、
 Web制作のワークフローを一通りカバー。 こちらもFigma版スキル同様、
 実務利用に加え、オリジナルスキルの土台、 高度化の参考としても利用可能。 Maker Collective Tokyo 2026 登壇記念 🎉 コード mct2026 で特別価格 販売サイトのチェックアウト時に入力してください。
 Claude版／Figma版スキルのパッケージが対象です。 期限：2026年10月28日23:59まで 19 / 19

• https://www.agensi.io/creators/masaaki-komori
• https://kmrvidskills.dev/claude/
• https://kmrvidskills.dev/en/claude/