世間で言うところの夏休み明け、いかがお過ごしでしょうか。こもりです。
「KMRVID Figma Skills」を7月31日にリリースしてから2週間、新規スキルの大量追加や既存スキルの機能改善・強化に追われ、スキルの解説動画の更新が滞ってご迷惑をおかけしました。
リリース当初はスキル名をタイトルにした解説動画を用意しておりましたが、本日解説動画を利用シーンがイメージしやすいようなタイトルとスキルの使い方の内容に全面的にリニューアルしました。動画本数は大幅に増えて、計20本(総再生時間: 約1時間55分)のボリュームになりました。
※こちら「KMRVID Figma Skills」、それが同梱されている「KMRVID Claude Skills」の双方の内容を更新しています。
商品詳細ページにある無料プレビューにはほぼ全編の動画を公開中です。YouTubeでもご覧いただけるよういくつか動画をアップしております。プレイリスト作っておきました。

前半は主にFigmaのデザインエージェントを使った新規ページなどの生成寄り、中盤以降は既にあるFigmaのフレームなどのレイヤー名の変更やベタ打ちの値の変数化、コンポーネント化といった、手作業でやると大変面倒くさい作業を自動的に最適化するスキルの扱い方が中心となっております。
Figmaのデザインエージェントが生成した画面、皆さんが手動で制作した画面問わず、隅々まで最適化の手が行き届いてないファイルであっても、これらのスキルを使うことでコーディングエージェントが理解しやすくなるだけでなく、同じチームの実装担当のエンジニアの皆さんにわかりやすい、Figmaのファイルへと大変身です(面倒くさい手作業もなし、スキルを呼んで質問に答えるだけのお手軽さで)。
是非、ご活用ください。
以下、動画コンテンツの項目です。
---
Figma Design Agent 用スキル ver.20260818
- カスタムスキルの登録方法(3:56)
- ビジネス要件、デザイン要件を先に言語化(16:42)
- 見出しサイズをタイプスケールで設定する(5:22)
- 要件に合わせた1ページだけを作りたい(5:59)
- 複数のパターンでページを自動生成する(9:25)
- 文言だけを要件に合わせてリライト(7:44)
- LPやトップページに機能的演出をプラス(4:54)
- AI実装のしやすさをチェックする(4:18)
- 自動生成のレイヤー名を一掃する(8:49)
- ベタ打ちの色やサイズなどの値を変数化(6:56)
- 繰り返し要素を自動でコンポーネント化(9:24)
- レイヤー整理〜コンポーネント化を一発処理(2:42)
- 仕上げ済みファイルをさらに改善する(3:01)
- 画像のALTテキストをデザイン段階で提案(4:23)
- アノテーションを使って実装意図を書き残す(4:32)
- 読みにくい配色を公開前に見つけて修正(5:29)
- DESIGN.md のインポート/エクスポート(5:06)
- 複数のスキルを組み合わせで実行する(1:40)
- 既存のファイルに新しいページを追加する(2:40)
- カスタムスキルの作り方(2:31)