Figma Config 2026 : ce qui change vraiment pour un webdesigner freelance

Figma Config 2026 s'est tenue à San Francisco du 23 au 25 juin 2026, et Config India a complété les annonces en octobre. Cinq mois plus tard, la plupart des nouveautés sont en bêta ouverte : code layers, Figma Motion, shaders, outils Weave, plugins génératifs, agent avec skills et connecteurs. Les récaps en anglais listent tout. Peu disent à un webdesigner freelance ce qui change dans son travail, ce que ça coûte, et s'il faut revoir sa façon de livrer un site.

Ce point, arrêté au 4 novembre 2026 à partir de la documentation officielle de Figma, montre ce qui est vraiment disponible, puis, outil par outil, ce que tu peux en faire sur un projet client.

Les annonces de Figma Config 2026 en un tableau

Figma a présenté huit chantiers à San Francisco, puis cinq compléments à Config India. Voici leur statut au 4 novembre 2026, d'après le récap officiel de Dylan Field et le centre d'aide de Figma.

Restent annoncés sans date : l'agent dans FigJam et Figma Slides, les transformations 3D et les shaders interactifs.

Code layers : le code devient un calque de design

Un code layer est un calque Figma qui contient du vrai code, exécuté dans le canvas : c'est l'annonce centrale de Config 2026. Tu sélectionnes un frame, tu cliques sur « Build selection », et l'agent en fait une version interactive. Tu peux aussi partir d'un calque vide et d'un prompt, cloner un dépôt GitHub (branches et pull requests comprises), importer un dossier local ou capturer une page web avec l'extension Chrome.

Le sens inverse existe : tu extrais l'état d'un code layer en calques de design éditables, tu retouches, puis tu mets le code à jour en un clic.

Ce que ça change sur un projet client

• Le prototype qui convainc : un formulaire qui réagit, un onglet qui s'ouvre, un menu mobile qui fonctionne.

• Les allers-retours plus courts : le client commente directement le calque interactif dans le même fichier que la maquette.

• Le piège : un code layer n'est pas un site en ligne. Il n'y a ni hébergement, ni CMS que le client remplit seul, ni réglages SEO. Si ton client arrive avec ce genre de prototype, la méthode de notre article sur le brief client face à un prototype IA s'applique telle quelle.

Attention au coût : selon la FAQ tarifs de Figma, créer et modifier dans les code layers était gratuit sur les plans payants jusqu'au 4 novembre 2026. Ensuite, toutes les tâches liées aux code layers consomment des crédits IA, comme les autres fonctions de l'agent. Teste-les sur un vrai brief.

Figma Motion : valider l'animation avant de l'intégrer

Figma Motion ajoute une timeline dans Figma Design : keyframes, presets, et la possibilité de demander un point de départ à l'agent. Une animation posée sur un composant s'applique partout où ce composant est utilisé. En Dev Mode, la timeline est inspectable et l'animation se copie en CSS, JSON ou React. L'export vidéo couvre MP4, WebM, SVG animé et GIF.

Pour un webdesigner qui livre sur Framer, l'intérêt est la validation. Tu montres au client une micro-interaction en vidéo avant de passer du temps à la monter. Le montage final se fait ensuite dans Framer, avec ses effets natifs. Nous avons détaillé ce que l'IA sait faire côté Framer dans animations Framer avec l'IA : ce qui marche, ce qui rame.

Limite à connaître : Motion est réservé aux sièges Full, et la publication de composants animés, les animations générées par l'agent et l'export vidéo haute résolution demandent un siège Full payant.

Shaders, Weave, plugins génératifs : utile ou gadget ?

Les outils Weave et les plugins génératifs font gagner du temps chaque semaine à un webdesigner ; les shaders restent un usage ponctuel.

• Les outils Weave sont les plus utiles au quotidien. Changer le fond d'une photo produit, passer un visuel du 16:9 au carré ou transférer un style d'une image à une autre se fait dans ton fichier.

• Les plugins génératifs servent quand tu répètes la même tâche : renommer des calques selon ta convention, générer des variantes de boutons, vérifier des contrastes. Tu décris l'outil et ses réglages, l'agent le construit, sans toucher à l'API plugin.

• Les shaders donnent des textures (gradient map, effet risographie, particules) réglables sur le canvas. Joli pour un hero, mais un shader créé dans Figma ne passe pas automatiquement dans ton site : Framer a ses propres shaders, prévois de le recréer côté Framer.

