Figma réunit code et design dans un canvas commun. Cursor mise sur l’inverse

Code Layers, la nouvelle fonctionnalité de Figma, accomplit quelque chose qui aurait relevé du vœu pieux il y a deux ans : elle permet de cloner un dépôt GitHub directement sur le canvas de design. Une fois le dépôt en place, il devient possible d’extraire des cadres de design modifiables du code existant, de les retoucher visuellement et de synchroniser les modifications vers le dépôt — le tout dans un fichier Figma unique, avec la collaboration en temps réel intacte. Design et développement dans la même fenêtre.

Pour les designers qui ont passé des années à rédiger des notes de passation, à copier des spécifications dans des tickets Jira ou à envoyer des liens Zeplin à l’équipe ingénierie, Code Layers modifie l’endroit où s’installe la conversation entre design et code. Les modifications dans Figma mettent à jour le code sous-jacent ; les modifications dans le code mettent à jour la couche de design. Le pont entre les deux disciplines a toujours imposé de changer de contexte — ce changement devient moins coûteux.

Figma Motion transforme les animations en code prêt à déployer

Figma a également annoncé Motion, une timeline d’animation par images clés intégrée directement dans le canvas. Les designers y construisent des transitions, des états de survol et des animations de défilement, puis les exportent dans sept formats : CSS, JSON, React, MP4, WebM, SVG animé et GIF. Une animation de chargement conçue dans Figma n’est plus un document de référence qu’un développeur doit interpréter — c’est l’animation elle-même.

La troisième annonce majeure concerne Shader Effects, des remplissages accélérés par GPU alimentés par WebGPU — la norme graphique la plus récente du navigateur — permettant d’appliquer des textures visuelles complexes et générées mathématiquement directement sur les calques Figma. L’agent IA de Figma peut produire ces remplissages personnalisés à partir d’une description textuelle ou d’une image téléchargée. On saisit une phrase comme « verre dépoli avec des motifs d’interférence bleu doux » et le canvas produit quelque chose qui se rend en direct et peut être retouché de manière interactive.

L’agent IA intègre de nouvelles compétences et des connexions externes

L’agent IA lui-même s’est considérablement élargi. Il peut désormais construire des « compétences » réutilisables à partir d’instructions en langage naturel — des outils personnalisés qui automatisent les tâches de design répétitives sans nécessiter de connaissances en API — et se connecte directement à des services externes comme Notion, GitHub et Microsoft Excel. Une mise à jour prévue pour la fin 2026 intégrera Weavy, un constructeur de workflows acquis par Figma l’an dernier, pour l’automatisation par nœuds à l’intérieur des fichiers de design.

Tout n’est pas disponible aujourd’hui. Code Layers est en accès anticipé, les candidatures ouvrant en juillet 2026 ; la fonctionnalité requiert un siège Full sur un abonnement Figma payant. Shader Effects et l’agent IA amélioré sont en ligne sur les formules payantes. Figma Motion est disponible dès maintenant pour les titulaires d’un siège Full, tandis que la disponibilité générale de Code Layers est annoncée pour plus tard en 2026.

L’ambition de Figma d’absorber une partie du flux de travail de l’éditeur de code se heurte à une réalité concrète : écrire du code et concevoir des interfaces sont des activités cognitives distinctes, et Cursor — l’éditeur de code IA que SpaceX a acquis pour 60 milliards de dollars la semaine dernière — a construit son audience parmi les ingénieurs, pas les designers. Que ces deux communautés convergent autour d’un canvas partagé reste, pour l’heure, une question ouverte.

Étiquettes: GitHub, Code Layers, Config 2026, Cursor, Figma, outils de design