Comment convertir son webdesign Figma sur Webflow

Webflow est l’outil par excellence pour créer une page web sur-mesure. En effet, Webflow se vante de pouvoir recréer n’importe quel webdesign au pixel prêt contrairement à ses concurrents Wordpress, Wix, Shopify qui se basent sur un système de personnalisation de template.

Il vaut mieux alors préparer au préalable cette étape de design sur un logiciel à part. Cela serait une erreur de se lancer dans la création d’un website sans savoir à l’avance ce que l’on intègre (jetez un oeil à nos process de création d'un site internet). Pour cette première étape de prototype, nous utilisons chez Elias 2 logiciels professionnels qui n’ont plus besoin de faire leurs preuves.

Choisir les bons outils : Figma, Adobe XD

Adobe xd (de la suite Adobe) qui possède une prise en main très facile et qui est spécialisé dans la réalisation d’interfaces. Il existe aussi Figma qui possède un accès sur navigateur et qui est un outil de prototype collaboratif (et qui possède également de nombreux plugins). Que vous travaillez sur l’un ou sur l’autre, les étapes seront semblables.

Sachez bien (si c’est ce que vous recherchez) qu’il n’existe pas de simples convertisseurs en ligne pour passer de Figma à Webflow. Les deux logiciels étant bien trop complexes et nécessitant beaucoup trop de réglages.

Bien préparer ses Assets sur Figma

Tout d’abord, vous devrez demander au webdesigner une maquette propre et terminée avant de songer à vous lancer dans la création de votre solution web (même si elle reste statique). Pour cela, vous n’avez pas forcément besoin qu’elle soit déclinée en desktop et mobile (même si c’est préférable). Un autre + est également l’ajout d’une partie prototypage, histoire de vous mettre d’accord avec le développeur sur les animations et redirections à implémenter dans le futur website.

Exporter tous vos assets

Une fois votre design terminé, il vous faudra l’exporter. Pour cela, le développeur aura besoin des visuels de chacune des interfaces. Il aura également besoin d’avoir dans un fichier distinct chacune des images que l’on peut voir dans la maquette (il devra par la suite les implémenter dans Webflow, il n’est pas possible de juste « copier-coller » ces éléments).

Optimiser vos assets

Attention au poids et à la taille des images lorsque vous les exportez. Il faudra trouver le bon compromis pour que celles-ci soient en haute qualité, sans pour autant ralentir le temps de chargement de votre website. Nous recommandons de préférer le jpg quand cela est possible (image sans fond transparent). S’il s’agit de petits icons ou illustrations vous pourrez utiliser un format vectoriel .SVG. Enfin si vous n’avez pas le choix vous utiliserez l’extension .png qui est souvent assez lourde.

Vous n’oublierez pas également de fournir dans cette liste d’assets les aperçus Webclip et Favicon (au bon format 32x32px et 256x256px pour l’aperçu de l’icon dans le navigateur), les fichiers de typographies, l’icon du menu hamburger pour mobile.

Commencer son projet sur Webflow

Voici un article complet qui vous explique pourquoi choisir Webflow si vous n'êtes pas encore convaincu. 

À partir de cette étape, vous êtes censé ne plus avoir besoin du designers UI/UX (il pourra venir tester les pages à la fin du projet). Vous allez donc pouvoir vous lancer dans le développement de votre site sur Webflow. Notez bien que votre designer ne doit pas commencer à intégrer la maquette tout de suite, vous risquez de perdre du temps. Mieux vaut bien paramétrer et structurer l’ensemble de son site avant de commencer.

La page Styleguide

Le ou les expert(s) Webflow devront commencer par créer une page Styleguide, où vous pourrez designer vos attributs de style par défaut (comme les titres, les boutons & liens, les paragraphes , les couleurs utilisées etc..). À la suite de quoi, vous pourrez ajouter tous vos assets. Vous pourrez également commencer à paramétrer le site en indiquant le titre du projet, en personnalisant l’url de tests, en ajoutant les favicon, Webclip, typographies.

Ce ne sera qu’après avoir fait toutes ces étapes que vous pourrez réellement débuter le développement de votre site sur Webflow. Nous vous conseillons, si vous n’êtes pas à l’aise avec le webdesign (que vous le jugez complexe), de soigneusement réfléchir à l’indentation et à la structure des éléments avant de vous lancer dans la personnalisation de ces derniers.

Structurer votre site internet avec les classes

Veillez également à faire toujours appel aux bonnes classes et à utiliser des combos classes pour ne pas perdre trop de temps. Vous pourrez également utiliser un système de classes pour les animations similaires. La convention web souhaite que toutes vos classes soient écrites en anglais et qu’elles utilisent des noms logiques.

L’indentation de vos éléments doit aussi être simple : chaque section contient un container possédant une classe « container ». Cela vous permettra de plus facilement régler par la suite le responsive de votre site. Pour cette partie, veillez à respecter la hiérarchie des formats : commencez par desktop, puis iPad, puis téléphone. Faites de même avec les plus grands écrans.

Le petit + pour obtenir un maximum de visibilité : le SEO.

Le webdesign ne fait pas tout: créer un site pour créer un site n’a aucun sens, il y a toujours un objectif à atteindre derrière un projet web. Pour atteindre ce projet, vous aurez besoin d’un site web performant.

Vous pourrez lui offrir de la visibilité en paramétrant convenablement le SEO de votre site (référencement naturel Google). Vous ferez attention aux choix des balises headings : chaque page contient un seul H1 puis plusieurs H2, H3 etc… Vous n’oublierez pas d’ajouter les metas données dans les paramètres de chacune des pages. Enfin il faudra indiquer aux moteurs de recherche la signification de chacune de vos images en y ajoutant une balise alternative.

Veillez à tester plusieurs fois votre site et à respecter les règles RGPD en vigueur.

Et puis il ne vous restera plus qu’à mettre en ligne votre site.

Bonus : nos recos pour un site web unique

Aujourd'hui il est de plus en plus difficile de créer l'effet "Wahou" chez l'utilisateur. Voici quelques techniques pour attirer l'attention de vos utilisateurs dès l'arrivée sur votre site Webflow.

Cela sera directement lié à votre branding (oui, le webdesign ne fait pas tout). N'hésitez pas à inclure dans votre stratégie d'image de marque quelques tendances de branding 2022.

‍