Figma utilise l’IA pour transformer le design digital : Make, Dev Mode et IA collaborative

TL;DR

• L’IA est intégrée dans l’ensemble de la plateforme Figma, de l’édition de texte à la génération d’images, en passant par le renommage automatique des calques et les visuels de site.
• Figma Make est un outil texte-vers-application qui génère du code de production à partir de langage, d’images ou de cadres structurés, aidant les équipes pluridisciplinaires à prototyper sans blocages techniques.
• Dev Mode MCP Server traduit les maquettes en code prêt pour la production avec tout le contexte, et les calques de code permettent de modifier langage, visuel et code au même endroit.
• La collaboration est au cœur du dispositif: travail en temps réel avec IA, flux croisés entre code, design et langage.
• Les programmes de fluence IA chez Figma, workshops internes et Hub sécurité visent à démocratiser l’adoption de l’IA tout au long de l’organisation et chez ses clients. OpenAI interview pour le contexte.

Contexte et arrière-plan

Figma se présente comme une plateforme où les équipes transforment des idées en produits et expériences numériques. Dans une interview publiée dans la série Executive Function sur l’IA, David Kossnick, responsable des Produits IA chez Figma, décrit l’IA comme une transformation de plateforme et une capacité centrale. Il précise que l’IA ne se résume pas à des pixels; elle englobe l’art du travail, l’empathie et la compréhension des flux, et l’IA est intégrée dans Figma, depuis l’édition de texte et la génération d’images jusqu’au renommage automatique des calques et aux visuels de sites. Cette approche prépare le terrain pour une révision plus large des flux de travail et de la collaboration interdisciplinaire. source L’IA est aussi présentée comme une transformation de la plateforme qui ouvre de nouveaux flux de travail de bout en bout. Un exemple phare est Figma Make, outil texte-vers-app qui génère du code de production à partir de langage, d’images ou de cadres structurés. L’objectif est d’offrir à des concepteurs, PM et ingénieurs la possibilité de prototyper et d’exprimer des idées sans dépendre d’un codage technique avancé. Cela s’inscrit dans la philosophie de collaboration multijoueur de Figma, qui cherche à élargir la participation à la création. source

Ce qui est nouveau

L’interview met en avant plusieurs capacités et évolutions produits alimentées par l’IA :

• IA intégrée dans la suite de produits (édition de texte, génération d’images, renommage de calques et visuels de sites) pour accélérer la création et élargir l’accès. source
• Figma Make, outil générant du code de production à partir de langage, d’images ou de structures, permettant aux équipes mixtes de prototyper sans maîtrise technique poussée. source
• Dev Mode MCP Server permet aux développeurs d’invoquer un agent de codage qui traduit des maquettes en code prêt pour la production avec un contexte complet, réduisant les tâches manuelles. source
• Code layers étend la surface de design pour inclure langage, visuel et code, tout en restant entièrement éditables pour préserver l’artisanat. source
• Flux croisés entre design, code et langue pour permettre aux utilisateurs de naviguer entre domaines sans perdre leurs forces déclinées. source
• Collaboration IA en temps réel: deux personnes travaillent dans le même fichier, avec avatars et assistant IA; génération d’images dans FigJam et Slides pour des itérations visuelles rapides. La culture est aussi marquée par des actions comme la création de cartes d’anniversaire remixées avec l’édition d’images OpenAI. source
• L’éducation à l’IA et la gouvernance sécurisée se déploient par des programmes internes et l’usage de ChatGPT Enterprise pour favoriser l’expérimentation sûre et l’adoption. source

Pourquoi c’est important pour les développeurs et les entreprises

L’histoire met l’accent sur le fait que l’IA intégrée n’automatise pas seulement des visuels, mais permet un flux complet: ideation, prototypage, tests et code prêt pour la production, avec moins d’obstacles. Les handoffs avec contexte entre équipes d’ingénierie et de design deviennent plus fluides, et la collaboration en temps réel avec l’IA peut accélérer les décisions et augmenter la participation au développement du produit. source

Détails techniques ou Mise en œuvre

Éléments clés évoqués:

• Figma Make: outil texte-vers-app générant du code de production à partir de langage, d’images ou de structures, permettant aux concepteurs et aux non-codants de prototyper sans dépendre du code. source
• Dev Mode MCP Server: permet aux développeurs d’invoquer un agent de codage qui traduit des maquettes en code prêt pour la production avec le contexte, réduisant le besoin de transferts manuels et préservant l’intention de design. source
• Code layers: couches linguistiques, visuelles et de code éditables, afin de préserver l’artisanat tout en tirant parti de l’IA. source
• Fluxs croisés entre modalities: intégration entre design, code et langue pour permettre de changer de cadre sans perdre les compétences de chacun. source
• Collaboration IA: expériences multi-joueurs en temps réel avec IA, et génération d’images dans FigJam et Slides pour des itérations autour de la marque. source
• Fluence IA et gouvernance: initiatives internes comme Great Figma Bake Off et Maker Weeks; déploiement de ChatGPT Enterprise pour une utilisation sûre et contextualisée. source

Points clés à retenir

• L’IA intégrée ne remplace pas mais étend la capacité des équipes à concevoir et livrer plus rapidement.
• Le modèle de collaboration IA de Figma transforme les réunions en sessions créatives partagées.
• L’expérimentation pratique et la gouvernance sécurisée sont essentielles pour étendre l’adoption de l’IA dans toute l’organisation.
• Des exemples concrets montrent que l’IA peut déclencher des usages innovants sans nécessiter d’équipes techniques complètes.
• L’avenir du design et du développement est transversal, avec des designers, des développeurs et d’autres créateurs avançant ensemble de l’idée à l’exécution.

Références

• https://openai.com/index/figma-david-kossnick