figma-shaders

Par figma · mcp-server-guide

Skill opérationnel du repo figma/mcp-server-guide guidant Claude dans la création et la mise à jour de shaders (effets et fills) via le Figma MCP server.

npx skills add https://github.com/figma/mcp-server-guide --skill figma-shaders

Rôle du skill figma-shaders

Ce skill fait partie du repo officiel figma/mcp-server-guide, qui documente l'utilisation du Figma MCP server pour intégrer Figma dans les workflows d'agents IA. Le skill figma-shaders est un skill pleinement fonctionnel — et non un simple squelette — conçu pour être chargé par Claude avant tout appel aux outils create_shader ou update_shader du Figma MCP server.

Ce que couvre ce skill

Le skill définit deux types de shaders supportés par Figma : les shaders de type effect (qui transforment le rendu du calque sous-jacent, comme un flou, une distorsion ou un color grading) et les shaders de type fill (qui génèrent des pixels de manière procédurale, comme des dégradés, des textures ou des patterns). Il établit les règles strictes à respecter pour ne pas confondre ces deux types lors d'une mise à jour.

Workflows couverts

Le skill détaille trois workflows distincts : la création d'un shader (choix du type, résolution du planKey, appel à create_shader suivi obligatoirement d'un update_shader avec le main.ts final), la mise à jour d'un shader existant (lecture des sources actuelles via get_shader avant toute modification, remplacement complet du fichier main.ts), et les règles d'authoring pour écrire un shader WGSL correct (gestion de l'animation, des contrôles exposés, des métadonnées isAnimated et usesMouse).

Complétion et intégration Figma

Une fois le shader créé ou mis à jour avec succès, le skill prescrit à Claude de construire une URL cliquable permettant d'ouvrir directement un nouveau fichier Figma Design avec le shader prêt à tester, en utilisant l'identifiant retourné par l'API. Il propose également d'injecter le shader dans un fichier Figma existant si l'utilisateur le souhaite.

Ce skill est destiné à être utilisé dans des environnements MCP compatibles tels que Claude Code, Cursor ou VS Code connectés au Figma MCP server via https://mcp.figma.com/mcp.

Skills similaires