# figma-shaders

> Claude/Codex skill by [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars · Updated 2026-10-20

\*\*MANDATORY prerequisite\*\* — load this skill before calling \`create\_shader\` or \`update\_shader\`. Use when the user asks to create, author, change, fix, or iterate on a shader effect, shader fill, custom effect, custom fill, or procedural shader in Figma.

## Install

```sh
git clone https://github.com/figma/mcp-server-guide /tmp/mcp-server-guide && ln -s /tmp/mcp-server-guide/skills/figma-shaders ~/.claude/skills/figma-shaders
```

## From README

Create and update Figma shaders Load this skill before every createshader or updateshader call. It covers account-library shader authoring through the Figma MCP server. Reading or applying an existing shader does not require this skill. Shaders have two kinds: effect samples and transforms the rendered layer beneath it. Use it for blur, distortion, glow, color grading, pixelation, halftone, or other post-processing. fill generates pixels without an input raster. Use it for gradients, patterns, noise, textures, and procedural backgrounds. Do not silently switch kinds during an update. The kind passed to updateshader must match the existing shader. Create workflow Decide whether the request is an effect or fill. Ask only when the visual intent does not resolve the distinction. Resolve planKey. Reuse one supplied by the user; otherwise call whoami. Use the sole eligible plan automatically, or ask the user to choose when several materially different plans are available.

## Links

- HTML page: https://omgskills.com/library/figma/mcp-server-guide/skills/figma-shaders/
- GitHub: https://github.com/figma/mcp-server-guide
- Author: [@figma](https://omgskills.com/library/figma/index.md)

## More from this repo

- [figma-generate-design](https://omgskills.com/library/figma/dev-mode-mcp-server-guide/figma-generate-design/index.md) — Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section...
   - [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars
- [figma-use](https://omgskills.com/library/figma/dev-mode-mcp-server-guide/figma-use/index.md) — \*\*MANDATORY prerequisite\*\* — you MUST invoke this skill BEFORE every \`use\_figma\` tool call.
   - [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars
- [figma-code-workflows](https://omgskills.com/library/figma/mcp-server-guide/skills/figma-code-workflows/index.md) — Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or...
   - [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars