mcpField
F
figma-apply-effects

figma-apply-effects

github.com/sergekostenchukデザイン・UI3250 回インストール18 週間前に更新
リポジトリ

figma-apply-effects について

Figma のノードにエフェクトを適用、削除、スタイル設定、変数バインドし、監査するスキルです。高度なエフェクトのランタイム互換性を確認し、読み戻しで変更を検証します。

主な機能

  1. 01ノードへのエフェクト適用・削除
  2. 02既存 Effect Style の適用
  3. 03対応フィールドの変数バインド
  4. 04エフェクトと互換性の監査
  5. 05視覚的な意図のエフェクトへの変換

活用シーン

  1. 01選択ノードへのグロー追加
  2. 02既存 Effect Style の適用
  3. 03高度なエフェクトの対応状況確認
  4. 04シャドウやぼかしフィールドの変数バインド

MCP 対応

Figma MCP のワークフローを使い、`use_figma` の呼び出し前に `figma:figma-use` を実行します。高度なエフェクトの MCP 互換性を確認し、ノードのメタデータを読み戻して変更を検証します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-apply-effects

インストール後、Claude Code で/figma-apply-effectsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
effects-report-template.md
evals/
evals.json
references/
effect-compatibility.md

詳細

Figma エフェクトの適用

Figma のエフェクトを扱う場合は、このスキルを使用してください。Figma がサポートするエフェクトタイプは 4 種類のみという古いルールに代わるものです。現在の Figma Plugin の型定義には、シャドウ、ぼかし、ノイズ、テクスチャ、ガラスの各エフェクトファミリーが含まれていますが、MCP／クライアントのサポートは型定義より遅れる場合があるため、高度なエフェクトは実行時に対応状況を確認してから使用します。

モード

  • apply：選択したノードに 1 つ以上のエフェクトを追加します。
  • remove：すべてのエフェクト、または選択したエフェクトファミリーを削除します。
  • style：既存の Effect Style を適用します。
  • bind：サポートされているエフェクトのフィールドを変数にバインドします。
  • audit：現在のエフェクトと互換性を確認します。
  • recipe：グロー、グラスモーフィズム、柔らかな浮き上がり、ざらつき、テクスチャなどのビジュアル表現をエフェクトオブジェクトに変換します。

必須ワークフロー

  1. 対象ノード、ビジュアルの意図、エフェクトを置き換えるか追加するか、プライバシーの範囲を確認します。
  2. use_figma を呼び出す前に、figma:figma-use を呼び出します。
  3. 選択したノードのメタデータを最初に読み取ります。effects、fills、スタイル ID、変数のバインディング、現在の不透明度を確認します。
  4. 既存の Effect Style を求められた場合は、まずそのスタイルを検索して選択し、利用可能であれば適用します。
  5. 生のエフェクトが必要な場合は、エフェクトファミリーを選ぶために references/effect-compatibility.md を参照します。
  6. BACKGROUND_BLUR の場合、ノードに不透明度が 1 未満の可視フィルがあることを確認します。そうでないと、ぼかしが視覚的に隠れてしまいます。
  7. グローには DROP_SHADOW のレシピを使用します。明るい色、offset: { x: 0, y: 0 }、大きめの半径、低〜中程度のアルファ値を指定します。
  8. 変数については、サポートされているフィールドのみをバインドします。シャドウエフェクトは color、radius、spread、offsetX、offsetY をサポートします。ぼかしエフェクトは radius をサポートします。Figma Plugin の型定義では、ノイズ、テクスチャ、ガラスの各エフェクトは現在、変数のバインディングをサポートしていません。
  9. 返されたバインド済みエフェクトオブジェクトを、ノードの effects 配列に書き戻します。
  10. メタデータを再度読み取り、正確なエフェクト、バインディング、省略されたフィールド、視覚上の注意点を報告します。

エフェクトファミリー

ランタイムが標準の Figma エフェクトを公開している場合、確実に使用できるコアファミリー：

  • DROP_SHADOW
  • INNER_SHADOW
  • LAYER_BLUR
  • BACKGROUND_BLUR

ランタイム／ツールとの互換性を確認した後にのみ使用する拡張ファミリー：

  • NOISE
  • TEXTURE
  • GLASS
  • ぼかしエフェクト内のプログレッシブぼかしバリエーション。

安全性と根拠

  • 読み戻しで node.effects または適用されたスタイル ID の変更が確認されるまで、エフェクトが適用されたと主張しないでください。
  • ユーザーが置き換えを依頼していない限り、既存のエフェクトを上書きしないでください。
  • サポートされていない拡張エフェクトファミリーの変数バインディングを主張しないでください。
  • MCP で高度なエフェクトを表現できない場合は、Figma で手動操作する手順を報告するか、コアエフェクトによる近似を使用してください。

検証と評価

  • 読み戻しを確認します。利用可能な場合は、node.effects、スタイル ID、バインドされた変数を確認します。
  • BACKGROUND_BLUR に半透明のフィルがあることを確認するか、エフェクトが表示されない可能性がある理由を報告します。
  • evals/evals.json を使用して、グローの追加、ガラスのぼかし半径のバインディング、サポートされていない拡張エフェクトの変数バインディングをテストします。

出力形式

assets/effects-report-template.md を使用します。

リソース

  • エフェクトのフィールドとバインディングのサポートについては、references/effect-compatibility.md を参照してください。
  • 現在の MCP の機能が不明な場合は、$CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md を参照してください。

コメント

Markdown 対応