---
title: Maker Collective Tokyo 2026 Oct - Komori
tags: 
author: [Masaaki Komori](https://www.docswell.com/user/gaspanik)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YE6WV1D1EV.jpg?width=480
description: Figma Japan主催「Maker Collective Tokyo 2026 Oct 」のDay 2、こもり登壇資料です。
published: October 21, 26
canonical: https://www.docswell.com/s/gaspanik/5VJNN3-2026-10-21-154052
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YE6WV1D1EV.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GE5MD43LE4.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/97298VZ3JR.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/DJY463R87M.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V7NYZVD9E8.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/YJ9PZ6G373.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GJ8D1ZVLJD.jpg)

02 / FIGMA MAKE & AGENT
DAY 2
違いは、キャンバスの文脈をどこまで背負わせられるか。
使い分けの重心
Figma Make
Figmaエージェント
主な重心
ゼロからの生成
ジェネレーション
キャンバス上の協調作業・実行
オーケストレーション
進め方
プロンプトから動くプロトタイプへ
アイデアを素早く探索
既存デザインの文脈を読み取り
制作途中の作業を進める
活用の焦点
0 → 1 を中心に

バックエンドまであつかえる
1 → 10 を中心に
新規作成もできる
今日の視点
アイデアを形にする
レイアウト再構成、命名ルール、トークンの整備・適用
生成できる領域は重なる。今日は、制作途中の手仕事にフォーカス。
Maker Collective Tokyo 2026
07 / 19


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LJLMQD5QER.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/47MY1PRK7W.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/P7R9L1R6E9.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PJXQWYRD7X.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/3JK9V3RDJD.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE3WMG8PE5.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/8EDK61M37G.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/V7PKYQRPJ8.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/2JVVG5RVJQ.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/5EGL86M1JL.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/4JQY94RN7P.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/K74WXQ83E1.jpg)

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