Agent Figma, Specs et Guidelines : cadrer l'IA sur ton design system

L'agent Figma, réservé aux plans payants, a reçu trois ajouts à Config qui comptent pour un freelance. Les skills enregistrent tes consignes en instructions réutilisables : ta façon de nommer les calques, ta grille, ton ton de voix. Les connecteurs relient l'agent à Notion, Slack, GitHub ou Atlassian, et les pièces jointes lui donnent ton brief ou tes notes d'atelier. Attention : par défaut, les conversations avec l'agent sont visibles des collaborateurs du fichier. Passe-les en privé si ton client a accès au fichier.

Config India a ajouté deux briques. Specs met le contexte écrit (intention, contraintes, détails techniques) directement dans le fichier, pour l'équipe comme pour l'agent. Guidelines attache des règles à une librairie publiée pour que l'agent respecte tes patterns et évite les anti-patterns, sur les plans Professional, Organization et Enterprise. C'est la réponse au défaut principal d'un design system généré par IA, que nous décrivons dans générer un design system avec l'IA : les 6 corrections à faire.

Le serveur MCP de Figma, qui branche un agent de code sur tes maquettes comme Claude connecté à Framer le fait côté site, gagne aussi html_to_figma (HTML vers calques) et generate_image.

Crédits IA : ce que Config 2026 va te coûter

Les fonctions IA de Config 2026 puisent toutes dans un seul compteur de crédits IA, et les code layers y sont soumis après le 4 novembre 2026. Un siège Full sur le plan Professional reçoit 3 000 crédits par mois, un compte Starter 500. Le détail selon la FAQ tarifs :

Figma ne publie pas de coût fixe par action : la consommation dépend de la complexité de la tâche, et ajouter Payload à un projet Make coûte plus que de s'en passer. Seul sur un siège Professional, garde l'agent pour les tâches qui te font gagner une heure, pas pour des retouches que tu fais en deux minutes à la main. Si tu factures ces outils, notre article sur facturer un projet conçu avec l'IA explique comment le présenter au client.

Figma ou Framer pour livrer le site client ?

Pour un site vitrine ou une landing page, Figma sert à concevoir et Framer à livrer, même après Config 2026. Les code layers et Payload rapprochent Figma du code, mais la répartition reste nette :

• Figma sert à explorer, prototyper et valider : maquettes, code layers pour l'interactivité, Motion pour les animations, Weave pour les visuels.

• Framer sert à livrer : hébergement, CMS que le client édite seul, réglages SEO, formulaires, et un éditeur visuel qu'il comprend sans toi.

• Payload dans Make vise les applications avec comptes utilisateurs et base de données, un autre métier que le site vitrine.

Le vrai savoir-faire devient le passage de l'un à l'autre : ce que tu prépares dans Figma avec l'IA, et ce que tu reconstruis proprement dans Framer. C'est le parcours de la formation Framer de Frames Académie : elle enseigne le duo Figma et Framer avec l'IA, de la maquette au site livré.

Ce qu'il faut tester ce mois-ci, dans l'ordre

1. Les outils Weave sur les visuels de ton projet en cours : gain immédiat, peu de crédits.

2. Un skill d'agent qui contient tes conventions de nommage et ta grille : tu l'écris une fois, il sert sur tous tes fichiers.

3. Figma Motion sur une seule micro-interaction que tu enverras en MP4 au client pour validation.

4. Un code layer sur le composant le plus interactif de ta maquette, pour mesurer sa consommation de crédits avant de l'utiliser en rendez-vous client.

5. Guidelines, si tu as une librairie publiée et un plan Professional.

Laisse de côté pour l'instant Payload et les shaders, sauf besoin précis d'un client.

Les outils bougent vite : comment rester à jour sans tout tester

Entre juin et novembre 2026, les code layers sont passés de la liste d'attente à la bêta ouverte, Figma a ajouté Specs et Payload, et la gratuité des code layers a pris fin. Tu n'as pas besoin de tout essayer : il te faut un process stable (cadrage, maquette, prototype, intégration) dans lequel chaque nouvel outil vient remplacer une étape précise, ou rien.

Si tu veux ce process clé en main, avec Figma pour concevoir, Framer pour livrer et l'IA là où elle fait vraiment gagner du temps, découvre la formation Framer de Frames Académie. Tu passes ton temps sur les projets clients plutôt qu'à suivre chaque keynote.