Cet article se fonde sur la vidéo d’Omar Farook publiée sur sa chaîne Youtube Building Tech Startups. Elle s’intitule Why I switched to Framer from Webflow et a été publiée le 23 mars 2023.
La vidéo d’Omar présente les raisons pour lesquelles l’auteur a switché de Webflow à Framer pour la conception et le développement de sites Web. Initialement, utilisateur heureux de Webflow (après avoir déjà quitté WordPress 😅), il a récemment décidé de passer à Framer, qu’il considère aujourd’hui comme un meilleur choix pour son usage spécifique : la construction de SAAS…
Webflow est, nous le savons tous, un acteur solide dans l’univers de la conception No Code/Low Code depuis 2013. Il offre une interface par glisser-déposer, une large gamme d’options de personnalisation et une gamme complète de fonctionnalités indispensables pour les développeurs. Malgré son étiquette No Code, Omar Farook classe à juste titre Webflow dans la catégorie des solutions Low Code, nécessitant des connaissances en HTML, en CSS ou en JavaScript pour construire des composants et des sites plus complexes.
Framer était initialement un outil de prototypage avancé pour la réalisation de prototypes HD. Il a récemment pivoté avec succès pour faciliter la création de sites Web responsives bâtis sur le framework React. Il s’impose lui aussi comme une plateforme No Code qui offre un CMS convivial et une expérience de création facilitée. Cependant, Framer est encore en phase initiale et peu adapté nativement pour offrir des fonctionnalités de développement avancé comme l’intégration de code personnalisé et/ou l’utilisation des APIs.
La principale différence entre les deux plateformes, selon l’auteur, est l’expérience utilisateur. Là où Framer est un « Game Changer » c’est dans sa capacité à imiter l’ergonomie et la philosophie des outils de conception. Le flux de travail de Framer est, en effet, bien plus similaire à des outils de conception UI/UX populaires comme Figma ou Adobe XD, ce qui le rend beaucoup plus facile et plus rapide à prendre en main pour les designers. Ceux-ci ne s’y sont d’ailleurs pas trompés et l’offre exponentielle de nouveaux templates disponibles pour Framer en témoigne un peu plus chaque jour. Framer offre également une précision « Pixel Perfect » lors du transfert des projets depuis Figma par simple copier-coller, économisant ainsi un temps précieux lors de la création de mises en page responsives. De son côté, Webflow propose une expérience assez similaire avec le Figma to Webflow plugin.
🔑 Points Clés :
- 🔄 Changement de Webflow à Framer pour des raisons spécifiques au cas de l’auteur.
- 🛠️ Webflow est plus mature en termes de fonctionnalités pour les développeurs car c’est une solution… Low Code.
- 🎨 Framer offre un flux de travail plus proche de celui de Figma, idéal pour les équipes en charge du design.
- ⏱️ Gain de temps significatif avec Framer lors du transfert des projets Figma.
- 📈 Les deux plateformes ont leurs avantages et inconvénients, et le meilleur choix dépend de l’expertise de vos équipes. Mais, si votre site ne nécessite pas de développement custom, Framer est une excellente solution à envisager aujourd’hui.
📹 Liens similaires :
- Designers Are Leaving Webflow… Here’s Why by Tim Gabe
- Should you REALLY Learn Framer? by Arnau Ros
🧐 Mon point de vue :
L’argument marketing majeur en faveur de Framer (et qui a très largement fait le buzz) est bien évidemment l’utilisation de l’iA qui vous assiste dans la phase de conception de façon assez bluffante mais dont les propositions ne sont pas toujours très… élégantes et proposent une ergonomie parfois datée ou douteuse ! Les vidéos sur le sujet m’ont laissé dubitatif même si je dois bien reconnaître que l’iA est plutôt bien intégrée et permet de commencer rapidement un projet. J’ai été davantage conquis par les démos de Relume Library qui se positionne désormais également comme un « AI-powered Site Builder » pour Webflow qui permet de créer un sitemap rapidement avec du contenu.
Webflow, par ailleurs, poursuit le développement de nouvelles fonctionnalités et vient d’annoncer le lancement des Webflow Apps, intégrations natives des meilleures solutions No Code actuellement disponibles sur le marché. Du côté de Framer, la dernière fonctionnalité fraîchement sortie est l’extension Chrome HTML to Framer qui permet de copier-coller des éléments de n’importe quel site Web codé en HTML et CSS directement dans Framer 🤯. Le match s’annonce donc assez féroce et passionnant entre les deux acteurs pour offrir aux utilisateurs réfractaires au code des expériences de création toujours plus fluides et intuitives.
Le grand gagnant de ce duel est également Figma qui assoit son leadership dans le domaine des outils de conception UX/UI et s’impose encore davantage comme le compagnon idéal des designers et des développeurs Web. L’arrivée des fonctionnalités récentes dans Figma (Autolayout Wrap ou gestion des CSS Flexbox, Variables, Dev Mode…) confirme d’ailleurs cette approche complémentaire… À moins que l’éditeur n’ait dans sa roadmap un projet concurrent à nous présenter prochainement ? 🤞
Pour conclure, mon choix de cœur demeure Webflow qui reste la solution la plus mature à ce jour en dépit de certaines évolutions très séduisantes offertes par Framer. Les nouvelles features offertes par Webflow confirment la capacité de la marque à faire évoluer son interface sans trop la surcharger et à continuer de s’améliorer (nouvelle API Rest, automatisations natives…) 🙏
Le point le plus clivant, mais sur lequel la communication de Framer est plutôt discrète, est l’utilisation de React, un framework JS performant mais dont la courbe d’apprentissage est vraiment raide selon moi. C’est d’ailleurs ce qui m’avait découragé pour l’adopter comme solution de prototypage il y a quelques années. Les choix de Webflow sont bien plus classiques (HTML, CSS et JS) mais offrent une possibilité d’évolution et de customisation bien plus facile et rapide. Si Framer parvient à « abstraire » React comme Webflow a réussi à le faire pour le HTML et le CSS, le jeu restera probablement très ouvert… Grande force du challenger, l’ergonomie de Framer est au top et l’éditeur a su intelligemment adapter son interface pour faire armes égales voire dépasser le monstre Webflow. Comme pour toutes les solutions No Code de conception Web offrant la possibilité d’un vrai design custom, l’objectif est bien évidemment de « cacher » le code le plus possible mais le moteur reste un critère crucial pour beaucoup d’applications destinées à évoluer dans le temps.
Les approches des deux éditeurs sont pour ainsi dire diamétralement opposées : – Framer privilégie très clairement les designers qui conçoivent leurs projets dans Figma mais la partie Développement (code) est beaucoup moins « accessible », – Webflow permet de son côté de se familiariser en douceur avec le code HTML, CSS (voire le JS) à son rythme dans une interface pensée et optimisée pour réduire les frictions.