figma-shaders
Installation
SKILL.md
Create and update Figma shaders
Load this skill before every create_shader or update_shader 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:
effectsamples and transforms the rendered layer beneath it. Use it for blur, distortion, glow, color grading, pixelation, halftone, or other post-processing.fillgenerates 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 update_shader 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 callwhoami. Use the sole eligible plan automatically, or ask the user to choose when several materially different plans are available. - Call
create_shaderonce with a concise name, description, selectedkind, andplanKey. This creates a starter scaffold, not the requested final shader. - Call
get_shaderwith the returnedid, then read every source URI. If the client cannot read MCP resources, callget_shaderwithincludeSource: trueinstead. This establishes the runtime imports and the scaffold's fixed metadata contract. - Author the complete replacement
main.tsfor the requested result. - Call
update_shaderwith the returnedid, the samekind,files: [{ path: "main.ts", content: "..." }], and a specificcommitMessage. Usemetadatawhen changing the name, description, or animation capabilities. Setmetadata.isAnimated: truewhen the source reads time-related frame inputs andmetadata.usesMouse: truewhen it readsframe.mousePosition.