Codegen, un outil d'IA qui facilite le passage de la conception au code, il peut aussi nuire à la créativité,

à la curiosité et à l'apprentissage des développeurs

Codegen est un outil d’intelligence artificielle (IA) qui aide les développeurs à traduire plus facilement les conceptions en code. Il fonctionne en analysant les éléments visuels d’une conception et en suggérant des noms de composants et des valeurs de propriétés qui correspondent au système de conception utilisé par le développeur. Codegen n’est pas un outil magique qui écrit le code à la place du développeur, mais un outil qui l’accompagne et l’augmente. Il lui permet de gagner du temps et d’éviter des erreurs en lui donnant un point de départ pour le code. Les développeurs doivent donc utiliser codegen avec prudence, discernement et éthique, et ne pas oublier que le code est avant tout une expression de leur pensée et de leur créativité.

Toutefois, le développeur doit donc toujours vérifier, modifier et optimiser le code suggéré, ce qui peut demander du temps et de l’énergie. Le code suggéré peut contenir des erreurs, des biais ou des failles. Le développeur doit donc toujours comprendre le code qu’il utilise, et ne pas le copier-coller sans le tester ou le documenter. Sinon, il risque de compromettre la fiabilité, la sécurité et la maintenabilité du code. Cet outil d’IA ne peut pas se substituer au travail du développeur, qui doit toujours faire preuve de jugement, de compétence et de responsabilité.


Codegen ne peut pas s’adapter à tous les cas d’utilisation, car il ne connaît pas les besoins spécifiques et le cadre de chaque projet. Il peut créer une dépendance ou une paresse chez les développeurs, qui pourraient se reposer entièrement sur l’IA pour écrire le code. Cela pourrait réduire la créativité, la curiosité et l’apprentissage des développeurs, qui ne chercheraient plus à améliorer ou à innover leur code. Cela pourrait également poser des problèmes d’éthique ou de sécurité, si le code suggéré contient des données sensibles ou personnelles, ou si le code suggéré est utilisé à des fins malveillantes ou illégales.

Seuls 3 % de développeurs déclarent avoir une grande confiance dans la précision des outils d’IA pour le développement. « Ce scepticisme n'est pas surprenant. Lorsque nous avons commencé à travailler sur Dev Mode, un espace pour les développeurs dans Figma, nous l'avons imaginé comme un moyen d'automatiser le passage de la conception au code. Les premières versions étaient prometteuses, mais au fur et à mesure de l'itération de notre approche, nous avons constaté que les développeurs ne trouvaient pas toujours le code utile », déclare Figma.

Cependant, codegen offre le plus d'avantages lorsqu’il est appliqué d'une manière spécifique, pour une équipe, une entreprise et votre flux de travail. Par exemple, si votre système de conception et votre bibliothèque de composants sont déjà dans Figma, vous n'avez pas besoin d'une application automatisée de conception à codage. Dans ce cas, il est préférable de se référer aux jetons, de consulter la documentation ou de créer un plugin codegen pour générer des extraits personnalisés.

Selon Figma, en appliquant ces conseils, il est possible de traiter et de comprendre ce que vous regardez plus rapidement, lorsque vous commencerez à écrire le code vous-même. « Codegen vous aidera à passer d'un écran vide à un point de départ - peut-être pas de 0 à 1, mais de 0 à 0,5 - beaucoup plus rapidement. » Codegen peut également aider à interpréter les exigences de conception comme les valeurs de style brutes - telles que les codes hexadécimaux et les pixels - pour construire un élément d'interface utilisateur ou découvrir un nom de jeton ou une valeur de propriété de composant lorsque vous mettez en œuvre un système de conception.

Le code d'implémentation d'une instance d'un composant est très différent du code définissant le style et les propriétés d'un composant. Si vous développez la bibliothèque de composants de votre équipe, vous écrirez le code du composant pour le style visuel sous-jacent ainsi que les définitions des variantes et des propriétés. Si vous mettez en œuvre une bibliothèque de composants, le code que vous écrivez est souvent un code d'instance de composant ainsi que le style de présentation qui l'entoure.

L’équipe Figma explique que Codegen analyse les éléments visuels d’une conception et recommande des noms de composants et des valeurs de propriétés qui correspondent au système de conception utilisé par le développeur.

Ainsi, Codegen permet au développeur de gagner du temps et d’éviter des erreurs en lui donnant un point de départ pour le code. L’équipe suggère également de créer un plugin Codegen personnalisé, qui pourrait s’adapter aux besoins et aux cadres spécifiques de chaque projet. Toutefois, l’entreprise reconnaît que cela prend du temps et des ressources, et qu’il est plus simple d’établir une bonne base en s’assurant que les conceptions de l’équipe correspondent à des modèles dans le code.

À l’exemple des composants et des variables de Figma, qui rendent les systèmes de...