Créez votre site Webflow grâce au nouveau plugin Figma !

Figma vient de sortir un nouveau plugin qui ne changera sans doute pas votre vie ... mais votre façon de créer votre site Webflow !

La promesse : simplicité, rapidité 🚀

Il est désormais possible de passer de Figma à Webflow encore plus facilement !

Mais comment ?

J'y réponds dans cet article 👇

Un nouveau plugin chez Figma ?

Qu'est-ce que Figma ?

Si vous êtes ici, je suppose que vous connaissez Figma 😅 Néanmois, un rappel ne fait pas de mal !

Figma est un outil de conception d'interface utilisateur et de conception collaborative basé sur le cloud. Il permet aux utilisateurs de toutes sortes de design, des applications mobiles et web, des graphiques, des icônes et d'autres éléments visuels. C'est outil no-code es très populaire dans le monde du web design car il permet la collaboration en temps réel entre les membres d'une équipe, ce qui permet aux designers, développeurs et autres parties prenantes de travailler ensemble sur un projet.

Présentation du plugin

Le nouveau plugin présenté par Figma permet de coller directement vos designs Figma dans Webflow sans avoir à recréer chaque élément de design un par un ! Techniquement, ce plugin traduit en fait les calques de Figma en leur équivalent HTML et CSS - qui est le code que Webflow génère lorsque vous concevez le visuel de votre site.

Installez le nouveau plugin Figma

Pour commencer à bénéficier ce petit bijou de technologie, rien de plus simple. Il vous suffit d'installer le nouveau plugin de Figma. Vous pouvez le faire directement depuis ce lien et vous laisser guider 😉

‍

‍

De retour sur Figma, si vous ne voyez pas le plugin, allez dans Resources < Plugins et cliquer sur "Run" qui apparait à côté du nom du plugin.

Et voilà ! ✌🏼

Créez votre design sur Figma

La deuxième étape consiste bien évidemment à créer le design de votre site web sur Figma. Ça va de soi 😇

Quelques recommandations pour le réussir :

• créez une section hero accrocheuse : c'est la première chose que les visiteurs verront en visitant votre site 🤞 Cette section doit capturer l'attention de l'utilisateur et donner une première impression positive de votre marque.
• ajoutez une barre de navigation responsive : la barre de navigation doit être cohérente sur toutes les pages de votre site pour faciliter la navigation. Vous pouvez choisir parmi une sélection de layouts pré-construits proposés par Figma.
• créez des pages individuelles en utilisant des éléments de design cohérents : Figma offre une variété d'outils intuitifs pour vous y aider. En utilisant des fonctionnalités telles que les grilles, les composants et les styles, vous pouvez créer un design cohérent et professionnel pour votre site web.

Collez le design sur Webflow

Et maintenant ? Le plugin traduit automatiquement vos frames sur Figma. Il est important de bien renommer vos calques, pour que vous puissiez facilement vous y retrouver sur Figma, mais surtout sur Webflow.

Pour activer le plugin, il vous suffira de sélectionner la frame de votre maquette Figma, d'ouvrir le plugin, de choisir votre site Webflow pour le connecter et de cliquer sur "Copy to Webflow".

Ensuite, vous pourrez ouvrir Webflow, vous rendre sur votre projet et coller directement votre design ! 😍 Pour cela, "commande + V" si vous êtes sur Mac ou "contrôle + v" si vous êtes sur PC (oui je vous apprends à faire un copié-collé 😆)

Puis admirez votre design apparaitre comme par magie ! 🤩

‍

‍

Attention, sachez que les changements que vous ferez sur Webflow ne  se transféreront pas à Figma.

‍

Si vous souhaitez approfondir ces sujets, Webflow vous en parlera mieux que moi, je vous laisser consulter les leçons de la Webflow University.

Bonus : Comment designer son site Webflow sur Figma

Oui mais comment designer son site Webflow sur Figma ? Envie d'approfondir vos connaissances ? Suivez le guide ! ✌🏼

‍