La semaine dernière, le Webflow Labs a fait une annonce majeure en lançant la première version du plugin Figma to Webflow. Ce plugin "révolutionnaire" promet de transformer facilement votre design - maquette Figma - en un site Webflow entièrement réactif (responsif) grâce à un simple copier-coller.

La promesse est belle. Mais comment cela se traduit-elle dans la pratique?

Découvrons-le ensemble dans cet article.

Plugin Figma to Webflow

C'est le rêve de beaucoup de designers : pouvoir donner vie à leur design sans dépendance à des développeurs. C'est aussi l'argumentaire principal de Framer, un outil no-code tout-en-un, qui permet de transformer son design en site internet "en un clic".

Ainsi, dans le meilleur des mondes, voici comment fonctionne le plugin !

Comment fonctionne le plugin ?

Le principe est simple :

1. Télécharger le plugin sur votre compte Figma
2. Connecter votre plugin Figma to Webflow à votre projet Webflow
3. Sélectionner la frame de votre maquette Figma
4. Run le plugin Figma to Webflow
5. Copier les éléments (sections, composants, variables)
6. Coller votre design (cmd + V ou control + V) dans la balise body de votre projet webflow !
7. 🪄

Découvre un exemple en direct dans cette vidéo TikTok ! (8 secondes top chrono ? 🏎)

Mais en réalité... il y a des complexités techniques à consider :

• L'intégralité de votre design Figma doit être en Auto Layout (et cela est très compliqué pour certains éléménts)
• ⚠️ Attention à la nomination des éléments de votre fichier Figma, ils deviendront des classes CSS sur votre site Webflow
• Il n'est pas possible de créer de combo classes sur Figma, ce qui limite l'utilisation de Client-First. Exemple : .padding-top.padding-large.

En savoir plus avec l'article complet de la Webflow University

Tester le plugin Figma to Webflow

Notre avis sur l'outil

En conclusion, la première version du plugin Figma to Webflow est très prometteuse et intégrée intelligemment dans votre workflow, il pourrait vous faire gagner du temps dans le développement de certains projets.

Cependant, il reste encore des points à clarifier en termes de SEO, structure des classes CSS et utilisation sur des sites web de tailles plus importantes. Vous ne pouvez pas non plus utiliser la fonctionnalité Collection List CMS depuis Figma.

Par contre, cette annonce est surtout un formidable coup de communication qui vient contrer les arguments de l'outil de construction de sites web no-code concurrent, Framer, qui avait utiliser le workflow "design, publish, done." comme coeur de stratégie.

Bravo Webflow ! 😉