L'intention dans Figma, la réalité dans le code.
Une courte démo de ma boucle de travail : Figma porte l'intention, le code la rend testable, et je circule entre les deux jusqu'à obtenir la bonne copie.
La boucle
Deux outils, une boucle : le design se décide dans Figma et se prouve dans le code.
Aucun des deux ne suffit seul. Figma garde l'intention lisible ; le code la met en vraies mains, avec de vrais états et de vraies données. Le travail se fait dans l'aller-retour.
L'intention : intentions, itérations visuelles, une direction.
La preuve : chaque vue complétée, testée en vraies mains.
Le jugement : des allers-retours jusqu'à ce que la copie soit juste.
Le process
Trois étapes, et la boucle entre elles.
Figma pose l'intention.
Le fichier concept est la ligne directrice : intentions, itérations visuelles, une direction. Il peut rester partiel, il pose quand même les fondations.
Ce qui en sort : 18 écrans iPhone en 7 sections, comme le flow Déplacer un rendez-vous ici.
Le code rend ça réel.
Tiré du fichier Figma, le prototype complète chaque vue, teste l'UX en vraies mains, et ajoute les micro-interactions et le code sur mesure que Figma ne peut pas. Les règles de design vivent dans des fichiers .md, la génération est cadrée par mes propres skills.
Ce qui en sort : 46 états, sur iPhone et sur iPad en paysage, en clair, chaud et sombre.
Puis le produit.
Je fais des allers-retours entre les deux jusqu'à ce que la copie soit juste. Cette copie devient le produit final, ou une passation propre aux équipes, clients et développeurs.
Ce qui en sort : un flow de bout en bout, de la demande à la confirmation.
Augmenté par l'IA
Le code est généré. Les règles qu'il suit sont les miennes.
Dans le prototype
Le calendrier sur iPad en paysage, le même écran en trois thèmes, puis trois des 46 états.
Le calendrier sur iPad, puis en clair, chaud et sombre, puis qui prévenir, toute la série et ses trois conflits, et un rendez-vous qui n'est pas le vôtre
Le résultat
Un concept qu'on ouvre, qu'on touche et qu'on transmet, pas un deck d'écrans.