Figma d'un côté, Webflow de l'autre. Des centaines d'agences vivent dans cet espace intermédiaire, et la question revient constamment : combien de temps ça prend vraiment de convertir une maquette Figma en site Webflow opérationnel ? La réponse honnête, en 2025 : ça dépend surtout de ce que vous attendez du plugin officiel.
Webflow Labs a lancé son plugin Figma officiel en février 2025. L'annonce parlait de designs traités "jusqu'à 30 fois plus vite que la reconstruction manuelle". Ce chiffre est vrai dans un contexte très précis. Dans la plupart des projets réels, il ne l'est pas. Voici pourquoi, et ce que font les équipes qui s'en sortent bien.
Ce que le plugin officiel fait réellement
Le plugin Webflow Labs fonctionne sur un principe simple : il lit la structure de vos frames Figma et les traduit en flexbox Webflow. Trois fonctionnalités principales.
La première : la conversion des auto-layouts en flexbox. Si vos composants Figma utilisent l'auto-layout (direction, spacing, padding), le plugin génère les équivalents Webflow corrects. C'est là que le gain de temps est réel - recréer 40 composants à la main vs les importer en 10 minutes.
La deuxième : la synchronisation des variables Figma vers les variables Webflow. Les design tokens (couleurs, typographies, espacements) définis comme variables dans Figma deviennent des variables CSS dans Webflow, en px, em ou rem au choix. Pour les projets avec un système de design structuré, c'est un gain significatif.
La troisième : l'import des styles de texte et d'effets. Vos styles Figma deviennent des classes CSS dans Webflow. Chaque nom de calque Figma devient un nom de classe. Ce point a une implication importante : nommez vos calques Figma comme vous voudrez nommer vos classes CSS, avant de lancer l'import.
Deux contraintes techniques à connaître : le plugin ne fonctionne pas sous Safari (Chrome ou Figma Desktop uniquement), et il ne gère pas la responsivité sur des éléments dont la largeur est inférieure à 250px ou déjà empilés verticalement.
Les quatre choses que le plugin ne fait pas
C'est là où les attentes divergent de la réalité. Sur un projet de 10 pages avec CMS, le plugin couvre environ 30 à 40% du travail. Le reste reste manuel.
La responsivité. Le plugin importe vos layouts pour un seul breakpoint - généralement desktop. Les comportements tablette et mobile, les breakpoints, les adaptations de grille : tout ça se configure manuellement dans Webflow après l'import. Sur un site avec 3 breakpoints et 10 templates différents, c'est souvent le poste le plus long.
Le CMS. Si votre site a des pages dynamiques (blog, équipe, produits), les collections Webflow, les liaisons de données et les templates de pages CMS n'existent pas dans Figma. Le plugin n'a rien à convertir. Cette partie se construit from scratch dans Webflow, quelle que soit la qualité de votre maquette.
Les interactions et animations. Les prototypes Figma, les transitions, les hover states complexes - aucun de ça n'est importé. Webflow a son propre système d'interactions (Interactions 2.0) qui se configure indépendamment. Si votre maquette a beaucoup de mouvements, c'est un travail supplémentaire que le plugin ne réduit pas.
La réutilisabilité. Les composants Figma arrivent dans Webflow comme des éléments statiques, pas comme des composants réutilisables. Si vous voulez des composants Webflow (modifiables globalement), il faut les recréer manuellement après l'import.
La méthode hybride qui marche
Les équipes qui traitent régulièrement des projets Figma → Webflow ont convergé vers une approche qui ne choisit pas entre "tout plugin" ou "tout manuel". Elle segmente le travail selon ce que chaque approche fait bien.
Phase 1 - Import via plugin (pages statiques uniquement) : pages d'accueil, landing pages, pages À propos, Contact. Toutes les pages qui n'ont pas de logique CMS. Le plugin importe les layouts, vous corrigez les classes, vous ajoutez la responsivité. Sur 5 pages statiques, ça représente 2 à 3 heures de correction après un import de 20 minutes.
Phase 2 - Construction manuelle (CMS et interactions) : templates de pages dynamiques, collections, système de navigation global, animations. Cette phase est indépendante du plugin. Elle prend le même temps qu'en l'absence de plugin.
Phase 3 - Harmonisation : une fois les deux phases terminées, vérifier la cohérence des classes CSS entre les pages importées et les pages construites manuellement. Le plugin génère parfois des noms de classes différents de votre convention habituelle.
Le résultat : sur un site de 10 pages avec 3 templates CMS et des animations légères, le plugin économise environ 6 à 8 heures sur un projet de 40 heures. Pas 30x, mais réel.
Préparer Figma pour un import propre
Le travail de préparation dans Figma conditionne la qualité de l'import autant que le plugin lui-même. Quatre habitudes qui changent le résultat.
Nommer les calques comme des classes CSS dès le départ. "Card--featured", "Nav--desktop", "Hero__title" plutôt que "Frame 47" ou "Group 3". Le plugin utilise les noms de calques tels quels comme noms de classes Webflow. Renommer après import est fastidieux.
Utiliser l'auto-layout systématiquement. Les frames avec auto-layout sont converties proprement. Les frames avec positionnement absolu ou overlapping génèrent un HTML difficile à maintenir dans Webflow. Si des éléments se chevauchent dans Figma, le plugin ne peut pas créer une structure HTML saine.
Définir les variables Figma avant l'import. Couleurs, typographies, espacements - tout ce qui peut devenir une variable CSS doit être défini comme variable Figma (pas juste comme style). La synchronisation variables Figma → variables Webflow est une des fonctionnalités les plus utiles du plugin.
Séparer les frames statiques et les frames dynamiques. Organisez votre fichier Figma pour que les pages statiques (importables) et les templates CMS (à reconstruire) soient clairement séparés. Ça évite d'importer des frames qui vont être jetées.
Ce que ça coûte en temps réel
Des estimations honnêtes pour un site d'entreprise standard (10-15 pages, 2-3 templates CMS, animations légères), par un développeur Webflow expérimenté :
- Préparation de la maquette Figma pour l'import : 2 à 4 heures
- Import + corrections post-plugin (pages statiques) : 4 à 6 heures
- Construction CMS et templates dynamiques : 8 à 12 heures
- Responsivité complète (tous breakpoints) : 6 à 8 heures
- Interactions et animations : 4 à 8 heures selon la complexité
Total : 24 à 38 heures. Sans le plugin, comptez plutôt 30 à 46 heures sur le même périmètre. Le plugin économise du temps, pas de la complexité. Notre article sur le coût d'un site Webflow détaille les grilles tarifaires selon le type de projet.
Alternatives : Anima et la conversion directe en code
Le plugin Webflow Labs n'est pas la seule option. Anima (plugin Figma tiers) prend une direction différente : il convertit vos maquettes Figma en HTML/CSS ou React, en bypassant Webflow complètement. C'est utile si votre destination finale est un framework custom plutôt que Webflow.
Pour les projets Webflow, le plugin officiel reste préférable : il génère des structures que Webflow comprend nativement (flexbox, variables CSS, classes). Anima génère du code générique qui devra être adapté avant d'être utilisable dans Webflow.
Un dernier point souvent sous-estimé : la maintenance. Un site Webflow issu d'un import plugin bien préparé (classes nommées, variables synchronisées) est facile à faire évoluer. Un import bâclé avec 200 classes génériques "Frame-47" devient vite ingérable. Le temps investi en préparation Figma se récupère sur chaque mise à jour future. Si vous avez besoin d'un profil technique dédié sur ce type de projet, notre article sur le CTO externe aborde ce choix.
Si vous venez de récupérer un projet Webflow existant avec une structure confuse, le guide sur la reprise de projets no-code donne des méthodes applicables aussi à Webflow.
Questions fréquentes
Le plugin Figma Webflow est-il gratuit ?
Oui, le plugin Webflow Labs est gratuit. Il nécessite un compte Webflow actif (le plan gratuit suffit pour commencer). Le plugin fonctionne dans Figma Desktop ou Chrome - pas Safari.
Faut-il structurer Figma d'une certaine façon pour que l'import fonctionne ?
Oui. Les frames avec auto-layout s'importent proprement. Les éléments en positionnement absolu ou qui se chevauchent génèrent un HTML difficile à maintenir. Utilisez l'auto-layout dans Figma systématiquement, et nommez vos calques comme vous voudrez nommer vos classes CSS dans Webflow.
Le plugin importe-t-il les images et les assets ?
Les images liées (non intégrées) dans Figma sont téléchargées et importées dans l'Asset Manager Webflow. Les SVG inline sont convertis. Les images de remplissage de fond sont converties en background-image CSS. Les assets très volumineux peuvent ralentir l'import.
Vaut-il mieux construire directement dans Webflow plutôt que passer par Figma ?
Pour les projets simples (site vitrine 5-7 pages), construire directement dans Webflow sans passer par Figma est souvent plus rapide, surtout avec Webflow AI. Pour les projets complexes avec plusieurs designers, handoff client, ou système de design à maintenir, Figma reste indispensable comme source de vérité. Le plugin fait le pont entre les deux.