Depuis quelques années, les outils d'IA pour générer des intégrations d'interfaces à partir de maquettes fleurissent. On en a testé plusieurs chez WanadevDigital : de Locofy à Uizard, en passant par Framer AI. Tous ont leurs qualités, mais jusqu’ici, il manquait un vrai pont stable entre les intentions du designer et la réalité du code front.

L’arrivée de Figma Make change la donne. Et si je devais résumer son impact en une phrase : ça fonctionne, et ça fonctionne pour tout le monde, designers, développeurs et intégrateurs !

Pourquoi Figma Make (beta) change le game pour les équipes design & dev :

Figma Make permet, entre autres, de générer du code à partir de maquettes créées dans Figma, de manière fluide et intuitive. De plus, il crée de façon assez bluffante toutes les animations qu'on lui demande. Par exemple, vous concevez une interaction (hover, transition, scroll, apparition…), vous décrivez à Make ce que vous voulez faire, et il vous propose non seulement une animation fluide et moderne, mais il vous génère aussi un code front propre, en CSS, SVG animé ou React selon ce que vous voulez.

Pas de librairie à importer, pas de dépendance externe : le code est natif, léger et exportable directement dans votre projet.

C’est là une grosse différence avec GSAP ou Lottie, deux outils puissants mais qui nécessitent :

1. l’installation d’une librairie (parfois lourde),

2. une structure JavaScript spécifique pour piloter les animations,

3. ou dans le cas de Lottie, un moteur pour interpréter les fichiers .json.

Avec Figma Make, les animations sont traduites en code standard, directement lisible et exploitable : du CSS pur pour les transitions simples, du SVG animé pour les effets plus visuels, et du code React ou Webflow selon les besoins.

Résultat : un poids final bien plus léger, moins de dépendances et une intégration plus rapide.

Pourquoi il est essentiel de penser l’animation en amont :

Trop souvent, les animations sont pensées “après coup”, au moment de l’intégration, voire jamais. Pourtant, les interactions animées ont un vrai impact UX : elles guident l’utilisateur, renforcent la hiérarchie de l’information et apportent du rythme et du feedback.

Plus de détails dans mon article sur Les animations d’interfaces utilisateurs pour optimiser la navigation

Prévoir les transitions dès la phase design, c’est :

1. améliorer l’expérience perçue,

2. réduire les allers-retours avec les développeurs,

3. garantir une cohérence globale dans le rendu final.

Avec un outil comme Figma Make, les designers peuvent exprimer des intentions claires, et les développeurs les récupérer sans effort d'interprétation.

Exemple en image sur un projet WanadevDigital

Nous avons testé l'outil sur notre design de configurateur type, voici de quoi nous sommes partis et le résultat de l'application.

1. Nous partons d'un design existant : notre UI Kit pour nos configurateurs 3D.

2. Nous décrivons à l'application ce que nous souhaitons prototyper : l'IA réfléchit et nous pouvons ensuite voir le code se générer sous nos yeux.

3. Voici le résultat proposé par Figma Make (beta) :

4. Nous pouvons ensuite aisément aller chercher le code généré par l'application et le modifier à notre guise pour l'optimiser :

Un tournant pour les équipes produit

Même si certaines fonctionnalités restent à affiner, cette version beta de Figma Make pose les bases d’un vrai changement dans la manière de collaborer entre design et développement. Plus besoin de plugins ou de bibliothèques lourdes pour exprimer une intention d’animation : le tout est généré à la source, dans un langage que les développeurs peuvent intégrer facilement.

Pour nous, c’est un accélérateur de qualité, qui permet d’industrialiser les animations tout en gardant la main sur la finesse d’exécution. Vivement la suite !