Figma to Webflow plugin

Léa
February 10, 2022

Introduction

Il y a quelques jours, Webflow a lancé son propre plugin afin de pouvoir convertir un projet Figma en un site Webflow. Ce plugin Figma to Webflow a été construit et lancé par Webflow Labs, une équipe interne d'innovation et d’incubation. Pour simplifier, vous avez maintenant la possibilité de copier-coller (à quelque chose près) un design Figma directement sur Webflow !

Dans cet article, on vous explique les étapes à suivre pour utiliser le plugin.

Présentation du plugin Figma to Webflow

Le plugin Figma to Webflow convertit les mises en page automatiques (auto layout) dans Figma en un code HTML et CSS généré dans Webflow.

Actuellement, avec le plugin, vous pouvez effectuer les conversions suivantes de Figma à Webflow :

  • Auto layout
  • Styles de typographie
  • Styles de bordures et d'ombrage
  • Les images d'arrière-plan et les dégradés linéaires
  • Les vecteurs et les formes, convertis en SVG
  • Les images
  • L'opacité
  • Les positions absolut

Il vous permet donc de transférer vos designs Figma en un site Webflow propre et responsive. Tous les éléments cités ci-dessus seront transférés sur Webflow de manière identique à votre projet Figma.

Installation du plugin

PS : Pour l'instant, vous pouvez utiliser le plugin uniquement sur Google Chrome et l'application Figma sur ordinateur, il n'est pas encore disponible sur le navigateur Safari. Ainsi, penser bien à ouvrir votre onglet Webflow sur le navigateur Google Chrome lorsque vous transfèrerez vos designs (après tout qui utilise safari pour designer un site 😅)

Voici les étapes d'installation du plugin Figma to Webflow :

1. Commencer par vous rendre sur la page Figma to Webflow (HTML, CSS and Website) sur le site de Figma dans la partie Community.

Il faudra vous connecter à votre compte Figma pour pouvoir continuer.

2. Cliquer ensuite sur "Try it out", vous atterrirez sur un fichier Figma avec le plugin ouvert dans l'onglet Resources.

3. Dans la fenêtre du plugin, il faut que vous cliquiez sur "Run" pour exécuter le plugin.

4. Une fois que le plugin est ouvert, cliquez sur "Connect account" pour vous connecter à votre compte Webflow. Vous pourrez ensuite choisir le compte Webflow ou les sites à associer puis cliquez sur "Authorize app".

Webflow account connexion for Figma to Webflow plugin

5. Vous n'avez plus qu'à cliquer sur "Let's start", et voilà votre plugin est installé !

Vous pourrez par la suite retrouver le plugin dans l'onglet Ressources de la barre d'outil Figma puis dans la partie "Plugins" en cherchant Figma to Webflow. Il vous suffira alors de re-cliquer sur "Run" pour l'utiliser.

Comment utiliser le plugin Figma to Webflow ?

À partir du plugin Figma to Webflow, vous avez la possibilité de sélectionner des layouts et des structures pré-construites à intégrer dans votre projet Figma ou de réaliser vous-même vos designs.


Attention : vous pouvez uniquement copier-coller les éléments construits en auto layout. Autrement dit, si vous êtes plutôt du genre bordélique sur vos projets Figma, le plugin ne vous sera pas utile !

Transfert des éléments

Les structures et les dispositions (layout) pré-faites du plugin sont construites en auto layout, elles permettront notamment à votre site d'être parfaitement responsive une fois transféré sur Webflow. Vous pouvez donc vous servir des structures en tant que wrapper sur Figma par exemple. Puis insérer vos layouts pour construire votre design.

Cependant, si vous choisissez de réaliser vos designs Figma par vous-même, ils doivent impérativement contenir des structures en auto-layouts (mise en page automatique) pour pouvoir être traduits sur Webflow. Une structure d'auto-layout sur Figma apparaîtra comme une structure flexbox sur Webflow.

Pour ce qui est des images et des illustrations, elles apparaitront dans l'onglet Assets du designer Webflow.

Pour utiliser le plugin, le processus est simple.

1. Sur la fenêtre du plugin, choisissez l'onglet Layouts (mises en page) ou Structures

2. Choisissez le layout ou la structure qui vous convient

3. Une fois le ou les éléments ajoutés sur votre projet, il vous suffit de les sélectionner. Pour transférer un design entier, sélectionnez la structure de base qui contient vos autres éléments. Si vous travaillez sans éléments pré-construits, sélectionner les éléments que vous souhaitez transférer.

Figma to Webflow plugin on Figma interface

4. Sur la fenêtre du plugin, vous verrez apparaître un bouton "Copy to Webflow". Vous devez d'abord sélectionner votre projet de site Webflow (en haut à droite du bouton) puis cliquer sur le bouton.

5. Une fois copié, vous avez juste à vous rendre dans votre designer Webflow et à coller vos éléments dans la section que vous souhaitez depuis le navigateur à gauche, par exemple dans le "Body" (Command + V sur Windows ou Control + V sur Mac).

