Introduction : la plus grosse mise à jour de l'histoire de Figma
La première journée de la Config 2026 s'est achevée sur une effervescence rare au Moscone Center, où plus de 10 000 designers ont assisté à une keynote qui redéfinit les contours du métier. Entre l'animation qui devient native, le code qui s'invite sur le canevas et un agent IA connecté à tout notre écosystème, la frontière entre la conception visuelle et le produit fini n'a jamais été aussi fine. Nous avons croisé trois lectures de l'événement — le deep-dive officiel de Figma, le décryptage d'un praticien et un récap exhaustif — pour en tirer l'essentiel, sans le bruit.
Code Layers : le design et le code réunis sur le canevas
La nouveauté la plus structurante s'appelle Code Layers. Le code n'est plus une sortie finale reléguée à une fenêtre séparée : il devient un matériau de création à part entière, au même titre qu'un vecteur ou une image. Nous dupliquons un calque, nous le transformons en code interactif d'un simple prompt via Figma Make, et nous explorons plusieurs directions fonctionnelles côte à côte, exactement comme avec des cadres de design classiques.
Un aller-retour design ↔ code
Le contrôle créatif total passe encore par une étape de conversion : on transforme le calque de code en calque de design pour ajuster chaque détail, puis on renvoie le tout vers le code. Le flux reste perfectible, mais il réhabilite le rôle de design engineer en supprimant la friction de la passation technique :
- absence de contrôle direct → conversion en calque de design
- ajustement des propriétés → synchronisation retour vers le code
- duplication → exploration de plusieurs variantes fonctionnelles
GitHub comme source de vérité
L'ouverture vers GitHub change la donne pour les équipes produit : on importe un dépôt, on l'affiche en iframe sur le canevas, on édite, et on renvoie une Pull Request sans quitter l'outil. Cette logique prolonge ce que nous observions déjà avec Figma Make et le passage de la maquette au produit. Les Code Layers sont annoncés pour juillet ; c'est la brique à surveiller de près.
Figma Motion : l'animation devient native
Pendant des années, animer sur Figma imposait de multiplier les outils tiers. Avec Figma Motion — fruit de l'acquisition de Motion — nous disposons enfin d'une véritable timeline intégrée, en bas de l'écran, sans jamais quitter le fichier source. Ce n'est plus la transition de prototypage d'antan : c'est de la gestion de mouvement professionnelle, accessible à tous les niveaux.
Timeline, images clés et easing
Chaque propriété animable est flanquée d'une icône de diamant pour poser une image clé. Le gizmo Mo nous permet de manipuler les trajectoires directement sur le canevas, tandis que les réglages d'easing (ease-in, courbes personnalisées, overshoot élastique) chassent l'aspect mécanique de l'animation linéaire. Le mode auto-key enregistre automatiquement chaque modification, et une bibliothèque de presets (slam, fade, entrées/sorties) permet de donner vie à une interface en quelques secondes.
Des propriétés avancées, pas seulement du déplacement
La vraie richesse se joue au-delà de la position. Le path trim fait apparaître un tracé progressivement (parfait pour un loader ou une illustration qui se dessine), les propriétés d'arcs animent jauges et graphiques circulaires, et le morphing par nombre de points transforme une forme sous nos yeux :
- passage de 4 à 6 points → création d'un engrenage
- ajustement de l'angle → rotation fluide
- modification du rayon → pulsation organique
Variables de mouvement et design systems
Le mouvement entre au cœur des systèmes de design grâce aux variables d'easing et de timing, centralisées sur tout un projet. Les modes de variables (standard, expressive, smooth) adaptent le rythme au contexte sans dupliquer les composants, et l'héritage des composants propage un changement à toutes les compositions animées. C'est la cohérence d'un design system, appliquée à l'animation.
De la timeline au code de production
Rien ne se perd au passage en production : export MP4, WebM, GIF ou SVG animé jusqu'en 4K/60 FPS, un Dev Mode en lecture seule pour inspecter timings et courbes, et surtout une génération de code (CSS, React Motion, JSON) fidèle aux intentions d'animation. De quoi reconsidérer nos allers-retours avec des outils comme l'export Lottie depuis Figma.
Figma Agent : l'IA contextuelle et les connecteurs MCP
L'agent de Figma passe du statut de simple barre de recherche à celui d'assistant contextuel branché sur tout notre écosystème. Il ingère des fichiers de tous formats et, surtout, se connecte à l'extérieur.
Des connecteurs pour un cerveau global
Via le protocole MCP, les connecteurs relient Figma à GitHub, Slack, Notion ou Marvin : l'agent va chercher une spécification dans un dépôt ou un document de recherche et l'applique au design en cours, sans changer d'onglet. On peut créer des skills réutilisables et choisir la confidentialité de chaque conversation (privée pour l'exploration personnelle, partagée pour l'itération d'équipe). Sur le mouvement, l'agent génère aussi des variantes d'entrée/sortie et assemble des séquences isolées en une timeline cohérente — il élimine la corvée, pas l'œil critique.
Plugins génératifs et shaders : le « vibe coding » entre dans Figma
Avec les generative plugins, on ne demande plus à un développeur de créer l'outil dont on a besoin : on le génère soi-même. C'est le début du « vibe coding » appliqué au design, dans l'esprit de ce que Raycast propose avec Glaze. Autre avantage décisif : une fois construit, le plugin ne consomme plus de jetons, et il voyage avec le fichier partagé au client.
- création manuelle de grilles → génération automatique de Bento grids
- besoin récurrent → prompt de création → exécution illimitée
- vérification de contraste, organisation de fichiers → plugin dédié à la volée
Shaders : le canevas prend vie
Les shaders, déjà familiers sur Framer ou Paper, arrivent pour manipuler les pixels du canevas : effets de verre, textures dynamiques, dégradés qui respirent. On empile les couches, on les mélange via des modes de fusion, et on les anime avec la timeline pour un rendu organique. Figma s'aligne enfin sur les standards de la publication web moderne.
Ce que révèlent les trois lectures de la keynote
Les trois vidéos convergent, mais éclairent des facettes différentes — et c'est instructif. Le deep-dive officiel de Figma se concentre sur la mécanique de Motion : keyframes, easing, propriétés avancées, variables. Le décryptage praticien (Ryan Hayward) recadre tout autour du « vibe coding » et du designer full-stack, avec un parallèle assumé à l'époque où Webflow promettait de publier sans coder. Le récap exhaustif (AI-Design Professor) insiste, lui, sur les connecteurs MCP et sur Figma Weave pour orchestrer les flux de travail. Trois angles, une même thèse : la frontière design ↔ mouvement ↔ code s'effondre, et le designer devient l'éditeur autonome d'un produit fini.
Faut-il s'y mettre maintenant ?
Figma Motion est en bêta, l'Agent est réservé aux plans payants, et les Code Layers arrivent en juillet — la prudence reste de mise pour la production critique. Mais l'expérimentation, elle, n'attend pas : Motion pour les micro-interactions, l'agent pour les tâches répétitives et les plugins sur-mesure pour votre workflow sont accessibles dès aujourd'hui. Le plus gros risque n'est pas d'essayer trop tôt, c'est de laisser filer l'écart de productivité que ces outils creusent déjà entre les équipes.
Conclusion : un métier en mouvement perpétuel
La Config 2026 confirme une mutation plus qu'une simple mise à jour. En réunissant le design, l'animation et le code sur un seul canevas, Figma nous fait passer de créateurs d'images à éditeurs de produits. Reste la constante qui fait la valeur du designer : l'intention. Les outils accélèrent tout — le mouvement, le code, la génération — mais c'est toujours notre regard critique qui décide de ce qui mérite d'exister à l'écran.
Liens pratiques
Cet article de synthèse est basé sur les vidéos :
- Figma deep dive: Motion | Config 2026 (chaîne officielle Figma)
- Figma Motion, Code Layers & More! — Config 2026 (Ryan Hayward)
- Figma Config 2026 Updates: Code Layers, Motion, Weave, Shaders, Plugins & More! (AI-Design Professor)
Articles générés via Vidiome, puis fusionnés et enrichis.
