Figma to Webflow : un plugin révolutionnaire ?
Si vous êtes un designer et que vous souhaitez créer votre site sur Webflow, il existe un outil magique qui vous permet de passer de Figma à Webflow en un seul clic : le plugin Figma to Webflow.
Curieux de voir comment cela fonctionne ?
Alors, comment marche le plugin Figma to Webflow?
Le plugin vous permet de traduire les layers (couches) de Figma en HTML et CSS, puis de les importer directement sur Webflow.
Cette traduction inclue : vos typographies, couleurs et gradients, images mais aussi les ombres, les bordures et surtout les auto layout.
Comment utiliser le plugin ?
Vous pouvez utiliser ce plugin en quelques étapes :
- Ouvrez le plugin sur votre fichier Figma
- Connectez votre compte Webflow au plugin
- Sélectionnez un élément de votre maquette Figma
- Copiez-le
- Rendez-vous sur votre projet webflow et collez votre design dans le designer
Et voilà, le plugin se résume en quelques étapes.
Néanmoins si vous voulez un résultat optimal, il faudra respecter quelques règles.
Quels sont les contraintes de ce plugin ?
En effet, si vous souhaitez que votre design s’intègre correctement sur votre site, il faut avoir les éléments suivant en tête.
Regardons de plus près :
Attention à la nomenclature : Lorsque vous coller un élément de votre design sur Webflow, le plugin va créer une nouvelle classe CSS. Donc si vous n'avez pas bien nommé votre fichier figma, vous allez vous retrouver avec des classes “Div 666”
Vous ne pouvez pas faire de combo classe : Gardez à l'esprit que les classes combo de Webflow n’existent pas sur Figma. Elles ne seront donc pas transfèrables.
Vous ne pouvez pas importer vos animations Figma. Il faudra les refaire dans la partie interaction de Webflow.
Vous devez absolument créer tout votre maquette en auto layout.
Alors on en pense quoi ?
En résumé, le plugin Figma to Webflow offre une solution intéressante pour accélérer l’intégration de certains layouts. Néanmoins, il est important de noter que pour que tout fonctionne correctement, il faudra passer un peu de temps à bien optimiser les maquettes Figma pour que l’intégration se fasse correctement.
Alors préférez gagner du temps à l’intégration ou lors de la phase de conception ? Tout dépendra de vos besoins.
Pour ma part, je l’utiliserai dans l’intégration d’éléments simples comme des cards par exemple afin de gagner du temps d'intégration.
