# Figma Apply Effects

> Create, apply, remove, audit, and bind Figma Effects through MCP or Plugin API-compatible workflows. Use this skill when the user asks for shadows, inner shadows, layer blur, background blur, glow, glassmorphism, noise, texture, glass effects, progressive blur, effect styles, or effect variables/tokens on selected Figma nodes, while handling current Figma effect compatibility, runtime support, va…

- **Type:** Skill
- **Install:** `agentstack add skill-sergekostenchuk-ui-ux-agent-skill-system-figma-apply-effects`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sergekostenchuk](https://agentstack.voostack.com/s/sergekostenchuk)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [sergekostenchuk](https://github.com/sergekostenchuk)
- **Source:** https://github.com/sergekostenchuk/ui-ux-agent-skill-system/tree/main/core/skills/figma-apply-effects

## Install

```sh
agentstack add skill-sergekostenchuk-ui-ux-agent-skill-system-figma-apply-effects
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Figma Apply Effects

Use this skill for Figma Effects. It replaces the outdated rule that Figma supports only four effect types. Current Figma Plugin typings include shadow, blur, noise, texture, and glass effect families, but MCP/client support can lag behind typings, so advanced effects are runtime-gated.

## Modes

- `apply`: add one or more effects to selected nodes.
- `remove`: remove all effects or selected effect families.
- `style`: apply an existing Effect Style.
- `bind`: bind supported effect fields to variables.
- `audit`: inspect current effects and compatibility.
- `recipe`: translate visual language like glow, glassmorphism, soft elevation, grit, or texture into effect objects.

## Required Workflow

1. Confirm target node(s), visual intent, whether to replace or append effects, and privacy scope.
2. Invoke `figma:figma-use` before any `use_figma` call.
3. Read the selected node metadata first: `effects`, `fills`, style IDs, variable bindings, and current opacity.
4. If the user asks for an existing Effect Style, search/select that style first and apply the style if available.
5. If raw effects are needed, use [references/effect-compatibility.md](references/effect-compatibility.md) to choose the effect family.
6. For `BACKGROUND_BLUR`, check that the node has a visible fill with alpha below `1`; otherwise the blur will be visually hidden.
7. For glow, use a `DROP_SHADOW` recipe: bright color, `offset: { x: 0, y: 0 }`, larger radius, and low-to-medium alpha.
8. For variables, bind only supported fields. Shadow effects support `color`, `radius`, `spread`, `offsetX`, and `offsetY`; blur effects support `radius`; noise, texture, and glass effects currently do not support variable binding in Figma plugin typings.
9. Write the returned bound effect object back to the node's `effects` array.
10. Read metadata back and report exact effects, bindings, skipped fields, and visual caveats.

## Effect Families

Guaranteed core families when the runtime exposes standard Figma effects:

- `DROP_SHADOW`
- `INNER_SHADOW`
- `LAYER_BLUR`
- `BACKGROUND_BLUR`

Extended families to use only after runtime/tool compatibility is confirmed:

- `NOISE`
- `TEXTURE`
- `GLASS`
- Progressive blur variants inside blur effects.

## Safety And Evidence

- Do not claim an effect was applied until readback shows `node.effects` or the applied style ID changed.
- Do not overwrite existing effects unless the user asked to replace them.
- Do not claim variable binding for unsupported extended effect families.
- If MCP cannot express an advanced effect, report a manual Figma step or fall back to a core-effect approximation.

## Validation And Eval

- Verify readback: `node.effects`, style ID, and bound variables where available.
- Confirm that `BACKGROUND_BLUR` has a translucent fill path or report why the effect may not be visible.
- Use `evals/evals.json` to test glow append, glass blur radius binding, and unsupported extended-effect variable binding.

## Output Shape

Use [assets/effects-report-template.md](assets/effects-report-template.md).

## Resources

- Read [references/effect-compatibility.md](references/effect-compatibility.md) for effect fields and binding support.
- Read `$CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md` when current MCP capability is uncertain.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sergekostenchuk](https://github.com/sergekostenchuk)
- **Source:** [sergekostenchuk/ui-ux-agent-skill-system](https://github.com/sergekostenchuk/ui-ux-agent-skill-system)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sergekostenchuk-ui-ux-agent-skill-system-figma-apply-effects
- Seller: https://agentstack.voostack.com/s/sergekostenchuk
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.