Framer AI

Qu’est-ce que Framer AI ?

Framer AI est la capacité d’intelligence artificielle intégrée à la plateforme Framer pour la conception et l’hébergement de sites visuels. Les utilisateurs peuvent créer des sites, des pages et des blocs en langage naturel, tandis que l’IA peut modifier les layouts existants, générer du texte, gérer le contenu CMS, créer des composants de code interactifs et assister à la localisation.

Il se caractérise par le fait que l’IA travaille directement sur Framer Canvas et la structure du projet, générant des résultats qui restent des pages, des calques, des composants et du contenu modifiables. Les designers peuvent continuer à ajuster la mise en page, les points de rupture, les espacements, les couleurs, les effets et les animations, au lieu de se contenter d’une image statique.

Proxy du site Framer Agent

Actuellement, Framer AI est axé sur l’agent. L’utilisateur décrit le site, la page ou les mises à jour nécessaires, et l’agent peut effectuer des modifications en plusieurs étapes au sein du projet, y compris créer la structure, remplir le contenu, ajuster l’aspect visuel et gérer le CMS.

Il convient de commencer à partir de zéro, mais peut également être utilisé pour la maintenance continue de projets existants.

La portée de l’exécution par proxy est large ; il convient de préciser la page cible, le contenu à conserver, les règles de marque et les critères d’acceptation. Pour les sites importants, il est préférable d’utiliser des branches ou des projets copiés, puis de publier après avoir examiné les modifications.

Générer un site à partir d’une suggestion

L’utilisateur peut saisir des informations sur l’entreprise, les produits, le public cible et le style ; l’IA générera alors une structure de site web editable. Une fois générée, il est possible de réorganiser la structure dans Canvas, de remplacer le texte et les images, et d’utiliser les layouts et composants réactifs de Framer pour finaliser le projet.

La première génération vise principalement à résoudre le point de départ visuel ; l’nom de domaine, le contenu réel, la destination des formulaires, les informations sur la confidentialité et la configuration analytique doivent encore être traités manuellement.

Génération de pages et de blocs

Framer AI permet non seulement de créer des sites entiers, mais aussi d’ajouter sur demande des pages de destination, des tarifs, des fonctionnalités, des cas d’usage, une page équipe, des FAQ et une page de contact, ou de générer uniquement un bloc de page. Les nouveaux éléments s’adaptent autant que possible au contexte design du projet.

Après génération, il faut vérifier la nommation des calques, la réutilisation des composants, les points d’arrêt et le niveau SEO. Il est préférable de regrouper plusieurs blocs similaires en composants partagés afin d’éviter la maintenance de contenu redondant.

Édition visuelle sur Canvas

Framer offre une toile de dessin libre similaire à des outils de conception, tout en utilisant des systèmes orientés vers le web tels que Stack, Grid, points de rupture et composants. Les maquettes générées par l’IA peuvent être déplacées, réorganisées et ajustées en détail, ce qui les rend idéales pour les sites web de marques gérés par des designers.

L’édition libre peut provoquer des problèmes de taille fixe et de positionnement absolu. Avant la publication, il convient de vérifier individuellement l’affichage sur ordinateur, tablette, téléphone et écrans très larges, ainsi que le layout une fois le texte agrandi.

Mise en page responsive et points de rupture

Les utilisateurs peuvent définir des points de rupture pour différentes largeurs, et contrôler la navigation, le nombre de colonnes, la police de caractères ainsi que les règles d’affichage. L’IA peut aider à créer une structure responsive initiale, mais les interactions tactiles, le mode paysage et les différences entre navigateurs sur des appareils réels doivent encore être testés.

Ne vous fiez pas uniquement au prévisualisation pour juger en glissant la fenêtre. Les menus, les formulaires, les éléments Sticky, les vidéos et les animations complexes doivent être testés dans un navigateur mobile.

Création de textes et visuels

Framer Agent permet de créer et de réécrire les titres, le texte principal, les appels à l’action ainsi que les suggestions visuelles pour la page, ce qui permet d’itérer sur le design et le contenu dans le même processus. Il est idéal pour élaborer rapidement des versions préliminaires du site web du produit et des pages événementielles.

