figma-assets-manager について
Figma アセットの棚卸し、エクスポート、整理、監査、フロントエンドへの引き継ぎを行うスキルです。アセットマニフェストを重視し、範囲が定まらないデザインファイルの変更や未承認の外部転送を避けます。
主な機能
- 01アセットの棚卸しと監査
- 02選択ノードのエクスポート
- 03名前と寸法の整理
- 04フロントエンド用マニフェストの作成
- 05形式、倍率、用途の記録
活用シーン
- 01アセットとエクスポート要件の一覧化
- 02実装用アセットの準備
- 03不足または過大なアセットの特定
- 04エクスポート済みアセットのフロントエンドへの引き継ぎ
MCP 対応
Figma MCP を使ってアセットをエクスポートまたはダウンロードできます。Figma ツールを使う前に `figma:figma-use` を実行する必要があります。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/figma-assets-managerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/asset-manifest-template.jsonevals/evals.json詳細
Figma アセットマネージャー
アセットの抽出と準備には、このスキルを使用してください。汎用の画像生成ツールではなく、明示的に対象として指定されない限り、デザインファイルを変更しません。
モード
inventory：利用可能なアセットとエクスポートの要件を一覧表示します。export：指定されたノード／アセットを、要求された形式でエクスポートします。prepare：命名、密度、寸法、実装先を最適化します。handoff：フロントエンド統合用のマニフェストを作成します。audit：不足、サイズ過大、重複、アクセス不可のアセットを検出します。
ワークフロー
- 対象ノード、形式、スケール、想定するコードの配置先、プライバシー要件を確認します。
- Figma MCP によるエクスポート／ダウンロードが必要な場合は、Figma ツールの前に
figma:figma-useを呼び出します。 - アイコンやシンプルなベクターマークには SVG を、写真や複雑なビットマップメディアにはラスターフォーマットを優先します。
- アセットがサードパーティ製、またはブランドに関わる場合は、ライセンス／使用に関する前提を記録します。
- ソースノード、出力パス、形式、スケール、寸法、想定用途を含むアセットマニフェストを作成するか、作成を依頼します。
- フロントエンド統合では、エクスポート後に
webapp-ui-skillまたはmarketing-site-skillに引き継ぎます。
出力形式
assets/asset-manifest-template.json を使用するか、同じ項目を Markdown でまとめてください。
制約
- 明示的な承認なしに、プライベートアセットを最適化サービスや CDN サービスにアップロードしないでください。
- 実装先で必要とされない限り、編集可能な Figma ベクターをフラット化されたラスタアセットに置き換えないでください。
- フォントがウェブへの埋め込みを許諾されていると決めつけず、フォントやライセンスの確認漏れを報告してください。
検証と評価
- エクスポートにソースノード、形式、スケール、寸法、出力パス、想定用途が含まれていることを検証します。
- 承認済みの外部転送が記録されていない限り、プライベートアセットがローカルに保管されていることを確認します。
evals/evals.jsonを使用して、SVG エクスポートマニフェストの動作と、プライベートアセットの外部最適化を拒否する動作をテストします。
コメント
Markdown 対応