La rétro-ingénierie avec Figma

Publié initialement le 22.09.2022, pour Refine Agency

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.

Laura Croix, UX Designer