L’IA peut inventer des fonctionnalités, des données, des avis clients ou des engagements de conformité. Les textes concernant les prix, les performances, les noms des clients et les déclarations légales doivent être vérifiés.

Création de CMS et remplissage du contenu

L’agent peut créer des Collections CMS, des champs et du contenu pour les blogs, les cas d’usage, les offres d’emploi, les membres, les portfolios et les catalogues. Une fois le CMS connecté à Canvas, les modèles de conception peuvent être réutilisés automatiquement pour chaque contenu.

Il convient d’abord de concevoir un modèle de données stable et des règles de Slug, avant de générer du contenu en masse. Des modifications fréquentes des champs peuvent affecter les modèles, le filtrage et l’intégration de données externes.

Composants de code d’IA

Les utilisateurs peuvent décrire des fonctionnalités interactives ou en temps réel pour que Framer AI génère des composants de code React, tels que des calculatrices, des diaporamas, des visualisations, des boutons dynamiques et des champs de saisie spéciaux. Ces composants de code peuvent recevoir des attributs et être intégrés dans des pages ordinaires.

La génération de code nécessite de vérifier les dépendances, les performances, l’accessibilité, la validation des entrées et les requêtes externes. Les clés tierces ne peuvent pas être intégrées dans les composants du navigateur, et la logique sensible doit être gérée par un serveur distinct.

Workshop AI

Workshop offre une expérience de dialogue et d’édition par l’IA pour les composants de code, permettant de générer ou d’itérer sur des composants en fonction des besoins. Les conversations dans Workshop consomment des crédits IA, et les composants complexes nécessitent davantage de crédits.

Les ateliers sont utiles pour compléter les fonctionnalités intégrées de Framer, mais le code généré non testé ne doit pas être directement mis en œuvre sur des sites en production à fort trafic.

Traduction et localisation par l’IA

Framer Localization permet de créer plusieurs versions linguistiques et de traduire automatiquement le contenu du Canvas et du CMS à l’aide de l’IA. Auto Translate peut synchroniser automatiquement les traductions dès que le texte original est mis à jour, ou bien traduire tout le contenu d’un coup, ou encore ne traiter que des calques et des pages spécifiques.

La fonctionnalité de localisation s’occupe de la gestion des versions linguistiques, et la traduction par l’IA consomme également des crédits d’IA. Les termes de marque, les textes juridiques, les prix, les unités et les métadonnées SEO doivent toujours être vérifiés par des locuteurs natifs.

Ton de la marque AI Style

AI Style permet de fournir des indications de traduction pour une langue donnée, en spécifiant un ton professionnel, concis, dynamique ou technique, afin que le contenu multilingue soit mieux en adéquation avec la marque. Actuellement, les versions officielles utilisent différents modèles OpenAI en fonction des paramètres de traduction, et les modèles de base peuvent évoluer avec les mises à jour du produit.

Les instructions de ton ne peuvent pas résoudre les problèmes de faits et de terminologie. L’équipe doit utiliser le glossaire et la liste des termes interdits à traduire.

Agents d’IA externes

Framer prend en charge la capacité de prévisualisation via des proxies externes, permettant à des outils tels que Codex et Claude Code de se connecter aux projets après autorisation et d’exécuter des tâches de conception ou de contenu. Actuellement, les abonnements Basic et Pro permettent une connexion gratuite pendant la période de prévisualisation ; les règles pourraient changer à l’avenir.

Les agents externes peuvent élargir l’étendue de l’automatisation, mais augmentent également les risques d’erreurs de modification et de problèmes de droits d’accès. Il convient de limiter les droits d’accès aux projets, branches et déploiements, et de conserver un historique des opérations.

Collaboration et rôles

Framer permet aux Workspace Owners, aux Editors, aux Content Editors et aux Viewers de collaborer. Les Viewers peuvent consulter et commenter gratuitement, les Editors peuvent concevoir, modifier du contenu et le publier, tandis que les Content Editors se chargent principalement de mettre à jour le CMS, de la localisation et du contenu des pages.

Les rôles doivent être attribués selon le principe du moindre privilège. Le personnel chargé du contenu n’a pas besoin des droits complets de conception ou de publication, et les clients externes peuvent d’abord examiner le contenu par le biais de commentaires.

Branches, aperçu et Staging

