Figma intègre l'IA pour révolutionner le design

Figma intègre les agents IA pour transformer le design

Figma, la plateforme de design collaboratif, a récemment introduit une avancée majeure en intégrant des agents d'intelligence artificielle (IA) directement dans son canevas de design. Cette innovation repose sur l'outil use_figma, qui permet aux agents IA d'interagir avec les fichiers de design de manière plus fluide et intuitive. Contrairement à l'outil précédent, generate_figma_design, qui se contentait de convertir du code HTML en calques Figma, use_figma permet une interaction directe avec les composants, variables et auto-layouts déjà présents dans le système de design. Ainsi, les deux outils se complètent : le premier sert à importer l'état actuel d'une interface, tandis que le second permet de la modifier ou d'en créer de nouvelles.

Dans une vidéo explicative, Figma souligne que les agents peuvent désormais créer et mettre à jour des fichiers et composants Figma grâce à use_figma. Cette capacité ouvre de nouvelles perspectives pour les équipes de design qui souhaitent automatiser certaines tâches tout en maintenant un haut niveau de qualité.

Les skills : des instructions précises pour les agents IA

Un autre aspect clé de cette mise à jour réside dans l'introduction des skills, des fichiers au format Markdown qui servent de guide pour les agents IA. Ces fichiers définissent les étapes à suivre, les conventions à respecter et les standards de qualité attendus pour chaque processus de design. Cela rappelle les fonctionnalités offertes par Anthropic avec son outil Claude. Neuf exemples de skills sont déjà disponibles pour la communauté Figma, parmi lesquels :

• figma-generate-library : pour créer des composants Figma à partir d'une base de code,
• figma-generate-design : pour concevoir des designs à partir de composants et variables existants,
• create-voice : pour générer des spécifications d'accessibilité pour les lecteurs d'écran,
• apply-design-system : pour connecter des designs existants aux composants du système,
• sync-figma-token : pour synchroniser les design tokens entre le code et les variables Figma.

Ces skills incluent des boucles d'autocorrection, permettant aux agents de prendre des captures d'écran de leurs résultats, d'identifier les écarts et d'itérer jusqu'à obtenir un rendu conforme. use_figma est compatible avec plusieurs clients MCP tels que Claude Code, Codex, Copilot CLI, Copilot dans VS Code, Cursor, Augment, Factory, Firebender et Warp.

Vers des designs plus cohérents et alignés

Jusqu'à présent, les agents IA n'avaient pas accès aux décisions de design prises par les équipes, ce qui pouvait entraîner un manque de cohérence dans les designs générés. Avec l'introduction de use_figma et des skills, les agents disposent désormais du contexte nécessaire pour produire des éléments qui respectent les standards visuels existants. Selon Cat Wu, responsable produit de Claude Code chez Anthropic, les skills permettent à Claude Code de travailler directement sur le canevas de design, en respectant l'intention et le jugement de chaque équipe.

Le serveur MCP de Figma permet désormais aux agents d'écrire directement dans les fichiers Figma, prolongeant ainsi les standards établis par les équipes au fil du temps. Matt Colyer, directeur produit chez Figma, résume que grâce à use_figma, des clients comme Claude Code et Codex peuvent générer et modifier des éléments de design en lien avec le système de design en place.

Une course à l'innovation dans le design par IA

Cette annonce de Figma s'inscrit dans une période d'innovations rapides pour la plateforme. En février, Figma avait déjà intégré Claude Code et Codex, se positionnant comme un hub pour les outils de codage par IA. L'ouverture du canevas aux agents IA avec use_figma prolonge cette stratégie en leur offrant non seulement un accès en lecture, mais aussi une capacité d'écriture sur les fichiers de design.

Figma a précisé que use_figma deviendra à terme une API payante, facturée à l'usage, mais reste gratuite pendant la phase bêta. La plateforme prévoit d'enrichir cet outil progressivement, notamment avec le support des images et des polices personnalisées, dans le but d'atteindre une parité avec sa Plugin API. Parallèlement, Google a récemment annoncé une refonte majeure de Stitch, son outil de conception d'interfaces piloté par l'IA, qui vise directement le marché de Figma avec un canevas infini et un agent de suivi de projet.