Figma to Webflow, allier design et performance

Figma et Webflow, le match 💜

Depuis quelques années, les outils de création de sites web sont en plein essor. Grâce à leur accessibilité et leur puissance, les logiciels tels que Figma et Webflow font de plus en plus d'adeptes.

‍

Webflow, le CMS le plus puissant du marché

Webflow est une solution de création de sites web basée sur le cloud. Il se présente comme un outil alliant responsive design, CMS, et plateforme d'hébergement. Il permet donc d'utiliser la logique d'un CMS (Content Management System), avec toutes les fonctionnalités avancées que l'on attend des solutions de création de site.

C'est d'ailleurs ce qui fait de lui un outil très puissant, et donc le deuxième logiciel de création de site nocode, le plus utilisé au monde. Rapidement, Webflow rattrape son premier concurrent Wordpress, qui commence à perdre de nombreuses parts de marché.En effet, même si Wordpress était auparavant une solution incontournable pour créer un site, elle n'est pas toujours la plus appropriée.

Webflow s'est rapidement inscrit dans le "No code movement". Pas besoin d'être développeur pour créer des sites internet, même s'il n'est pas toujours adapté aux débutants.

‍

Figma, l'outil aux fonctionnalités uniques

Figma est un logiciel de conception vectorielle, basé sur le cloud. La plupart des concepteurs et designers la considèrent comme la meilleure application pour soutenir les projets de conception collaborative.

Figma, c'est un outil qui donne accès à tous les éléments dont nous avons besoin pour la conception de site web. Il est différent des autres outils de conception. C'est un outil collaboratif, qui prend en charge le processus de conception produit, permet de créer des icônes, graphiques, présentations, visuels dynamiques, maquettes et prototypage, etc.

‍

• Un générateur de code pour le transfertFigma permet aussi aux développeurs d'inspecter, copier et exporter le CSS à partir du fichier de conception et l'adapter à tout type d'appareil (web, iOS, Android). Il est également possible de d'ajuster la taille du cadre pour tester les différentes tailles d'écran.

• Une large communauté de concepteurs et développeursFigma comme Webflow, ont tous deux une large communauté de concepteurs et développeurs, qui partagent des templates, ou encore des plugins, pour améliorer les fonctionnalités et rendre les logiciels encore plus puissants, et enrichir le travail de chacun des utilisateurs.

‍

Notre avis sur le plugin Figma to Webflow

Le tout nouveau plugin "Figma to Webflow" développé par Webflow vise à simplifier radicalement le processus de conversion des maquettes Figma en sites Web sur Webflow. En utilisant une simple fonction de copier-coller, il contourne la nécessité de passer par l'intégration traditionnelle.

Son objectif principal est de réduire, voire d'éliminer, les obstacles techniques auxquels certains designers peuvent être confrontés, accélérant ainsi considérablement le processus de développement Web et économisant du temps.

Pour les designers moins familiers avec le codage, qui cherchent à créer des prototypes fonctionnels rapidement, ce plugin semble être une solution idéale.

Nous l’avons testé, et voici notre avis !

‍

Les + du plugin Figma to Webflow

Tout d'abord, le plugin Figma to Webflow se distingue par sa convivialité. Son installation depuis l'onglet Community de Figma est aisée. Une fois installé, il suffit de sélectionner la maquette à exporter vers Webflow, puis d'utiliser le bouton "Export to Webflow" pour transférer les éléments désirés vers la plateforme Webflow.

Deux options s'offrent à vous : soit vous avez déjà réalisé vos maquettes, soit vous pouvez les élaborer en vous appuyant sur les structures prédéfinies offertes par le plugin.

Un aspect notable réside dans la performance du responsive design, particulièrement efficace avec les modèles préétablis du plugin. Cependant, un ajustement manuel sera nécessaire pour chaque dispositif si votre design est basé sur une structure personnalisée.

Le plugin conserve les dénominations de calques, les palettes de couleurs et les styles typographiques utilisés dans Figma, ce qui assure une synchronisation aisée entre les conceptions réalisées dans Figma et les éléments intégrés dans Webflow.

Enfin, l'intégration fonctionne de manière fluide avec les auto-layouts, respectant rigoureusement la mise en forme et identifiant correctement les éléments tels que les sections et les balises de navigation.

‍

Les limites du plugin

Le principal inconvénient réside dans l'incapacité du plugin à gérer les collections CMS.

Les animations créées via le prototypage dans Figma ne sont pas prises en charge et les positions absolues. Tout objet situé en dehors de l'auto-layout est automatiquement positionné en relatif dans Webflow.

Une fois que vous avez exporté votre maquette, il n'y a pas de retour en arrière. Les modifications apportées à votre design dans Figma ne sont pas automatiquement synchronisées avec Webflow. C'est un processus à sens unique. Il est donc impératif de vous assurer que votre design correspond à sa version finale avant d'effectuer l'exportation vers Webflow. Dans le cas contraire, des ajustements manuels seront nécessaires.

‍

Conclusion

Le plugin Figma to Webflow est un outil précieux pour convertir des designs Figma en sites Webflow, optimisant ainsi le workflow entre designers et développeurs. Il permet une intégration fluide, bien que son efficacité dépende de la complexité du design et de la compétence de l'utilisateur

Ce plugin est idéal pour ceux qui cherchent à améliorer la collaboration entre le design et le développement web, mais il ne s’adapte pas (encore) aux designs complexes.