Défi : goulots d'étranglement dans les processus répétitifs →

Fintech et services de communication · Moyen-Orient

Botimavec Figma

Botim : le workflow a permis d’atteindre une précision de 90 % dans la génération automatique de code

Solution

Source : figma.com. Chiffres déclarés par l'éditeur.

Le défi

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.

Voir les 7 cas d'usage qui partagent ce défi →

Ce qu'ils ont fait

Botim a intégré Figma Design, Dev Mode, Code Connect et Figma Make à son workflow, le tout au sein d’un écosystème piloté par l’IA. L’équipe a établi un mapping entre les composants de design et la base de code, et utilisé Dev Mode pour connecter Figma Design directement à son code. Elle a également développé un système d’IA propriétaire pour automatiser les révisions de design.

Les résultats

  • L’équipe a pu développer cinq écrans fonctionnels en environ 10 minutes.
  • Le workflow a permis d’atteindre une précision de 90 % dans la génération automatique de code.

Que fait l'IA

L’IA automatise les révisions de design en transformant les documents d’exigences produit et les résultats de recherche en fichiers markdown, génère un document de révision complet, et produit des prompts pour générer automatiquement des solutions manquantes comme les états de chargement ou les écrans d’erreur.

Fonctionnalités :Génération de design responsiveEspace de travail collaboratif multi-modèlesAutomatisation de flux de travail personnalisés

L'équipe et la méthode

L’équipe de design et de développement de Botim a établi des règles strictes pour l’utilisation des outils Figma et intégré un système d’IA propriétaire. Les designers et développeurs ont collaboré pour créer un workflow allant de la révision automatisée des designs.

Questions fréquentes

Comment automatiser les révisions de design avec l’IA pour gagner du temps ?

L’IA automatise les révisions de design en transformant les documents d’exigences produit et les résultats de recherche en fichiers markdown, génère un document de révision complet, et produit des prompts pour générer automatiquement des solutions manquantes comme les états de chargement ou les écrans d’erreur.

Quels outils utiliser pour synchroniser le design et le code dans un workflow piloté par l’IA ?

Botim a intégré Figma Design, Dev Mode, Code Connect et Figma Make à son workflow, le tout au sein d’un écosystème piloté par l’IA. L’équipe a établi un mapping entre les composants de design et la base de code, et utilisé Dev Mode pour connecter Figma Design directement à son code. Elle a également développé un système d’IA propriétaire pour automatiser les révisions de design.

Comment réduire les cycles de développement de plusieurs semaines à quelques minutes ?

L’équipe a pu développer cinq écrans fonctionnels en environ 10 minutes. Le workflow a permis d’atteindre une précision de 90 % dans la génération automatique de code.

Quelles règles mettre en place pour éviter la dette technique dans un design system ?

L’équipe de design et de développement de Botim a établi des règles strictes pour l’utilisation des outils Figma et intégré un système d’IA propriétaire. Les designers et développeurs ont collaboré pour créer un workflow allant de la révision automatisée des designs.

En savoir plus