Si vous êtes un webdesigner, vous avez probablement déjà utilisé Figma pour créer des maquettes de sites web. Et si vous êtes un développeur Webflow, vous savez combien il est important de créer une maquette claire et bien organisée avant de commencer à construire votre site Web. Mais comment migrer efficacement votre maquette Figma vers Webflow sans perdre de temps à tout reconstruire ? C'est là que notre nouvelle formation Figma to Webflow disponible gratuitement sur la Digidop Académie entre en jeu !

Webflow a récemment sorti un nouveau plugin permettant de migrer "en un clic" une maquette Figma vers un site Webflow. Un annonce qui a fait beaucoup de bruits au sein de la communauté Webflow, puisque c'est la première fois qu'une migration aussi simple est possible. Aussi simple ... à condition de savoir l'utiliser en tout cas ! Car si vous souhaitez avoir un rendu optimal et cohérent sur Webflow, il y a un travail très minutieux à réaliser en amont sur Figma.

Dans cette formation en 5 épisodes, nous vous montrerons donc comment utiliser Figma pour créer des maquettes de site Web claires et organisées, qui sont facilement convertibles sur Webflow. Nous aborderons les fonctionnalités clés de Figma et plus précisément de ce plugin, pour vous permettre de réussir vos migrations vers Webflow. Nous passerons également en revue la méthodologie Client-First de Finsweet, et vous montrerons comment l'intégrer à une maquette Figma, pour une meilleure organisation des classes CSS dans Webflow.

Voici un aperçu des différents épisodes de notre formation Figma to Webflow :

Épisode 1 : Autolayout dans Figma

Si vous souhaitez utiliser le plugin Figma to Webflow, vous devez maîtriser la fonctionnalité d'autolayout dans Figma. Avant de passer à la conception, il est donc essentiel de comprendre ce qu'est un autolayout et de savoir comment l'utiliser dans Figma. Pour les utilisateurs de Webflow, les autolayout ressemblent aux flexbox et vous permettent de gérer la position des éléments par rapport aux autres. Grâce aux autolayout, vous pouvez facilement ajuster les marges et les paddings, intervenir sur les éléments, et organiser votre maquette de manière efficace.

Dans cet épisode, nous vous montrons comment utiliser les Autolayout dans Figma pour créer des maquettes Web structurées et adaptables. Vous découvrirez les bonnes pratiques à adopter pour une utilisation optimale des autolayout, et nous vous montrerons comment ils peuvent vous aider à migrer votre maquette vers Webflow plus rapidement.

Episode 1 : Autolayout

Épisode 2 : Templates de layouts & structure

Dans cet épisode, nous faisons un focus sur les deux types de templates proposés par le plugin Figma to Webflow. Vous avez en effet la possibilité deux types de modèles préconçus pour vous aider à concevoir des maquettes web qui seront facile à migrer vers Webflow. Parmi ces templates vous aurez le choix d'utiliser :

1. Les layouts : ce sont des sections pré-conçues que vous pourrez réutiliser telles quelles. Par exemple une navbar, un footer, une section logo, etc.
2. Les structures : ce sont des frames de section ou colonnes conçus en autolayout que vous pourrez assembler pour créer vos propres layouts personnalisés.

En utilisant ces templates, vous bénéficiez de nombreux avantages tels que des maquettes déjà conçues en autolayout, une balise HTML prête à l'emploi, une meilleure conversion des éléments dans Webflow et une meilleure responsivité après migration.

Nous vous montrons donc comment utiliser ces deux types de templates avec le plugin Figma pour réduire le temps de création de votre maquette et faciliter son importation dans Webflow.

Episode 2 : Plugin Figma to Webflow

Épisode 3 : Resizing dans Figma

La conversion d'une maquette Figma en un site Webflow demande une gestion optimale du responsive. Si les autolayouts sont un élément clé pour une migration réussie, il est important d'aller plus loin en utilisant la fonctionnalité de resizing dans Figma. Cette fonctionnalité permet d'attribuer un comportement d'adaptabilité à chaque élément de la maquette. Dans cet épisode, nous approfondissons les trois options de redimensionnement proposées par Figma :

