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 仅支持四种效果类型)。当前 Figma Plugin 类型定义包含阴影、模糊、噪点、纹理和玻璃效果系列,但 MCP/客户端的支持可能落后于类型定义,因此高级效果受运行时门控。

模式

  • apply:向选中的节点添加一个或多个效果。
  • remove:移除所有效果或选定的效果系列。
  • style:应用现有的效果样式。
  • bind:将受支持的效果字段绑定到变量。
  • audit:检查当前效果和兼容性。
  • recipe:将光晕、玻璃拟态、柔和立体感、粗粝感或纹理等视觉描述转换为效果对象。

必需工作流

  1. 确认目标节点、视觉意图、是替换还是追加效果,以及隐私范围。
  2. 在调用任何 use_figma 之前,先调用 figma:figma-use。
  3. 首先读取所选节点的元数据:effects、fills、样式 ID、变量绑定和当前不透明度。
  4. 如果用户要求使用现有效果样式,先搜索/选择该样式;如果有,则应用该样式。
  5. 如果需要原始效果,请使用 references/effect-compatibility.md 选择效果系列。
  6. 对于 BACKGROUND_BLUR,检查节点是否具有可见且 alpha 小于 1 的填充;否则模糊效果在视觉上会被隐藏。
  7. 对于光晕,请使用 DROP_SHADOW 配方:明亮的颜色、offset: { x: 0, y: 0 }、较大的半径,以及低至中等 alpha。
  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