Pro offre le Branching avec des prévisualisations et un environnement de staging, permettant d’explorer des modifications, de partager des prévisualisations et de tester sans affecter le site officiel. Ces fonctionnalités sont particulièrement importantes lorsque des agents IA effectuent de grandes modifications.

Le lien de prévisualisation peut contenir des informations non publiées ; il convient de faire attention au périmètre d’accès lors du partage. Avant la fusion, il faut vérifier les modifications sur la page, le CMS, les composants et le SEO.

SEO et AEO

Framer intègre des paramètres SEO permettant de gérer les titres, les descriptions, la structure sémantique, le sitemap, les redirections et les performances. L’IA peut aider à générer du contenu, mais les pages doivent néanmoins être optimisées en fonction des véritables intentions de recherche et de leur valeur propre.

Un grand nombre de pages d’IA similaires peuvent générer du contenu de faible qualité ou répétitif. Il convient de limiter la portée de l’indexation et de compléter avec des contenus originaux, des informations structurées et des liens internes.

Animation et interaction

Framer excelle dans les transitions, le défilement, l’effet de suspension et les variantes de composants, et convient aux sites de marques très visuels, aux portfolios et aux pages de lancement de produits. Une fois que la visualisation a été générée par l’IA, les designers peuvent continuer à ajuster les détails interactifs dans Canvas.

Trop d’animations peut nuire au chargement, à l’accessibilité et aux appareils à faible performance. Il convient de réduire les effets dynamiques et d’éviter que les interactions n’entravent la lecture et la conversion.

Hébergement, performances et noms de domaine

Le plan payant Site plan permet de connecter un nom de domaine personnalisé ; les abonnements annuels Basic et Pro incluent actuellement un nom de domaine .com gratuit. Framer offre un hébergement mondial, HTTPS et un processus de publication ; la version Pro dispose de nodes de livraison plus nombreux ainsi que d’options d’hébergement avancées.

La renouvellement du nom de domaine, l’augmentation de la bande passante et l’hébergement avancé peuvent entraîner des frais supplémentaires. Lors du transfert officiel, il est également nécessaire de configurer le DNS, les redirections et le code d’analyse.

Comparaison des prix et des versions

Édition gratuite

Gratuit à 0 dollar, il permet de publier avec un nom de domaine Framer, inclut 1 GB de bande passante et des pages de design, et offre 500 crédits AI par mois pour utiliser des fonctionnalités telles qu’Agent.

La version gratuite convient à l’apprentissage et à la création de prototypes, mais ne permet pas d’utiliser son propre nom de domaine officiel ; sa capacité à gérer des sites importants et à les publier à des fins commerciales est limitée.

Prix de base

Basic coûte 10 dollars par mois à la facturation annuelle, et inclut un nom de domaine personnalisé gratuit, 2 CMS Collections, 1000 éléments CMS, 30 pages de design, 50 GB de bande passante mensuelle, un SEO intégré et 1000 crédits AI par mois.

Basic convient pour des collections de produits et de petites pages de marketing. La localisation nécessite l’achat de langues supplémentaires, et les éditeurs additionnels ainsi que les éditeurs de contenu sont facturés séparément.

Prix Pro

Pro coûte 30 dollars par mois en abonnement annuel, et inclut 10 CMS Collections, 2500 éléments CMS, 150 pages de design, 100 GB de bande passante mensuelle, des redirections, un espace Staging, une prévisualisation des branches, ainsi que 3000 crédits AI par mois.

Pro permet d’ajouter à la carte des pages, des CMS Collections, des CMS items et de la bande passante, idéal pour les sites ayant un contenu plus complexe et nécessitant un processus de publication en équipe.

Prix Enterprise

Enterprise propose des devis sur demande, avec des plafonds personnalisables, un nombre illimité d’éditeurs, de la sécurité d’entreprise, des garanties de disponibilité, SCIM et SSO, ainsi que des conditions sur mesure telles que des réductions en masse pour les crédits IA.

Les achats d’entreprise doivent prendre en compte le traitement des données, l’audit, les réponses aux demandes d’aide, les noms de domaine, les régions et les autorisations des agents externes.

Frais de poste d’édition