Votre projet Figma est ainsi lisible sur Webflow. Vous pouvez ensuite venir y ajouter du contenu dynamique ou des animations pour donner vie à votre site !

Organisation des classes

Lors du transfert avec le plugin, les noms de vos classes sur Figma seront conservés sur Webflow. Cela rend le travail beaucoup plus simple, mais il faut penser à bien organiser votre projet sur Figma au préalable. Figma applique cependant 3 règles lors du transfert :

  • Les majuscules sont remplacées par des minuscules (par exemple, "Wrapper" devient "wrapper").
  • Les espaces sont remplacés par des traits d'union (par exemple, "content wrapper" devient "content-wrapper").
  • Les noms de classe de plus de 20 caractères sont supprimés

De plus, si deux éléments Figma possèdent le même nom, mais des styles différents, le plugin renommera les classes afin d'avoir par exemple un élément nommé "container" et l'autre nommé "container-2". Cela marche également si vous avez déjà une classe existante sur Webflow avec le même nom que l'élément ajouté.

À l'inverse, si deux éléments possèdent un style identique, mais des noms différents, le plugin donnera la même classe aux deux éléments.

Pour la nomination de vos classes, nous vous conseillons fortement d'utiliser la méthode Client First de finsweet. Construisez donc vos layouts dans Figma avec la structure Client First pour la migrer sur Webflow par la suite. En revanche, vous aurez besoin de renommer un bon nombre de classes après avoir collé votre design sur Webflow, car le plugin ne prend pas en compte les combo classes.

Copier-coller un style guide Webflow

Pour ce qui est des polices de caractère, elles ne se transfèrent pas directement. Ainsi, si vous utilisez des polices personnalisées, il faut que vous les téléchargiez au préalable sur Webflow avant de "copier-coller" votre projet avec le plugin Figma.

Cependant, vous avez tout de même la possibilité de copier-coller vos styles de texte et de couleur. Pour cela, l'idéal est de créer une page Style guide dans votre projet Webflow pour ensuite venir y transférer vos éléments.

Pour cela, il vous faut cliquer sur le hamburger menu à droite de la fenêtre du plugin. Vous avez ensuite 3 options : "Copy all texts & color styles"; "Copy text styles" ; "Copy color styles".

Une fois copiés, vos styles de textes et de couleur provenant de Figma pourront être collés sur une page de votre projet Webflow. Ils apparaitront directement sous forme de Style guide. Pour les couleurs, si vous souhaitez les avoir à disposition, il vous faudra les ajouter manuellement aux échantillons Webflow de votre projet.

Convertir vos textes en PX en REM

Pour convertir les PX en REM, rendez-vous dans les settings de votre plugin, puis dans "text size unit" sélectionner la valeur rem.

Figma to Webflow plugin settings import

Les balises HTML

Le plugin Figma to Webflow détecte automatiquement certaines balises HTML sur les éléments Figma que vous allez convertir sur Webflow. Plus précisément, voici comment il fonctionne :

  • Balise d'ancrage : lorsque le nom de l'élément Figma contient un "bouton", le plugin va l'exporter sous la forme d'un anchor element HTML ("<a>"). Pour les boutons, Webflow crée en réalité un HTML tag </a> et non pas <button>. 😅
  • Balise de paragraphe : lorsque le nom de l'élément contient "description", "texte" ou "paragraphe", le plugin va l'exporter sous forme de balise de paragraphe HTML (c'est-à-dire "<p>")
  • Heading Tag : lorsque le nom de l'élément contient "heading", le plugin l'exportera sous la forme d'une balise HTML H1 (c'est-à-dire "<h1>")

Le plugin supporte les types de balises HTML suivants : H1, H2, H3, H4, H5, H6, P, A et Div.

Vous avez également la possibilité de définir vous-même les balises HTML sur Figma en nommant vos éléments de la façon suivante : [nom du HTML tag]--nom de l'élément.

Par exemple, pour un heading cela donnerait : [H1]--nom du titre H1.

Conclusion

Ainsi, avec la sortie du nouveau plugin Figma to Webflow, vous pouvez désormais convertir vos designs statiques Figma en un projet Webflow. Ce plugin produit par Webflow Labs permet de gagner beaucoup du temps dans son processus de création. En revanche, il est obligatoire d'effectuer certaines modifications sur Webflow afin de finir votre site web, comme pour la nomination des classes, l'ajout de contenu dynamique, la création d'animations ou encore pour les intégrations custom, etc.

Avec cette nouvelle fonctionnalité, Webflow rattrape son concurrent Framer pour qui l'option de "copier-coller" depuis Figma fait partie de ses fonctionnalités depuis le début. Si vous voulez en savoir plus, lisez notre article de comparaison des deux outils.

OPTIMISEZ VOTRE SITE

RECOS ET AUDIT GRATUIT

ligne

Votre site ne convertit pas ? ❌
Vous ne générez pas suffisamment de lead ?❌
Votre n'avez pas de visibilité ? 😭

Free Audit illustration
Politique de confidentialité