1. Fixed Width : pour préserver la taille d'un élément sur tous types de supports
2. Hug Contents : pour adapter la taille d'un élément au contenu qu'il contient
3. Fill container : pour adapter la taille d'un élément au container dans lequel il est intégré

Au cours de cet épisode, nous allons vous montrer comment utiliser chaque option pour assurer une adaptation de votre maquette sur tous les types d'appareils. Vous apprendrez également comment utiliser ces options en combinaison avec les autolayouts et les templates de layout pour créer une maquette Figma le plus responsive possible au moment de la migration en site Webflow.

Episode 3 : Responsive Figma vers Webflow

Épisode 4 : Migration d'une maquette Figma en site Webflow

La migration d'une maquette Figma en site Webflow peut s'avérer être une étape délicate, car elle requiert la maîtrise de plusieurs notions pour éviter les erreurs. Dans cet épisode, nous allons donc passer en revue plusieurs points critiques qui peuvent survenir au moment de la migration, ainsi que les astuces pour les éviter. Nous allons également vous montrer, étape par étape, comment migrer votre maquette Figma vers Webflow.

Nous aborderons également les fonctionnalités avancées du plugin, vous permettant d'intégrer des balises HTML à vos maquettes, et de préparer la structure de vos Headinds pour le SEO. Nous verrons également comment faire un export en Rem plutôt qu'en Pixel.

Avec cet épisode, vous disposerez de toutes les informations nécessaires pour migrer avec succès votre maquette Figma vers Webflow, en évitant les pièges courants et en gagnant du temps.

Episode 4 : Migration Figma vers Webflow

Épisode 5 : Création de maquette Figma avec la méthodologie Client-First

Dans l'épisode 5 de notre série sur la migration de maquettes Figma vers Webflow, nous allons encore plus loin en intégrant directement la méthodologie de développement Client-First sur votre maquette Figma. Cette approche de développement est utilisée par Finsweet pour une hiérarchie claire et organisée des classes CSS dans Webflow. En utilisant les modèles de layout du Kit Client-First et le plugin Relume, nous vous montrons comment créer des maquettes Figma avec une nomination compréhensible des classes CSS. Avec cette méthodologie, vous pourrez facilement transformer votre maquette en site Webflow avec une structure de code optimisée.

Cette formation Figma to Webflow de la Digidop Académie vous permettra donc migrer vos maquettes Figma vers Webflow de manière fluide et efficace. Vous apprendrez également à créer des maquettes Figma pour Webflow avec une hiérarchie de classe claire et précise, ce qui vous aidera à maintenir une structure de code propre et optimisée.

Episode 5 : Maquette figma Client-First

Nouveautés 2024 : Synchroniser Design System - Variables & Composants

Webflow a récemment sorti une mise à jour de son plugin, avec de nouvelles fonctionnalités dédiées à la synchronisation des design system. Il est maintenant possible, en quelques clics, de connecter l'ensemble des vos variables et composants Figma, dans vos projets Webflow. 

On a testé, et voici notre avis sur ces nouvelles fonctionnalités :

Avantages

• Gain de temps pour les développeurs : import de variables en quelques clics
• Uniformisation de Figma avec Webflow : utilisation des mêmes variables (nomination et valeurs)
• Simplification de l'utilisation de Webflow : modification des styles grâce aux variables plutôt que depuis les classes CSS
• Synchronisation contrôlée : choix des variables et composants à connecter
• Connexion d'un design system unique pour un ou plusieurs projets Webflow
• Balisage de tags HTML depuis Figma

Limites

• Alias (de variables) non détectés par le plug-in : obligation d'utiliser des valeurs fixes sur chaque variables Figma
• Import des variables : Se fait collection par collection, il est impossible de tout importer d'un seul coup
• Responsive : impossible de créer des valeurs responsive nativement sur Webflow (2 solutions proposées dans la vidéo)
• Import de composants : complexe et limité à des composants très "basiques"
• Plus complexe à mettre en place avec l'utilisation de certains frameworks de développement

Chez Digidop, nous avons pour le moment décidé d'utiliser ce plugin pour la migration des variables de Figma vers Webflow. Mais ce plugin est un nouveau pas de géant dans la collaboration entre designers et développeurs. On suit donc de très prêt les prochaines mises à jour et on vous tient informés !