L'approche de travail
Figma Generate Design fonctionne du code vers le design : le livrable est un écran dans Figma, pas du code d'application. Il repère les instances de composants, les variables de bibliothèque et les styles de texte ou d'effet existants avant d'assembler la page. La source privilégie la réutilisation plutôt que de dessiner des boîtes imitant les composants avec des valeurs codées en dur.
Sa stratégie d'assemblage est incrémentale. Un cadre conteneur est créé d'abord, puis chaque section y est construite et inspectée. Les propriétés de texte des composants et les variantes par défaut sont vérifiées par rapport au code source, tandis que les captures de chaque section révèlent les textes coupés et les espaces réservés restants, qui peuvent disparaître dans une vue réduite de la page entière. Le résultat doit être constitué d'instances de design system modifiables, et pas seulement d'une capture d'écran de l'application.
Livrables attendus
- Un écran Figma nouveau ou mis à jour, composé d'instances de composants
- Des couleurs, espacements et rayons liés à des variables, avec des styles réutilisables
- Des contrôles visuels par section et en plein écran par rapport à la source
Du brief à la revue
- 01Cartographier l'écran source
Lisez ses sections, ses composants et les valeurs par défaut de ses props. Identifiez le fichier Figma cible et les conventions existantes du système.
- 02Repérer et réutiliser les ressources
Inspectez les écrans existants et recherchez dans les bibliothèques liées des composants, variables et styles. Un résultat vide pour les variables locales ne prouve pas que les tokens distants sont absents.
- 03Construire et valider les sections
Créez d'abord le conteneur, assemblez une section à la fois et inspectez le texte, les variantes et la mise en page avant de poursuivre.