L’IA dans Figma : zoom sur les nouvelles fonctionnalités de l’outil de design

Figma a récemment ajouté à sa palette d’outils un certain nombre de fonctionnalités basées sur l’Intelligence Artificielle (IA). Bien qu’elles soient encore en version bêta, certaines méritent déjà d’être intégrées à nos habitudes de travail.
De l’édition d’image à celle des textes en passant par des aides au design, nous vous proposons un état des lieux de ces nouveaux outils, déjà incontournables pour certains.

Les outils de design

First draft

First Draft permet de générer l’ébauche d’une page d’après un prompt. Il s’agit sans doute de l’outil le plus attendu - et redouté - par les designers : l’IA va-t-elle être capable de faire un travail satisfaisant ?

Nous avons testé en demandant une homepage pour un site e-commerce vendant des chaussures :

Si le résultat correspond plutôt à un listing produit, les conventions e-commerce sont bien respectées. Mais on s’aperçoit rapidement que le rendu est justement très classique, sans originalité.
Et c’est sans doute ce qui va limiter l’intérêt de ce genre de solution : chaque entreprise a son propre positionnement et ses problématiques, qui nécessite un travail sur-mesure.

Notre verdict : First draft porte bien son nom, son intérêt réside plutôt dans la phase d’idéation d’un projet pour tester des pistes. Mais il n’a pas pour vocation de réaliser une maquette complète.

Rename Layers

En un clic, Rename Layers permet de mettre de l’ordre dans les noms des calques. L’outil analyse par lui-même chaque élément et le nomme correctement.
Seuls les premiers niveaux de l’arborescence seront retraités, certains éléments mineurs passeront entre les mailles du filet.

Notre verdict : ✅ Validé !  Un vrai gain de temps qui aidera les équipes à travailler de concert sur un même projet, avec des calques facilement identifiables pour tous.

Add interactions

Vous en avez marre de passer des heures à faire votre prototypage ? Ici aussi, Figma tente de comprendre le but de chaque bouton et de chaque page et les lie en faisant le prototypage à votre place.

Notre verdict : intéressant pour avoir une base mais il faudra tout de même tester et ajuster certaines interactions. On déconseille son utilisation aux débutants : il est nécessaire de maîtriser le prototypage pour comprendre chaque interaction et les corriger au besoin.

Replace content

Figma propose de remplir lui-même le contenu de vos champs textes : qu’il s’agisse de paragraphes, de titres ou de libellés plus courts, il analyse le sujet de la page et écrit un texte pertinent.

Notre verdict :  le principe est intéressant, mais le principal bémol est que le volume des textes n’est pas toujours respecté : en l’utilisant sur un paragraphe de lorem ipsum, on peut obtenir une simple phrase, bien plus courte.

Search with image or selection

Cet outil permet de sélectionner un composant et de consulter d’autres composants similaires.
La recherche peut se faire soit au sein de vos autres projets, soit parmi les composants partagés par la communauté. Il est aussi possible de faire cela à partir d’une capture d’écran.
Notre verdict :  ✅ Très pratique pour benchmarker toutes les façons de traiter un sujet, et éventuellement réutiliser un autre composant.

Les outils d’édition d’image

Make an image

Il est maintenant possible de créer des images sans avoir à passer par une solution tierce. La fonctionnalité permet aussi d’ajuster le visuel créé en donnant plus de précisions.

Seul bémol : la qualité des images générées (basée sur la technologie de ChatGPT) laisse parfois à désirer. On obtient de meilleurs résultats en prenant le temps d’utiliser une IA spécialisée dans l’image comme Midjourney, qui offre aussi des fonctionnalités plus avancées.

Notre verdict : même si le résultat ne satisfait pas toujours nos exigences, cet outil reste intéressant pour intégrer de premières intentions de visuels à une maquette, avant de travailler sur les images définitives.

Edit image

Figma nous propose de modifier un visuel existant à l’aide d’un prompt. On indique ce qui doit être modifié et l’IA génère un visuel proche du premier en corrigeant l’élément souhaité.

Prenons l’exemple ci-dessous : à gauche l’image originale, et à droite nous avons indiqué “lunettes de soleil et chemisier blanc”.

Notre verdict : ❌Figma ne reprend pas exactement l’image d’origine, mais recompose une nouvelle image en tentant de la reproduire, sans y être parfaitement fidèle. La fonctionnalité est intéressante sur le papier, mais le résultat n’est pas encore à la hauteur.

Remove background

Il s’agit ici d’un simple détourage automatique qui remplit totalement sa promesse.
Notre verdict : ✅ parfait pour ajouter un arrière-plan à un sujet sans avoir à éditer l’image dans un autre logiciel.

Boost resolution

Derrière ce nom, se cache en fait un ajout de netteté, pour renforcer des photos qui seraient trop floues.
Notre verdict : ✅ Ici encore il s’agit d’une fonctionnalité simple mais utile, qui évite de quitter Figma.

Les outils d’édition de texte

Enfin, trois outils sont dédiés au retravail des textes : Rewrite, Translate et Shorten.
Des fonctionnalités simples qui remplissent leur fonction pour reformuler, traduire ou raccourcir un paragraphe.

Notre verdict : ✅ Rien à redire, ces outils font gagner du temps sur certaines actions : pour décliner des maquettes en plusieurs langues, synthétiser des textes trop longs, reformuler une accroche, etc.
Bien sûr, ces fonctionnalités ne remplaceront pas les métiers de la rédaction, mais sauront trouver leur utilité au quotidien.

Au final, toutes ces nouveautés n’ont pas le même niveau de maturité ni le même impact sur le métier de designer. Les fonctionnalités les plus efficaces aujourd’hui sont souvent les plus simples : ces “petits outils” qui fluidifient le quotidien, font gagner de précieuses minutes et évitent de multiplier les allers-retours vers d’autres logiciels.

Les autres, plus ambitieuses, restent encore perfectibles et demandent à être affinées avant de devenir de véritables incontournables. Mais rappelons-le : nous n’en sommes qu’à la version bêta. Il y a fort à parier que Figma continuera d’améliorer ces fonctionnalités pour en faire, demain, des alliées de poids dans le travail des UX/UI Designers.