Test du Plugin Chrome/Figma HTML to FIGMA

François

Arbogast

5.11.2021

3

minutes

Figma

En me baladant sur LinkedIn, je suis tombé sur un post qui présentait un plugin très intéressant : HTML to Figma.

Son but ? Vous permettre de "cloner" le design d'une page d'un site qui vous intéresse.

En lisant le post, j'ai trouvé l'idée géniale et j'ai voulu tester ce plugin pour m'en faire une opinion.

Spoiler : C'est très rapide et facile à mettre en place, alors c'est parti !

Setup Chrome et FIGMA

Pour l'installation des plugins, rien de plus simple. On va commencer par Google Chrome.

Rendez-vous sur le store Google Chrome pour les extensions et chercher le plugin HTML to Figma.

Ou bien cliquer sur ce lien pour y accéder directement : Clique ici !

Le plugin en question est celui-ci :

Plugin HTML to Figma
Le plugin sur le store Google Chrome

Même opération sur FIGMA, récupérer dans l'onglet Community le plugin "Figma to HTML, CSS, React and more"

Figma to HTML, CSS, React and more
Le plugin sur Figma

Utilisation du Plugin

Nous sommes désormais prêts à utiliser le plugin !

Pour tester je décide d'aller sur un site super connu : Airbnb.

Une fois sur la page, je clique sur l'icône de l'extension en haut à droite de mon navigateur et j'appuie sur le bouton "Capture Current Page".

Impossible de rater le bouton, il est seul et énorme au milieu de la fenêtre 😄

Cela va vous télécharger un fichier en .json comme un téléchargement classique !

airbnb html

Dernière étape, le transférer sur FIGMA. Comme depuis le début, c'est super simple !

Sur mon projet vide, je fais un clique droit pour accéder aux plugins puis je sélectionne le plugin "Figma to HTML, CSS..."

Il y a 2 options possibles sur ce plugin, il est possible de rentrer un URL en direct sur le plugin ou d'upload un fichier (le .json téléchargé préalablement).

Je choisis mon fichier, et voila, la copie de la structure et design est reproduit !

upload json to figma
Il faut uploader le fichier téléchargé
airbnb to figma
Magie ! Notre Design

À noter, il peut manquer certains éléments graphiques, mais la structure de la page y sera toujours.

Pour les curieux, voici un autre test d'un outil Nocode permettant de développer des applications mobile: Draftbit !