On ne parle pas toujours le même langage entre collègues : UX designers, développeurs, chefs de projet etc. La tour de Babel, vous voyez l’idée ? Mais on en apprend tous les jours. Du moins c’est mon credo, si je ne comprends pas, je vais chercher à en savoir plus. Le web est passionnant et mes collègues aussi, je vous rassure 😉.
Apprendre c’est aussi partager et transmettre. Je vais vous raconter comment j’ai compris la rétro-ingénierie et comment un plugin Figma peut mettre tout le monde sur la même longueur d’onde. (et faire lire au passage mes articles à mes collègues.)
La rétro-ingénierie, késako?
Au commencement, il y a une question que Eric, mon boss, me soumet (il n’aimera peut-être pas que je l’appelle comme ça?) : Peut-on faire de la rétro-ingénierie de pages web dans Figma ?
Oups, il y avait là une inconnue dans la question 🤔. Google m’a vite renseignée. La rétro-ingénierie ou reverse-engineering “[…] appliquée aux systèmes, logiciels ou appareils informatiques a pour but d'analyser un système pour en créer une représentation à un plus haut niveau d'abstraction. Les objectifs de la rétro-ingénierie sont multiples, certains pouvant être autorisés voire nécessaires, et d'autres plus malveillants combattus de différentes méthodes.” Je vous épargne le reste de la page Wikipédia (néanmoins pédagogique).
En mode Eric ça donnait : “je donne une url de page, il me créer le design éditable dedans”.
Eureka ! J’avais donc ce qu’il me fallait.
Cette démarche de tirer profit d’une page HTML en conception d’interface, je l’avais déjà exploitée. Les avantages sont nombreux. Le premier est tout simplement de gagner du temps sur la reproduction d’une maquette pour la refonte d’un site, la création de pages, de parcours utilisateurs ou de nouvelles features dans un projet, en considérant que les interfaces actuelles soient à réutiliser.
En phase de conception, cette démarche de réédition va servir en tant que UX/UI designer :
- À rassembler les composants.
- Collecter les assets : images, couleurs, blocs etc.
- Créer un design system sans repartir de 0.
- Repartir sur des frames identiques à la page html
Néanmoins, gardons en tête que partir d’un existant peut être un frein très important s’il s’agit de repenser entièrement une interface. Auquel cas, je ne le recommande pas.
Le plugin Figma adapté
La force de Figma c’est, entre autre, sa communauté incroyable de Webdesigners, Développeurs et Designers qui mettent à disposition plugins, components ou widgets. Alors oui, il y en a des moins efficients que d’autres mais il y a aussi de petites pépites que j’utilise dans mon quotidien de “figmateur”.
Je vous emmène à la découverte du plugin HTML To Figma développé par Builder.io en faisant une petite démo.
1.Installer sur Chrome le plugin HTML To Figma
2.Allez sur le site à convertir et lancer le plugin
3.Cliquez sur capture page et réceptionnez le fichier .json
4.Ouvrez Figma et dans un nouveau fichier lancez le plugin HTML To Figma
5.Dans l’onglet “Import to Figma” uploader le fichier .json
Je ne recommande pas l’import par URL que j’ai constaté moins efficace.
Et voilà la page convertie en Frame :
Certains imports ne seront pas complets, comme ici avec la page du site plnts.com où il n’y pas toutes les images produits.
Où je veux en venir avec tout cela ?
Bien que dotés des meilleures expertises et des meilleurs outils que nous puissions avoir entre les mains, rien ne vaudra la communication entre nous et la curiosité.
Cette petite brève du jour m’aura permis de vous faire un tuto Figma to html. Et peut être aurons-nous l’occasion d’en avoir l’utilité commune pour en extraire le potentiel.
Je ne règlerai toujours pas les conflits du style “mer ou montagne”, “pain au chocolat ou chocolatine” ou encore combattre les clichés tenaces “dev versus designer” mais si je peux ouvrir la brèche à une solide collaboration, je serai ravie 🙂.
Alors dites-moi chers collègues, c’est quoi pour vous la rétro-ingénierie de pages web ?
Si vous avez lu jusqu’au bout, demandez moi si convertir une frame Figma en html est possible ? un indice : c’est oui !
Laura Croix, UX Designer.