Convertir une maquette Figma en site Webflow

Ce que fait le plugin Figma to Webflow

Figma to Webflow est un plugin gratuit qui transfère une maquette Figma vers un projet Webflow, mise en page comprise. Le cours l'applique à une maquette déjà connue de la chaîne, une page Apple Fitness+, réadaptée pour l'occasion : deux sections, une navigation et un bandeau. Cette réadaptation n'est pas un détail de mise en scène, elle existe parce que le plugin impose des règles.

Préparer la maquette Figma : l'auto layout n'est pas optionnel

Le plugin s'ouvre depuis la barre d'outils, dans Plugins and widgets, en tapant son nom. Son écran d'accueil annonce la contrainte principale.

C'est ce qui explique la réadaptation des sections avant la démonstration. Vient ensuite la connexion : Connect account, recherche du projet Webflow dans la barre, Authorize app, retour au plugin.

Ajouter les tags HTML avant de copier

C'est l'étape que le cours qualifie de primordiale, et elle se fait élément par élément.

1. Sélectionner un bloc et lui appliquer son tag : section pour les sections, H1 pour le titre, P pour les paragraphes, link pour les boutons et les liens.
2. Attraper les éléments imbriqués. Maintenir la touche Commande et survoler permet de les atteindre sans dérouler toute la hiérarchie.
3. Se laisser guider. Quand un texte est sélectionné, le plugin propose directement les tags pertinents.
4. Relire les tags. Chaque tag s'affiche à côté du nom de la frame, ce qui donne une vérification rapide avant de copier.

Les éléments laissés en div deviennent des text blocks dans Webflow, et les images sont converties sans intervention.

Copier la maquette dans Webflow et corriger ce qui manque

On sélectionne la frame qui englobe tout, on vérifie que le bon projet est bien sélectionné, puis Copy to Webflow. Le plugin prépare les assets, et il n'y a plus qu'à coller dans le projet. Le résultat est fidèle, à deux détails près.

Autre onglet utile si l'auto layout n'est pas encore un réflexe : Layout propose des sections toutes faites par Webflow, déjà construites correctement, à coller dans Figma puis à remplir avec ses propres textes et images avant conversion.

Importer les composants et les variables Figma dans Webflow

Le plugin ne fait pas que copier une mise en page. Depuis l'onglet Design system, la sélection d'une frame remonte les composants Figma qu'elle contient et les variables auxquelles ils sont connectés, puis les envoie vers Webflow. Le transfert se termine côté Webflow, dans les applications, en ouvrant l'application native Figma to Webflow : on choisit ce qu'on importe, et les composants apparaissent ensuite dans le projet, prêts à être glissés à la place des éléments existants.

Deux choses à connaître avant de s'énerver :

• Le plugin annonce parfois ne rien trouver alors que la sélection est bonne. Le fermer et le rouvrir suffit.
• Les variables s'importent une collection à la fois. Si le fichier Figma en compte plusieurs, il faut les envoyer séparément.

Style guide et réglages du plugin

Les réglages permettent de choisir l'unité de la conversion, pixels ou rem, le rem étant le bon choix si le projet Webflow suit la convention Client-First.

Le même écran propose de copier les styles locaux de Figma, textes et couleurs. Attention à ne pas confondre : il s'agit bien des local styles, pas des variables. Le plugin génère un bloc à coller dans une nouvelle page Webflow, une style guide qui arrive avec ses tailles et ses classes. Ces classes se réappliquent ensuite sur les titres et les textes du projet, ce qui donne une alternative à des tailles définies élément par élément. Les couleurs, elles, ne suivent pas : elles se redéfinissent sur la classe ou sur la section.

Conclusion

Le plugin ne remplace pas la construction dans Webflow, il supprime la recopie. À condition d'avoir fait le travail en amont : auto layout partout, et tags HTML posés un par un.