L’éditeur supplémentaire pour Basic et Pro coûte actuellement 20 dollars par mois, l’éditeur de contenu 10 dollars par mois, et le lecteur est gratuit. La solution autonome permet jusqu’à 10 utilisateurs avec des droits d’édition, tandis que Enterprise est personnalisable ou illimité.

Le prix du plan de site n’est pas le tarif pour une équipe complète. Lors d’une collaboration en groupe, les frais de site, les postes d’édition et les produits supplémentaires doivent être calculés ensemble.

Prix de localisation

Basic et Pro permettent d’ajouter jusqu’à 20 localisations de traduction, chaque localisation coûtant actuellement 20 dollars. La gestion des versions linguistiques et le quota de traduction par l’IA constituent deux frais distincts ; la traduction elle-même fait également appel à des crédits Workspace AI.

Les coûts d’un site multilingue augmentent avec le nombre de langues ; il convient d’abord de déterminer les marchés qui nécessitent une publication distincte, plutôt que d’acheter tout d’un coup pour toutes les langues.

Comment fonctionnent les crédits d’IA ?

Les conversations Framer Agent, les discussions dans les ateliers et la traduction par IA consomment des crédits ; en revanche, les assistants d’édition légers tels que la nomination automatique des calques et les suggestions de Tracking ID n’en consomment pas.

La quantité demandée à chaque fois dépend de la complexité et du volume de travail.

Les crédits sont partagés selon l’espace de travail, et les quotas payants de plan de site pour chaque projet peuvent être additionnés. Par exemple, deux projets Basic contribuent ensemble à 2000 points par mois.

Le plafond est réinitialisé le 1er de chaque mois civil, indépendamment de la date de renouvellement de l’abonnement.

Limite atteinte et achat supplémentaire

Lorsque 80 % est atteint, l’administrateur de Workspace reçoit une alerte ; une fois 100 % atteints, les fonctionnalités nécessitant des crédits sont suspendues, mais les demandes en cours peuvent être finalisées.

Les utilisateurs peuvent acheter des forfaits supplémentaires de crédits AI mensuels ; une fois ces forfaits activés, ils peuvent également acheter des recharges ponctuelles.

La suppression du forfait mensuel entraîne immédiatement la suppression de la limite correspondante ; les recharges ponctuelles expirent à la fin du mois de l’achat et ne sont pas reportées. Les quantités et prix des forfaits sont indiqués sur la page de règlement.

Tests A/B et Conversion

Framer Convert est un add-on pour les tests A/B et l’optimisation du funnel, disponible sur des sites qualifiés tels que Pro. Il ne doit pas être considéré comme une fonctionnalité illimitée incluse dans le prix de base de Pro.

L’expérience nécessite une définition préalable des événements de conversion et de la taille de l’échantillon. L’IA peut générer des variantes, mais les conclusions doivent rester basées sur les données et la significativité statistique.

Écosystème de modèles, de composants et d’extensions

Framer dispose d’un marché de modèles, de composants et d’extensions qui permet d’intégrer rapidement des fonctionnalités de navigation, des interfaces CMS, des outils graphiques et des workflows. Les développeurs peuvent également créer leurs propres extensions et composants de code pour améliorer l’éditeur.

Le prix, les licences, la maintenance et l’accès aux données des ressources tierces sont déterminés par l’auteur. Il convient de vérifier les droits d’accès et le historique des mises à jour avant l’installation.

GitHub et l’état open source

Le constructeur de sites Web Framer, l’agent IA, l’éditeur et la plateforme d’hébergement ne sont pas des produits open source. Framer et ses équipes ont rendu publics sur GitHub certains outils et projets open source ;

La célèbre bibliothèque d’animation Framer Motion a été développée en Motion et est désormais sous licence MIT, mais elle n’est pas équivalente au code source de la plateforme de création de sites web Framer.

Dans le catalogue, Framer AI doit être désigné comme un SaaS à code fermé. On ne peut pas prétendre pouvoir déployer Framer dans un environnement privé, sous prétexte que Motion ou certains entrepôts auxiliaires sont open source.

Guide d’utilisation de Framer AI

Terminer une tâche de base

