Better in English?
Better in English? Switch the website language for a better experience.
Lors de Config, Figma avait déjà surpris tout le monde en permettant de créer ses propres plugins génératifs et shaders simplement en discutant avec l'agent Figma. Une prouesse technique, certes, mais qui restait un peu figée : on générait un effet, on l'admirait, et c'est à peu près tout.
Avec cette nouvelle mise à jour, Figma passe à l'étape suivante. Concrètement, quatre nouveautés changent la donne :
Bonus non négligeable : les mises à jour du MCP server permettent désormais de faire évoluer vos plugins et shaders via un agent tiers, et surtout, quand vous copiez un frame avec des shaders appliqués vers un agent externe, le rendu React généré respecte fidèlement l'effet visuel. Fini les mauvaises surprises à l'implémentation.
On pourrait se dire : encore un effet visuel sympa pour épater en démo. Sauf que le vrai sujet ici, c'est le pont entre design et code. Jusqu'à présent, un shader généré dans Figma restait souvent une belle image fixe, sympathique à montrer en réunion, plus délicate à faire vivre une fois le projet transmis aux développeurs.
Le code viewer change cette équation. Un designer peut désormais générer un effet, le tester, l'animer, puis donner directement accès au code à son équipe technique. Plus besoin de deviner ou de recréer l'effet à la main : le code existe, il est consultable, téléchargeable.
La publication sur la Community, elle, joue un rôle différent mais tout aussi structurant : elle transforme chaque bon shader créé par un designer en ressource réutilisable pour toute la communauté Figma. Un peu comme les composants ou les plugins classiques, mais appliqué à des effets génératifs jusque-là réservés à quelques experts en création visuelle procédurale.
| Avant cette mise à jour | Après cette mise à jour |
|---|---|
| Shaders statiques, générés une fois | Shaders animés et réactifs à la souris |
| Effet visible uniquement dans le fichier | Publication Community ou organisation |
| Code invisible, à recréer manuellement | Code consultable et téléchargeable |
| Export vers du code parfois approximatif | Rendu React fidèle via le MCP server |
Imaginez un designer qui souhaite un fond animé légèrement réactif au survol sur une landing page. Avant, il aurait fallu solliciter un développeur créatif ou passer par des heures de tuning manuel en CSS ou WebGL. Aujourd'hui, l'agent Figma peut générer l'effet, l'animer, et transmettre un code exploitable presque directement.
Cela ne remplace pas l'expertise d'une équipe de développement, mais cela réduit considérablement l'aller-retour entre intention créative et faisabilité technique. Un vrai gain de temps sur les phases d'exploration, là où on perd habituellement le plus d'énergie à itérer entre design et dev.
Cette annonce s'inscrit dans une trajectoire assumée : faire de Figma non plus seulement un outil de design, mais une plateforme génératrice de code fonctionnel. Après Figma Make et les premiers agents capables de prototyper des interfaces, les shaders et plugins génératifs confirment cette ambition. Nous en avions déjà parlé à l'occasion des annonces de Config sur Figma Motion, les shaders et l'agent en bêta permanente, et cette mise à jour en est la suite logique et attendue.
{{webdesign}}
Chez Mazette.co, on utilise Figma tous les jours pour concevoir des interfaces avant de les faire vivre sur Webflow. Autant dire qu'on suit ces évolutions avec un œil très pragmatique : est-ce que ça nous fait gagner du temps, est-ce que ça améliore la qualité finale, ou est-ce juste une démo brillante qui reste dans un coin ?
Ici, on penche clairement du bon côté. Le code viewer, en particulier, nous semble être l'ajout le plus utile. Sur nos projets, on passe régulièrement du temps à recréer à la main des effets qu'on avait pourtant déjà "presque" designés dans Figma. Pouvoir accéder directement au code d'un shader, même s'il faudra souvent l'adapter à l'intégration finale, c'est un vrai raccourci.
La partie animation et interactivité des shaders nous parle aussi beaucoup, dans la mesure où c'est exactement le type de détail qui distingue une interface qui fait "joli" d'une interface qui fait vivant. On le disait déjà dans notre article sur l'art subtil de donner vie aux interfaces : le mouvement bien dosé change tout dans la perception d'un produit. Pouvoir générer ce type d'effet directement dans Figma, sans dépendre d'un développeur créatif dès la phase d'idéation, c'est un gain d'agilité qu'on ne va pas bouder.
Un bémol tout de même, et il est important : la fidélité du rendu généré reste à vérifier projet par projet. Un shader qui fonctionne bien en démo isolée peut se comporter différemment une fois intégré dans un vrai contexte de production, avec des contraintes de performance, d'accessibilité ou de compatibilité navigateur. Sur Webflow notamment, on reste vigilants sur le poids et la fluidité de ces effets, qui doivent rester au service de l'expérience et non l'inverse.
Reste que la direction prise par Figma est cohérente et, pour une agence comme la nôtre qui pousse ses maquettes jusqu'en production, plutôt réjouissante. Moins de friction entre design et code, c'est toujours une bonne nouvelle pour nos clients, qui obtiennent des sites plus rapidement, sans compromis sur la qualité. Si vous voulez voir ce que ce type d'outil peut apporter concrètement à votre projet, notre expertise Webflow est justement pensée pour transformer ces avancées en résultats visibles.
Code
Plus de 180 entreprises sont déjà sorties de l'obscurité à nos côtés.
Il suffit de demander à l'agent Figma de créer un effet de shader qui inclut du mouvement et qui réagit aux déplacements de la souris. L'agent génère le code du shader directement dans Figma, sans que vous ayez besoin d'écrire une ligne de code. Vous pouvez ensuite l'appliquer à un fill ou un effet sur vos calques.
Oui, Figma propose désormais un visualiseur de code qui permet de consulter et télécharger le code de n'importe quel shader ou de vos propres plugins génératifs. C'est un vrai changement : on passe d'un outil de prototypage fermé à une brique exploitable par des développeurs. Cela facilite grandement le passage du design à l'implémentation réelle.
La publication Community rend votre plugin ou shader accessible publiquement à tous les utilisateurs de Figma, un peu comme un plugin classique. La publication pour l'organisation reste privée et n'est disponible que sur les plans Organization et Enterprise, pour standardiser des effets ou outils en interne. Les deux répondent à des besoins différents : rayonnement externe versus cohérence d'équipe.
Titres percutants, meta descriptions soignées, sitemap, Schema.org, structure Hn, audits : ce sont les fondations SEO qui rendent votre contenu lisible par Google ET par les IA génératives. Nous couvrons les deux en même temps.
Avec plus de 180 clients, notre agence vous accompagne sur tous les sujets comme le webdesign sur mesure, les automations fines, la conversion et votre visibilité SEO et GEO.
Nous concevons des designs web sur mesure, orientés performance, parcours utilisateurs et conversion. Comme plus de 180 clients, faites nous confiance et élevez votre marque.
