SOMMAIRE
Curieux par nature, nous aimons sortir de notre zone de confort quand un projet s’y prête.
Nous avons justement eu un projet qui s’y prêtait, ce qui nous a donné l’occasion d’expérimenter Framer, cette plateforme SaaS de création de sites web qui permet de concevoir des sites sous un angle “no-code” ou très low-code, et définitivement axée sur le visuel. Un choix technique inhabituel pour nous, qui privilégions toujours les développements sur mesure ou l’utilisation du CMS WordPress.
Mais parfois, il faut savoir s’adapter aux contraintes d’un projet : rapidité d’exécution, budget maîtrisé, et besoin d’un rendu visuel immersif avec des animations fluides et des interactions avancées.
Spoiler : l’expérience s’est révélée plutôt concluante, et on vous raconte notre processus, de la conception à la mise en ligne.
Framer, c’est quoi exactement dans l’écosystème no-code ?
Pour ceux qui ne le connaissent pas encore, Framer est un outil de création de sites web qui mise tout sur l’approche visuelle et le no-code web design. À l’origine, la solution se positionnait comme un concurrent de Figma et Sketch, spécialisé dans le prototypage d’interfaces et les animations interactives. Mais l’équipe a opéré un virage stratégique il y a quelques années pour se positionner sur la création de sites web complets, rivalisant désormais avec des solutions comme Webflow.
Ce qui distingue Framer de ses concurrents dans l’univers des website builders, c’est son approche “designer-first”. L’outil pense le web comme un prolongement naturel du design, avec une interface qui rappelle énormément Figma : même logique de calques, même organisation en panneaux, même façon de manipuler les assets et les micro-animations. La philosophie, c’est de permettre aux UI/UX designers de passer directement de la maquette au site final, sans avoir besoin de traduire leur vision à travers un développement front-end.
Techniquement, Framer génère du code React propre, optimise automatiquement les performances web et gère nativement les aspects SEO technique (en surface …). On peut y injecter du code custom si besoin, ce qui le place quelque part entre le pur no-code et le low-code development. Cette flexibilité technique le distingue nettement des solutions plus rigides du marché.
Dans l’écosystème actuel des outils de création web, Framer se positionne comme une alternative moderne aux CMS traditionnels, particulièrement adaptée aux sites vitrines, landing pages et projets marketing nécessitant un fort impact visuel.
Pourquoi ce choix plutôt qu’un développement custom ou Webflow ?
Au départ, nous regardions du côté de Webflow, qu’on voit fleurir un peu partout sur le web et qui s’impose comme une référence dans le visual web development. Nous l’avions même envisagé sérieusement pour ce projet, connaissant sa réputation en matière de responsive design et de CMS intégré. Mais après quelques tests comparatifs entre Framer vs Webflow, notre choix s’est porté sur Framer pour plusieurs raisons très concrètes.
D’abord, la proximité avec Figma. Quand on passe ses journées sur Figma pour concevoir des maquettes web, des design systems et des prototypes interactifs, retrouver la même logique d’interface, c’est un gain de temps énorme. Pas besoin de réapprendre une nouvelle façon de penser : on transpose directement nos habitudes de workflow design.
Ensuite, la prise en main fluide. Là où Webflow demande un temps d’apprentissage assez conséquent pour maîtriser son visual editor et ses spécificités, Framer nous a permis d’être opérationnels très rapidement. Important quand on a des délais serrés et un budget à tenir.
Le contexte du projet jouait aussi en faveur de cette solution SaaS. Nous devions livrer une interface graphique immersive, avec des sections animées, des effets de parallaxe et des transitions fluides, dans un périmètre budgétaire contraint. Il nous fallait donc une solution permettant d’aller vite, et bien, sans pour autant tomber dans la surenchère visuelle ou la profusion d’animations (ce à quoi nous pourrions être tentés avec Framer).
L’approche “designer ready” de Framer nous permettait de ne pas démultiplier les profils impliqués dans la réalisation. Un binôme design/intégration suffisait là où un projet classique aurait nécessité l’intervention de plusieurs développeurs.
Bien sûr, choisir une solution comme Framer, c’est un choix en conscience. On sait qu’on s’oriente vers quelque chose de plus “figé” techniquement, loin des possibilités offertes par un CMS headless ou un développement sur mesure en termes d’administration et d’autonomie pour le client. Opter pour un format SaaS, c’est aussi accepter une certaine dépendance technologique et des coûts récurrents. Mais sur ce projet, l’enjeu n’était pas là. Il s’agissait d’un site événementiel avec une durée de vie potentiellement plus courte, donc autant y aller franco !
Méthodologie : de la conception à la bascule vers Framer
Phase de découverte et wireframing
Comme pour tout projet web, nous avons commencé par une phase de découverte client approfondie. Définition des parcours utilisateurs, architecture de l’information et objectifs, des points déjà bien dessinés par les équipes côté client. Cette étape reste identique, que le projet soit destiné à un CMS classique ou à une plateforme no-code.
Nous avons ensuite réalisé des wireframes basse fidélité, en gardant à l’esprit les spécificités de Framer. Contrairement à un projet WordPress où l’on peut se permettre des structures complexes, nous avons privilégié des layouts simples mais efficaces, sachant que la richesse viendrait des animations et des interactions.
Cette phase de wireframing nous a permis de valider l’arborescence du site, les zones de contenu principales, et surtout de réfléchir aux points d’interaction qui donneraient vie au projet. Nous avons particulièrement travaillé sur les call-to-actions, les zones de scroll animées et les transitions entre sections.
Conception des maquettes haute fidélité
Une fois les wireframes validés, nous sommes passés à la création des maquettes haute fidélité sur Figma. Cette étape a été cruciale, car nous savions que nous allions pouvoir reprendre directement certains éléments dans Framer grâce à l’import Figma natif.
Nous avons conçu un design system complet avec les composants réutilisables, la palette de couleurs, la typographie web, et surtout les états d’interaction (hover, active, focus). Cette approche atomic design s’avère particulièrement pertinente avec Framer, qui permet de créer des composants dynamiques directement dans l’interface.
L’avantage de cette méthodologie, c’est qu’elle nous a permis de prototyper les animations directement dans Figma avec des outils comme ProtoPie ou les Smart Animate de Figma, donnant au client une vision claire du rendu final avant même de basculer sur Framer.
La bascule vers Framer : import et adaptation
Moment de vérité : la migration des designs de Figma vers Framer. Contrairement à un processus classique où il faut “traduire” les maquettes en code, ici nous avons pu importer directement certains éléments grâce à la fonctionnalité d’import Figma de Framer.
Cette transition s’est faite en plusieurs étapes. D’abord, l’import des assets graphiques : logos, images, icônes, qui ont été automatiquement optimisés par Framer. Ensuite, la reconstruction de la structure des pages en utilisant les frames et components de Framer, qui reprennent la logique des auto-layouts de Figma.
La vraie valeur ajoutée de Framer s’est révélée dans cette phase : pouvoir animer directement les éléments importés, créer des variants de composants, et surtout tester en temps réel le comportement responsive sans avoir à coder une seule ligne.
Nous avons particulièrement apprécié la possibilité de créer des composants maîtres dans Framer, permettant de décliner facilement les éléments sur toutes les pages tout en gardant une cohérence parfaite avec le design system initial.
Premières impressions : entre nostalgie et modernité du web design
Première sensation en ouvrant Framer : c’est plutôt cool ! On retrouve une certaine forme de liberté créative qui nous rappelle l’époque de Flash (ça ne nous rajeunit pas, mais ça fait du bien). On pose les assets graphiques, on structure l’interface, on anime, on déplace, et globalement… ça marche. Cette immédiateté du résultat, c’est grisant quand on a l’habitude des allers-retours entre design et développement.
L’interface de Framer reprend des codes qu’on connaît bien : Pages, Layers, Assets, différents types de Layouts et Breakpoints. On prend ses marques assez naturellement, même si nous n’avons pas exploré toutes les fonctionnalités comme les Collections (équivalent du CMS de Webflow) ou les API integrations, le projet ne le nécessitant pas. L’expérience utilisateur est globalement fluide, et les outils tombent assez intuitivement sous la main.
Ce qui frappe d’emblée, c’est la fluidité des animations. Créer des micro-interactions, des effets de scroll ou des transitions de page devient un jeu d’enfant. Là où il faudrait plusieurs heures de CSS et JavaScript pour obtenir le même résultat, Framer permet de le faire en quelques clics avec sa timeline d’animation.
Mais la liberté en web a ses limites, et on s’en rend compte assez vite. Il faut toujours composer avec les différents comportements de navigation, gérer les déclinaisons pour mobile et tablette, et là, c’est un peu la même histoire qu’ailleurs : le responsive design reste un exercice délicat, même avec les outils les plus modernes.
La réalité technique : entre facilité et limites du no-code
Passée l’euphorie des premières heures, on arrive assez rapidement à un moment où quelques compétences en développement web deviennent utiles. Quelques notions de Flexbox et CSS Grid, un peu de CSS custom, parfois même du React pour ne pas s’arracher les cheveux sur certains comportements spécifiques.
Le côté fun de l’intégration initiale laisse place au temps des déclinaisons, de l’intégration des contenus réels, de la mise en page définitive. Et quand il y a un peu de volume de contenu, on atteint assez vite les limites de l’outil. Ce qui était facilitant au début devient parfois plus contraignant qu’autre chose, notamment pour la gestion de contenu dynamique.
Framer propose bien un système de CMS intégré avec ses Collections, mais il reste bien sûr beaucoup moins flexible qu’un WordPress ou un autre CMS sur ce point. Pour des contenus complexes avec de nombreux champs personnalisés ou des relations entre contenus, on se retrouve vite limité.
Néanmoins, on trouve un équilibre. Le gain de temps sur certains aspects (animations, effets visuels, publication) compense les petites frustrations techniques. À l’échelle du site dans son ensemble, le bilan reste positif, surtout quand on compare avec le temps qu’aurait nécessité un développement équivalent en HTML/CSS/JavaScript.
SEO et performances : la bonne surprise technique
C’est souvent le point noir des solutions SaaS et des website builders : les performances web et le référencement naturel. On s’attendait à devoir faire des compromis, et finalement, Framer nous a agréablement surpris sur cet aspect.
Côté performances, ça fonctionne étonnamment bien. Sans avoir eu le sentiment de devoir optimiser drastiquement les médias en amont ou de prendre des pincettes particulières sur les fonctionnalités, nous avons obtenu des scores PageSpeed honorables, tant sur mobile que sur desktop. Les Core Web Vitals sont dans le vert, avec des temps de chargement corrects et une optimisation automatique des images.
Framer génère du code propre et optimisé, avec un lazy loading automatique des images, une compression efficace des assets, et une minification du CSS et du JavaScript. Le rendu côté serveur (SSR) est géré nativement, ce qui améliore considérablement les performances et le SEO technique.
Pour le référencement, même constat positif. Le sitemap XML est généré automatiquement, les balises meta sont correctement structurées, et l’indexation par Google s’est faite sans accroc. Framer gère nativement les données structurées, les balises Open Graph pour les réseaux sociaux, et permet même d’ajouter du code de tracking personnalisé.
Bien sûr, il y a des points perfectibles, notamment en termes d’accessibilité web (WCAG) et de balisage sémantique des médias, mais c’est étonnamment bon au regard du peu d’efforts déployés sur cet aspect. Pour un site vitrine ou une landing page, c’est largement suffisant pour être bien positionné sur les moteurs de recherche.
Mise en ligne : simplicité déconcertante du déploiement
La mise en ligne a été d’une simplicité bluffante. Nous avons associé le projet à un sous-domaine de notre client, avec une configuration ultra-simplifiée : un champ CNAME, et voilà. Le site était accessible en un claquement de doigts, avec certificat SSL automatique et CDN intégré.
Cette facilité de déploiement contraste énormément avec nos habitudes. Pas d’hébergement web à configurer, pas de serveur à paramétrer, pas de base de données à installer, pas de mises à jour de sécurité à prévoir. On se contente de créer et de publier, Framer s’occupe de toute l’infrastructure technique.
Le nom de domaine personnalisé s’est configuré sans problème, et nous avons pu rapidement connecter la Google Search Console et Google Analytics pour suivre les performances. Le sitemap étant généré automatiquement, l’indexation par les moteurs de recherche s’est faite naturellement.
Cette approche serverless présente des avantages indéniables en termes de maintenance et de sécurité, même si elle implique une dépendance totale à la plateforme Framer.
Gestion de projet et collaboration : workflow moderne
Un aspect souvent négligé dans les retours d’expérience : la collaboration et la gestion de projet. Framer propose des fonctionnalités intéressantes pour le travail en équipe, avec un système de commentaires directement dans l’interface, des permissions granulaires et un historique des versions.
Le partage de prototypes avec le client s’est révélé particulièrement efficace. Plutôt que d’envoyer des captures d’écran statiques ou des maquettes PDF, nous avons pu partager directement des liens de prévisualisation interactifs, permettant au client de tester les animations et interactions en temps réel.
Cette approche a considérablement réduit les allers-retours et les incompréhensions. Le client pouvait tester librement les éléments spécifiques.
Notre verdict : le bon outil au bon moment
Framer n’est clairement pas la solution universelle à tous les projets web. Mais dans le contexte spécifique de ce projet, il s’est révélé être ce dont nous avions besoin.
Les avantages sont : la rapidité de mise en œuvre, une expérience fluide pour une équipe habituée aux outils de design, un rendu visuel immersif dans un délai très court, un relativement bon équilibre performance/SEO sans effort démesuré, et la publication simplifiée. Pour un site événementiel, une landing page marketing ou un portfolio créatif avec des contraintes de temps et de budget, c’est un choix pertinent.
Les limites existent aussi : manque de souplesse pour la gestion de contenu à long terme, dépendance à un service tiers payant, contrôle technique limité, et quelques frustrations sur le responsive design complexe. Pour des portails, des applications web complexes, ou des projets nécessitant des intégrations API poussées, mieux vaut se tourner vers des solutions plus flexibles.
Au final, cette expérience nous a convaincus d’intégrer Framer dans notre palette d’outils, pour des typologies de projets bien spécifiques : sites événementiels, projets marketing rapides, expériences immersives où le design prime sur la gestion long terme, ou encore prototypes avancés pour valider des concepts avant développement.
Dans l’écosystème actuel des outils de création web, Framer trouve sa place entre les CMS traditionnels et les solutions de développement sur mesure. Il répond à un besoin réel : créer rapidement des sites visuellement impactants sans sacrifier les performances ou le SEO.
See you soon, Framer !
Mis à jour le
