La réponse courte
Si vous ne lisez qu'une section, lisez celle-ci.
- Le plus rapide : installez le plugin officiel Figma to Webflow, connectez votre site Webflow et transférez une section en Auto Layout avec « Sync to Webflow » (composants) ou « Copy » (éléments).
- Ce qui doit être prêt : un fichier Figma construit en Auto Layout, des calques nommés clairement et les polices personnalisées déjà ajoutées au site Webflow.
- Ce qui reste à faire : le responsive, le CMS, les formulaires, les interactions, le SEO et la recette avant mise en ligne. Le plugin transfère une mise en page, pas un site fini.
4 façons de passer de Figma à Webflow
Le plugin officiel est la voie par défaut, mais pas la seule. Choisissez selon ce dont vous aurez besoin dans Webflow : des composants réutilisables, quelques éléments rapides ou un site complet. Dans sa démonstration MCP, un agent IA a rempli un site vide en un peu plus de dix minutes (article Webflow).
| Méthode | Ce que vous obtenez dans Webflow | Idéal pour | Points d'attention |
|---|---|---|---|
| Plugin : Sync to Webflow + app Webflow | Composants, variables et styles importés avec l'app Figma to Webflow. | Design systems et sections réutilisées sur plusieurs pages. | Auto Layout obligatoire ; une seule collection et un seul mode de variables par synchronisation. |
| Plugin : Copy (copier-coller) | Éléments et classes collés directement dans le Designer. | Sections ponctuelles, démarrage rapide d'une mise en page. | En cas de conflit de classe, le raccourci de collage choisi crée, réutilise ou met à jour la classe. |
| Webflow MCP + agent IA | Variables, classes, composants et assets créés par un agent connecté à Figma et à Webflow. | Premier jet rapide d'une page ou d'un template. | Webflow termine sa propre démonstration par une relecture : structure, responsive et nommage. |
| Intégration manuelle par un développeur | Un site construit d'après la maquette, avec classes, CMS et interactions définis à l'avance. | Sites en production, fichiers sans Auto Layout, responsive complexe. | Plus coûteux qu'en autonomie ; voir l’intégration sur mesure. |
Préparer le fichier Figma avant l'export
La qualité du transfert se joue dans Figma. Le guide Auto Layout de Figma explique les réglages de taille et de retour à la ligne ; voici ce qui compte pour Webflow.
Auto Layout partout
Seuls les calques en Auto Layout peuvent être synchronisés ou copiés. Pour chaque bloc, décidez s'il remplit l'espace (fill), s'adapte à son contenu (hug) ou garde une taille fixe.
Des noms de calques utiles
Chaque nom de calque devient une classe Webflow. Remplacez « Frame 427 » par hero, card ou button. Les noms button, paragraph ou heading définissent aussi la balise HTML.
Polices et images
Ajoutez les polices personnalisées au site Webflow avant le transfert, sinon elles sont perdues. Les images et icônes vectorielles arrivent dans le panneau Assets du site sélectionné.
Composants ou contenu
Une carte réutilisable est un composant ; les articles affichés dedans sont des données CMS, à modéliser dans une collection.
Une section test d'abord
Prenez une vraie section avec un titre, une image, un lien et une carte répétée. Testez-la avec un titre plus long avant de transférer toute la page.
Utiliser le plugin Figma to Webflow en 7 étapes
L'interface du plugin est en anglais : les libellés sont cités tels quels. Étapes vérifiées dans la documentation officielle de Webflow le 4 novembre 2026.
1. Installer et autoriser le plugin
Depuis la page du plugin, cliquez sur « Open in… », choisissez un fichier puis « Run ». Cliquez sur « Next » → « Connect », cochez les sites ou Workspaces Webflow et validez avec « Authorize app ».
2. Choisir le site de destination
Sélectionnez le site en haut du plugin (« Choose Webflow site ») : c'est là qu'iront les images. Vérifiez les classes et variables déjà présentes, et ajoutez vos polices personnalisées.
3. Synchroniser variables et styles
Onglet « Variables » : une collection et un mode, puis « Sync to Webflow ». Onglet « Styles » : vos styles de texte et d'effet deviennent des classes. Unités (px, em, rem) et taille de base se règlent dans les paramètres.
4. Transférer les calques
Onglet « Layers » : sélectionnez un frame ou un composant, cliquez sur « Continue », puis sur « Sync to Webflow » pour créer des composants, ou sur « Copy » pour coller de simples éléments dans le Designer.
5. Importer dans Webflow
Ouvrez l'app Figma to Webflow depuis le panneau Apps, cliquez sur la dernière synchronisation, cochez les éléments voulus puis « Import selected items ». Une variable décochée devient une valeur fixe.
6. Vérifier classes et responsive
Contrôlez les conflits de classes, les balises de titre et le comportement entre les points de rupture, avec des textes plus longs que dans la maquette.
7. Finir le site et publier
Reliez le CMS, configurez les formulaires et leurs messages de succès et d'erreur, ajoutez les interactions, puis vérifiez titres, meta descriptions, redirections, sitemap et navigation au clavier.
Limites du plugin Figma to Webflow en 2026
Vérifiées dans le centre d'aide Webflow le 4 novembre 2026. Elles déterminent ce qui passe proprement et ce que vous terminerez à la main.
Safari non pris en charge
Le plugin ne fonctionne pas dans Safari. Utilisez Chrome ou l'application de bureau Figma.
Pas de variantes
Les variantes responsive, d'état et de style ne passent pas : les états comme le survol se recréent dans Webflow.
Une collection de variables à la fois
Une seule collection et un seul mode par synchronisation, en px, em ou rem. Un thème clair et un thème sombre se synchronisent donc l'un après l'autre.
Pages longues en plusieurs fois
Webflow recommande de synchroniser quelques sections ou composants à la fois plutôt qu'une page entière.
Empilement responsive
Vous choisissez quand un calque passe en colonne : Tablet (991–767 px), Mobile landscape (767–478 px), Mobile portrait (478–0 px) ou « Not responsive ».
Pas en dessous de 250 px
Le réglage responsive est indisponible sur un calque de moins de 250 px de large ou déjà empilé verticalement.
Le plugin Figma to Webflow ne fonctionne pas ? Les correctifs
Corrigez le réglage en cause avant de décider de reconstruire toute une section.
| Symptôme | Cause probable | Solution |
|---|---|---|
| Transfert impossible | Safari, ou calques sans Auto Layout | Passez sur Chrome ou l'app Figma ; appliquez l'Auto Layout aux calques à transférer. |
| Images absentes | Mauvais site sélectionné dans le plugin | Vérifiez le menu « Choose Webflow site », puis relancez le transfert. |
| Le composant est devenu un simple élément | Copier-coller au lieu de la synchronisation | Utilisez « Sync to Webflow » pour créer un composant réutilisable. |
| Classes en double (« Button 2 ») | Conflit avec une classe existante | Ctrl + V (Cmd + V) crée une nouvelle classe ; Ctrl + Maj + V (Cmd + Shift + V) réutilise l'existante ; Ctrl + Alt + V (Cmd + Option + V) la met à jour avec les styles Figma. |
| Option responsive grisée | Calque de moins de 250 px ou déjà vertical | Élargissez le calque ou gérez l'empilement directement dans Webflow. |
| Mauvais niveau de titre | Un calque nommé heading devient un H1 | Choisissez la balise à la main dans le plugin (H1–H6, Div, P…) ou dans Webflow. |
| Éléments supprimés à la resynchronisation | Élément retiré dans Figma mais présent dans Webflow | Dans l'app : acceptez la suppression, créez un nouveau composant (la synchronisation s'arrête) ou restaurez l'élément dans Figma. |
Checklist responsive et mise en ligne
À dérouler sur votre fichier, puis sur le site publié.
Avant le transfert
Pages et sections listées · comportement de chaque bloc défini (fill, hug, wrap, empilement) · polices et images prêtes · une section test transférée sur le bon site.
Après le transfert
Typographie, couleurs et espacements comparés à la maquette · classes, composants et variables relus · largeurs étroites testées avec du vrai contenu · CMS, liens et interactions branchés.
Avant la mise en ligne
Formulaires testés (envoi, succès, erreur) · titres, meta descriptions, canonicals, hiérarchie des titres et textes alternatifs · redirections 301 et sitemap · focus clavier, contrastes et passation.
Faire appel à un développeur Webflow : quand et à quel prix ?
Le plugin est gratuit et efficace pour une section propre en Auto Layout. Un site de production demande davantage.
- Le plugin suffit si : votre fichier est entièrement en Auto Layout, la page reste simple et vous connaissez le Designer Webflow.
- Un développeur est utile si : le fichier n'est pas en Auto Layout, ou si le site a besoin d'un CMS, d'animations ou d'une reprise SEO.
- Le coût : mes intégrations Figma vers Webflow à périmètre fixe démarrent à 2 400 $ après analyse du fichier. Le détail par périmètre est sur la page coût d’une intégration Figma to Webflow (en anglais).
- L'hébergement : s'y ajoute un plan de site Webflow. Au 21 octobre 2026 : Basic à 15 $/mois et Premium, avec CMS, à 25 $/mois, facturés à l'année (tarifs Webflow).
- La langue : je travaille en anglais et en tchèque ; nos échanges se feront donc en anglais.
Guides associés
Pour aller plus loin. Ces guides détaillés sont en anglais.
Comparer les convertisseurs
Alternatives au plugin Figma to Webflow : outils, offres gratuites et limites.
Le chemin inverse
Webflow vers Figma : récupérer un site en ligne dans un fichier Figma.
Choisir le bon outil
Figma vs Webflow : outil de design, site de production ou Figma Sites ?
Déléguer l'intégration
Intégration Figma vers Webflow par un développeur Webflow Certified Partner.
Questions fréquentes sur Figma vers Webflow
Comment exporter un design Figma vers Webflow ?
Construisez le design en Auto Layout, installez le plugin officiel Figma to Webflow, connectez votre site, puis utilisez « Sync to Webflow » (composants) ou « Copy » (éléments) et vérifiez le résultat dans le Designer.
Le plugin Figma to Webflow est-il gratuit ?
Oui, la fiche de l'app sur le marketplace Webflow indique « Free » (vérifié le 4 novembre 2026). La publication sur votre domaine et le CMS dépendent en revanche du plan de site Webflow.
Pourquoi le plugin Figma to Webflow ne fonctionne pas ?
Le plus souvent : Safari (non pris en charge), des calques sans Auto Layout, un mauvais site sélectionné ou des polices personnalisées absentes de Webflow.
Faut-il tout reconstruire après le passage par le plugin ?
Non. Gardez les composants et classes qui fonctionnent et corrigez ce qui le demande : mise en page, responsive, CMS. Le plugin fournit une base, pas un site terminé.
Le plugin gère-t-il les variantes et le responsive ?
Les variantes ne sont pas prises en charge. Pour le responsive, vous choisissez à quel point de rupture un calque passe en colonne ; le reste se règle dans Webflow.
Peut-on importer une maquette Figma dans Webflow avec l'IA ?
Oui. Webflow a montré un agent IA qui, via les serveurs MCP de Figma et de Webflow, crée variables, classes, composants et assets. Considérez le résultat comme un premier jet à relire.
Combien coûte une intégration Figma vers Webflow par un professionnel ?
Le prix dépend des pages, du CMS et des interactions. Mes intégrations à périmètre fixe démarrent à 2 400 $ après analyse du fichier Figma.
Votre maquette Figma est prête ?
Envoyez le lien du fichier Figma, la liste des pages et les fonctionnalités attendues : je vous réponds avec un devis à prix fixe pour une intégration Webflow responsive, prête pour le CMS. Je communique en anglais et en tchèque.
