J'ai testé Framer pour la création du site d'une cliente. D'ordinaire, j'utilise webflow mais là les mots d'ordre étaient de trouver une solution par chère et maintenable avec peu de connaissances. J'ai donc choisi cet outil et je vous laisse lire mon avis sur Framer :

Framer, c'est quoi ?

‍

Framer est un outil de prototypage et de création de sites web puissant qui permet aux concepteurs d'interfaces utilisateur de créer des prototypes interactifs et des expériences utilisateur de haute qualité.

Contrairement à d'autres outils similaires, l'outil nocode de prototypage est particulièrement utile pour la conception d'applications mobiles et de bureau, et offre des fonctionnalités avancées pour la création de prototypes haute-fidélité.

Dans cet article, nous allons examiner de plus près les fonctionnalités clés de Framer et les avantages de l'utilisation de cet outil pour la création de prototypes et de sites web.

Nous allons également comparer l'outil de prototypage et de création de sites à d'autres outils similaires, tels que Figma et Webflow, et discuter de l'intégration du plugin Figma dans Framer. Si vous ne connaissez pas Figma, j'ai rédigé un article qui décrit ce qu'est Figma.

Enfin, nous allons examiner les différentes offres tarifaires proposées par Framer pour aider les designers et les développeurs à choisir le meilleur plan pour leurs besoins.

Framer vs Figma vs Webflow

Si vous voulez mon avis, Framer est à la croisée de Webflow et Figma.

Framer offre des fonctionnalités uniques qui le distinguent de ses concurrents, tels que la possibilité de créer des prototypes haute-fidélités et une grande variété de transitions et d'animations.

Figma, en revanche, est un outil de conception collaborative qui permet de créer des prototypes interactifs et de sites web, tandis que Webflow est un outil de création de sites web qui permet également de créer des interactions et des animations.

Alors vous me direz oui mais c'est quoi la différence entre Framer vs Figma vs Webflow ?

Et bien dites-vous que Figma ne permet pas la création de sites et applications. Seulement le design. Framer permet la création de sites et le design peut être fait soit sur l'outil directement soir sur Figma puis est importé grâce à un plugin dont nous parlerons plus bas dans l'article.

Webflow quant à lui permet les trois : design, création de site, création d'applications.

Avec Framer, vous ne pouvez pas créer d'application. L'outil est utilisé pour des sites simples types vitrine, landing pages, etc. Si vous souhaitez un site e-commerce, ce n'est pas possible de manière native sur Framer. Il vous faudra connecter votre Template à des outils externes comme Gumroad.