1. Définir les tâches de codage à effectuer dans Framer AI, la portée du dépôt et les critères d’acceptation ;
2. Connectez ou importez le projet de test, et faites d’abord une sauvegarde de la branche actuelle ;
3. Utilisez d’abord le site Framer Agent pour générer un plan de proxy, puis confirmez les fichiers à modifier ;
4. Appliquer de petites modifications en utilisant le site généré à partir de l’invite ;
5. Exécuter des tests, des vérifications statiques et la compilation ; ne pas accepter directement de code non vérifié.
6. Vérifier manuellement les droits, les clés, les dépendances et gérer les exceptions avant de fusionner ;

Créer des flux de travail professionnels réutilisables

1. Choisir un projet réel à faible risque comme modèle ;
2. Fixer l’agent proxy du site Framer, ainsi que l’ordre d’utilisation pour générer des sites et des pages à partir de suggestions et pour générer des blocs ;
3. Enregistrer l’environnement, le modèle, les indications et les conditions d’échec ;
4. Définir une approbation manuelle pour les actions d’écriture, de déploiement et de suppression ;
5. Comparer la vitesse, le coût, le taux de réussite des tests et le volume de rétravail ;
6. Vérifiez la stabilité avant de l’étendre à l’équipe ou à l’environnement de production ;

À qui s’adresse-t-il ?

• Designers qui créent les sites web de la marque, les pages de produits et les pages d’événements ;
• Créateurs qui ont besoin de publier rapidement un portfolio et un site personnel ;
• Équipe CMS chargée de gérer les blogs, les cas d’usage et le catalogue ;
• Équipes de marché nécessitant plusieurs langues, des branches et une collaboration sur le contenu ;
• Développeurs qui souhaitent étendre l’interaction à l’aide de composants de code React ;
• Équipe professionnelle utilisant des agents d’IA externes pour maintenir le site web.

Avantages du produit

• L’IA génère directement des pages, des blocs, des CMS et des composants éditables ;
• Un tableau de dessin libre combiné à une structure de page web responsive ;
• Intégration de la visualisation, du contenu, du code, de l’hébergement et du processus de publication ;
• L’agent peut modifier des projets existants plutôt que de créer uniquement des modèles ponctuels ;
• Prend en charge la traduction par IA, la prévisualisation des branches et les rôles d’équipe ;
• La version gratuite permet d’essayer 500 crédits AI par mois.

Restrictions et précautions

• Framer est plus adapté aux sites web axés sur le contenu et la présentation, et non à un générateur d’applications natives universel.
• Les bases de données complexes, les systèmes d’identifiants et les services serveur nécessitent généralement des services externes ou une intégration de code ;
• Le coût total peut inclure le Siteplan, les postes de montage, la localisation, la conversion, l’hébergement avancé et les AIcredits ;
• Les pages, les textes et le code générés par l’IA nécessitent une vérification manuelle.

Questions fréquentes

Framer AI est-il gratuit ?

Il existe une version gratuite offrant 500 crédits d’IA par mois et permettant de publier avec un nom de domaine Framer ; pour un nom de domaine personnalisé et des quotas de site plus élevés, il faut Basic ou Pro.

Framer AI peut-il créer un site web complet ?

Il est possible de créer des pages, des blocs, du texte et des éléments visuels à partir d’indicateurs, puis de continuer à les modifier dans Canvas ; l’adresse URL, le contenu réel, les formulaires, la conformité et les tests doivent encore être effectués manuellement.

Combien coûte Framer ?

Le tarif annuel Basic est de 10 dollars par mois, Pro de 30 dollars par mois, Enterprise sur demande ; en plus, l’Editor coûte 20 dollars par mois et le Content Editor 10 dollars par mois.

Les crédits Framer AI sont-ils reportés ?

Non. La limite de Workspace est réinitialisée le 1er de chaque mois naturel, et le rechargement prend fin à la fin du mois de l’achat.

Framer prend-il en charge la traduction par IA ?

Prend en charge la traduction Canvas et CMS, l’Auto-Traduction et le style IA, mais nécessite des modules linguistiques de localisation supplémentaires et consomme des crédits IA.

Framer AI est-il open source ?

La plateforme principale n’est pas open source. Bien que des outils tels que Motion soient des projets open source, cela ne signifie pas que l’éditeur Framer, Agent ou les services de hébergement puissent être déployés par eux-mêmes.