Comment Botim accélère ses workflows de design avec l’IA de Figma

Botim, une plateforme fintech de premier plan au Moyen-Orient qui combine services de communication et services financiers pour plus de 150 millions d'utilisateurs, était confrontée à un problème courant dans le secteur : un décalage croissant entre le design et la production. Bien qu’elle ait mis en place son propre design system, l’équipe a constaté que ses designs Figma et ses bibliothèques de composants étaient souvent désynchronisés, ce qui nécessitait un travail manuel et répétitif et perturbait le processus de développement.

Botim a résolu ce problème en intégrant Figma Design, Dev Mode, Code Connect et Figma Make à son workflow, le tout au sein d’un écosystème piloté par l’IA. En réduisant les frictions entre design et développement, l'équipe est en mesure de proposer des expériences plus intuitives à grande échelle. Ainsi, Botim continue à simplifier la manière dont des millions de personnes se connectent et utilisent les services financiers au quotidien.

Combler le fossé entre design et code

Pour Botim, l’objectif n’était plus seulement de créer des écrans statiques “pixel-perfect”. Il s’agissait d’aller plus loin et d’évoluer vers un système où le design est traduit fidèlement en code prêt pour la production. L’équipe y est parvenue via :

• L’optimisation des composants : l’équipe a établi un « nombre d’or » de 32 composants de base pour rationaliser son interface utilisateur.
• La stratégie de mapping 1-to-1 : l’équipe a réalisé que pour que l’IA soit efficace, il fallait un mapping complet entre les composants de design et la base de code. Elle a procédé à un nettoyage rigoureux de ses fichiers Figma, s’assurant que tout ce qui y apparaissait correspondait parfaitement aux composants de sa bibliothèque.
• Exploitation de Dev Mode : en utilisant les outils de développement de Figma, Botim a connecté Figma Design directement à son code. Cela leur a permis d’exposer des signaux tels que des thèmes et des propriétés directement lisibles par la machine.

Créer un workflow compatible avec l’IA via Figma Make

Botim a développé un système d’IA propriétaire qui accompagne le processus de design. En exploitant les fonctionnalités avancées de Figma, il automatise les tâches complexes, libérant ainsi les designers de la création manuelle d’écrans pour leur permettre d’évoluer vers un système où ils dirigent des assistants IA :

• Révisions de design automatisées : au lieu de réviser manuellement les designs, l’équipe utilise un workflow qui transforme les PRD (document d’exigences produit) et les résultats de recherche en fichiers markdown. Ces fichiers sont ensuite intégrés à leur système d’IA pour générer un document de révision de design complet, qui identifie les états ou fonctionnalités manquants. Ce retour d’information a ensuite été automatiquement publié sur les écrans Figma grâce à l’API Figma, qui a également généré un prompt Make pour aider à affiner l’interface.
• Figma Make pour le prototypage rapide : le principal résultat du processus de révision par IA de Botim est un prompt Figma Make. Les designers peuvent copier-coller ce prompt dans Figma pour générer automatiquement les solutions manquantes, telles que les états de chargement ou les écrans d’erreur, qui sont ensuite affinées manuellement.
• Rapidité et précision : ce workflow a considérablement réduit le temps de développement. Lors d’une démonstration, l’équipe a pu développer cinq écrans fonctionnels en environ 10 minutes.

Cohérence et impact à grande échelle

Afin de maintenir la qualité pour sa base d’utilisateurs considérable, Botim a établi des règles strictes concernant l’utilisation des outils Figma pour éviter la dette technique :

• La règle des 95 % : l’équipe est très stricte quant à l’utilisation des composants, exigeant que 95 % de chaque écran soient construits à l’aide de composants de la bibliothèque existante afin de garantir la cohérence.
• Design indépendant de la plateforme : grâce au nouveau workflow, les designers n’ont plus à créer manuellement des versions distinctes pour Android et iOS ; le système gère les contraintes spécifiques à chaque plateforme. De plus, ce workflow inclut également le texte de droite à gauche et le mode sombre.

Un avenir tourné vers l’IA, du PRD à la production

L’ambition ultime est un pipeline allant du PRD à la production qui atteigne 80 % d’automatisation du workflow, où des agents IA gèrent l’ensemble de la pile, des contrats API back-end à l’interface utilisateur front-end. Dans ce futur proche, les rôles des designers et des développeurs évoluent : les premiers passent de la création manuelle d’interfaces à la direction d’assistants IA, tandis que les seconds se concentrent désormais sur la révision et la livraison de code de haute qualité plutôt que sur la création de composants. Alors que l’équipe s’efforce d’intégrer directement les contraintes UX dans la logique de l’IA, elle s’oriente vers un monde où le design sytem est un garant fiable et autonome de la production.

« L’idée est de mettre en place un processus qui me permette de faire confiance au design system, en garantissant que ce qui s’y trouve correspond exactement à ce que l’on voit en production », explique Sherizan Sheik, soulignant ainsi l’objectif d’un écosystème entièrement synchronisé et lisible par machine.

Dans l’approche novatrice de Botim, la conception logicielle repose sur la création de systèmes AI-ready où la frontière entre le design et le code tend à s’effacer au profit d’une source unique de vérité. En s’appuyant sur Dev Mode et Code Connect, l’équipe a instauré une cartographie rigoureuse reliant chaque composant Figma à sa réalité technique en production, ce qui permet aux agents IA d’interpréter fidèlement les maquettes comme des données structurées plutôt que de simples images. Cela a non seulement éliminé la dette technique, mais a également permis d’atteindre une précision de 90 % dans la génération automatique de code, réduisant des cycles de développement à quelques minutes au lieu de plusieurs semaines.

En définitive, cette transformation redéfinit les métiers de la création : les designers et développeurs ne sont plus des exécutants, mais deviennent les directeurs stratégiques d’assistants intelligents au sein d’un pipeline automatisé allant de la définition du produit jusqu’à sa mise en service effective.

Article publié le 5 juillet 2026.