En résumé, si votre besoin est simple (création de sites vitrines, d'agences, portfolio, etc.), avec un nombre de pages illimité, alors Framer est une bonne alternative à Webflow et vous rendra plus de services que Figma.

Si vous souhaitez construire un projet plus complexe, utiliser des animations plus poussées, des fonctions de logiques ou simplement créer un espace membre sur webflow (ex : site de coaching), alors Webflow sera plus adapté.

Fonctionnalités de Framer io

‍

L'outil propose une variété de fonctionnalités avancées pour la création de prototypes interactifs et de sites web, notamment la possibilité de créer des prototypes haute-fidélités, une bibliothèque de composants prédéfinis et personnalisables, ainsi qu'une grande variété de transitions et d'animations.

Bibliothèque de templates

La bibliothèque de templates et de composants comprend des sites, des boutons, des menus déroulants, des formulaires et d'autres éléments couramment utilisés dans la création de sites web et d'applications.

Les designers peuvent également créer leurs propres templates personnalisés pour répondre à leurs besoins spécifiques ou pour les vendre sur la marketplace afin de dégager un revenu.

Est-ce que Framer est optimisé pour le SEO ?

Le SEO c'est le nerf de la guerre. Il ne faut pas se louper lorsque l'on choisit un CMS. Car on le sait (du moins on pense savoir),il y a plus de 200 critères de référencement et ne pas avoir un site correctement optimisé pour Google peut vous pénaliser si vous souhaitez être davantage visible dans les résultats de recherche.

Seo

Alors oui Framer est seo frendly. Voici les fonctionnalités internes SEO :

• Indexation et contrôle du Sitemap
• Html sémantique : vous pouvez déterminer quel type de balise appliquer à un élément. Ex : vous souhaitez qu'un  paragraphe soit reconnu comme tel, alors vous allez mettre une balise <p>. Dans l'outil, ça s'appelle un tag.
• Server-side rendering : pour booster le chargement du site
• Hébergement (dont Amazon Web Services (AWS) et cloudfront)
• Sites rapides et optimisés pour le SEO de google
• Métadonnées (Title tag , Meta description, gestion des url, etc..)
• Accessibilité avec les textes alternatifs, l’ARIA     label, etc.

‍

Performance

Ce qui est top et qui manque à Webflow c'est bien la partie Analytics. Aujourd'hui, si vous utilisez Webflow vous devrez passer par un outil tiers comme google Analytics pour gérer la partie analytique.

Ici, vous pouvez le faire directement depuis votre Dashboard Framer. Vous pourrez ainsi traquer le nombre de vues à votre site ainsi que le nombre de visiteurs le tout en respectant les normes RGPD

‍

Collaboration en temps réel

Framer propose une fonctionnalité de collaboration en temps réel, qui permet aux designers et aux développeurs de travailler ensemble sur les mêmes projets.

Les utilisateurs peuvent partager leurs prototypes avec des collaborateurs en temps réel, et recevoir des commentaires et des suggestions directement dans l'application. Cette fonctionnalité facilite la collaboration entre les équipes de conception et de développement, en leur permettant de travailler ensemble de manière transparente.

‍

Design

‍

Création de prototypes haute-fidélité

L'un des avantages clés de Framer est sa capacité à créer des prototypes haute-fidélités, qui permettent aux designers de présenter des maquettes réalistes de leurs designs. Contrairement à d'autres outils de prototypage qui se limitent à des animations simples et des transitions, Framer permet de créer des prototypes interactifs avec des transitions complexes, des animations détaillées et des interactions réalistes.

‍

Navigation

Quand je parle de navigation, je veux dire qu'il est facile de naviguer sur l'outil aussi bien qu'il est simple de lier les pages de votre site entre elles.

Vous pouvez faire un tas de choses comme mettre un lien à du texte dans le corps de votre site ou dans sa navbar. Vous pouvez également faire des scroll section. Voir vidéo ci-dessous :

‍

‍

CMS

Si vous entendez souvent Framer vs Figma vs Webflow c'est parce qu’il y a plusieurs similitudes. Pour la partie CMS, on opposera seulement Framer vs Webflow car Figma n'a pas cette fonctionnalité.

Le CMS voyez ça comme une base de données simplifiée. Je prends souvent l'exemple d'un google sheet ou d'un tableau Excel lorsque je dois expliquer le fonctionnement de la partie CMS des outils nocode à d'autres personnes.

Le but est de créer du contenu dynamique afin d'avoir une structure de page unique mais du contenu qui va varier. Par exemple : j'ai un site d'offres d'emplois. Toutes les offres sont différentes mais ma page aura la même structure alors je ne vais pas créer 100 fois la même page si je compte mettre sur mon site 100 différentes offres.

Je vais donc utiliser ce qu'on appelle le CMS (ou content management system). Webflow et Framer ont tous les deux des fonctions de logiques et conditions avancées. Les deux se valent. Vous pouvez filtrer, ordonner, mettre des conditions.

‍

‍

Effets et animations

Vous pouvez intégrer à votre site des images 3D, des animations déjà créées mais vous pouvez également transformer vos éléments statiques afin qu'ils deviennent dynamiques sur votre page.

Les animations peuvent être faites au scroll ou alors à l'interaction avec des composants, et peuvent même être déclenchées par des événements tels que des clics de souris ou des gestes tactiles.

Site management

Là où vous ne serez pas perdu en passant de Figma à Framer, c'est si vous souhaitez inviter des personnes pour qu'elles puissent collaborer avec vous sur un même travail en simultané.

Cette fonctionnalité est vraiment incroyable. Vous pouvez également gérer le versionning qui est simplement un remplacement du dossier "V1" qui deviendra "V2" puis "V3" ,etc...

Plugins

La grande force de notre cher ami c'est aussi la possibilité de le connecter à de nombreux outils.

Parmi eux: YouTube,Google Maps, Truspilot, Gumroad, SoundCloud, Lottie, etc...

Comment fonctionne l'intégration du plugin Figma dans Framer io ?

‍

L'intégration du plugin Figma dans Framer est très facile à utiliser. Il suffit de connecter votre compte Figma à Framer et d'importer les fichiers Figma que vous souhaitez utiliser.

Les fichiers Figma importés sont alors directement accessibles dans Framer, vous permettant de continuer à travailler sur vos designs.

Framer propose une intégration complète avec Figma, l'outil de conception d'interface utilisateur (UI) populaire. Le plugin Figma permet aux designers de créer des maquettes dans Figma et de les importer directement dans votre builder de sites en nocode.

L'utilisation du plugin Figma présente des avantages et des inconvénients. L'un des avantages clés est la facilité d'importation des designs de Figma.

Cela permet de gagner du temps et de simplifier le processus de conception.

Une autre caractéristique intéressante est la possibilité de modifier les designs importés directement dans Framer. Les designers peuvent ajuster les propriétés des éléments de design et appliquer des animations et des interactions.

Cependant, l'utilisation du plugin Figma dans Framer peut présenter certains inconvénients. Tout d'abord, il est important de noter que toutes les fonctionnalités de Figma ne sont pas disponibles dans Framer.

Certains éléments de design peuvent ne pas être pris en charge ou ne pas fonctionner correctement dans Framer. De plus, la taille des fichiers importés peut être un problème, car les fichiers Figma peuvent être assez volumineux. Cela peut ralentir les temps de chargement et les performances de Framer. Il est donc important de garder cela à l'esprit lors de l'utilisation du plugin Figma dans Framer.

En comparaison avec d'autres outils qui permettent l'importation de fichiers Figma, l'intégration de Figma dans Framer est relativement facile à utiliser.

Cela rend le processus de conception plus efficace et permet aux designers de travailler plus rapidement et plus facilement. En outre, les mises à jour apportées au design dans Figma peuvent être facilement synchronisées avec Framer, ce qui permet aux designers de rester synchronisés et de travailler de manière plus collaborative.

Quels sont les avantages et les inconvénients de l'utilisation de Framer ?

‍

Les avantages de l'utilisation de Framer io incluent la possibilité de créer des prototypes haute-fidélités, une grande variété de transitions et d'animations, ainsi qu'une bibliothèque de composants prédéfinis et personnalisables.

Je pense également que la courbe d'apprentissage est plus courte que Webflow ou Figma mais que si l'on compare les tarifs, alors selon le projet, le prix peut être plus ou moins important que son concurrent. Tout dépendra de vos besoins.

Framer prix

‍

Framer propose plusieurs offres avec des tarifs différents pour répondre aux besoins et aux budgets de tous les utilisateurs.

L'offre "Starter" est gratuite et permet de travailler sur un seul projet à la fois, avec un espace de stockage de 2 Go.Cette offre est idéale pour les débutants ou les petits projets.

L'offre "Pro" coûte 15 $ par mois et offre des fonctionnalités supplémentaires, telles que la collaboration en temps réel, des commentaires et des annotations, ainsi qu'un espace de stockage illimité.

L'offre "Team" est destinée aux équipes de designers et coûte 25 $ par mois par utilisateur. Elle offre toutes les fonctionnalités de l'offre Pro, ainsi que des outils de gestion d'équipe, de sécurité et d'administration.

Framer propose également une offre"Entreprise" personnalisée pour les grandes entreprises qui ont des besoins spécifiques en matière de fonctionnalités, de sécurité et d'administration.

En résumé : mon avis sur Framer

‍

A ce stade de l'article vous avez certainement déjà votre avis sur Framer. Si jamais vous hésitez voici la conclusion de mon avis sur Framer :

L'outil est performant et propose de nombreuses fonctionnalités intéressantes pour les designers et développeurs qui veulent dédier le plus important de leur métier à autre chose (développement de l'application de leur site par exemple).

L'interface est intuitive, et pour les personnes qui souhaitent aller vite, avec sa bibliothèque de composants et son éditeur de code intégré, Framer permet de concevoir rapidement des prototypes interactifs et des sites web de qualité professionnelle.

De plus, l'intégration du plugin Figma permet aux utilisateurs de travailler facilement avec des designs créés dans Figma et d'importer des fichiers Figma dans Framer.

Enfin, bien que Framer soit un peu plus cher que certains outils de prototypage similaires, ses fonctionnalités et ses performances en font un choix intéressant pour les professionnels qui cherchent un outil puissant et innovant pour la conception de leurs projets web.

En résumé, si vous êtes à la recherche d'un outil de prototypage et de création de sites web performant et innovant, Framer est certainement un choix à considérer. Ses fonctionnalités avancées, son interface intuitive et son éditeur de code intégré en font un choix intéressant pour les professionnels de la conception web.