Comment utiliser Framer : Guide du débutant en 2025

Vous voulez créer des sites web ou des applications sympas mais vous ne savez pas par où commencer ?

C'est difficile, n'est-ce pas ?

Tous ces outils de conception ont l'air extrêmement compliqués.

Devinez quoi ? Framer n'est pas forcément difficile.

Ce guide vous montrera comment utiliser Framer pour créer des choses géniales, même si vous êtes un parfait débutant.

Nous allons tout décomposer étape par étape, afin que vous puissiez commencer à concevoir vos propres sites web et applications en un rien de temps.

Encadreur

Rejoignez les milliers de chantiers exceptionnels. La vitesse de Framer ? Les utilisateurs constatent des flux de travail de conception jusqu'à 50 % plus rapides. Commencez votre essai gratuit dès maintenant !

Essayez Framer gratuitement Lire l'avis complet

Installation de l'encadreur

Avant toute chose, il vous faut Framer. C'est comme s'inscrire sur n'importe quel autre site web.

Création d'un compte :

Rendez-vous sur le site web de Framer. Vous verrez un bouton intitulé « S'inscrire » ou « Commencer ». Cliquez dessus.

Il vous faudra saisir votre adresse e-mail et créer un mot de passe. Plutôt simple, non ? Parfois, vous pouvez même vous inscrire avec votre compte Google.

Une fois inscrit, vous recevrez peut-être un courriel de confirmation de compte. Il vous suffira de cliquer sur le lien qu'il contient.

Comprendre l'espace de travail :

Ça y est, vous êtes dedans ! L'écran peut paraître un peu chargé au premier abord, mais ne vous inquiétez pas.

Le grand espace ouvert au centre est l'endroit où vous réaliserez vos dessins. C'est comme votre toile.

Sur les côtés, vous verrez des outils et des panneaux. Ceux-ci vous permettent d'ajouter des formes, de changer les couleurs et de déplacer des éléments.

Création d'un nouveau projet :

Pour commencer à créer quelque chose, il vous faut un nouveau projet. Cherchez un bouton intitulé « Nouveau projet » ou quelque chose de similaire. Cliquez dessus.

Vous pouvez commencer avec un projet vierge, comme une feuille blanche. Ou bien, vous pouvez choisir un modèle. Les modèles sont des designs prédéfinis que vous pouvez modifier.

Si vous choisissez un projet vierge, vous pouvez créer votre propre design de A à Z. Si vous choisissez un modèle, cela peut vous faire gagner du temps.

Outils de conception de base

Passons maintenant à la partie amusante : la création ! Framer dispose de nombreux outils pour vous aider à concevoir.

Ajout de formes et de texte :

Vous voulez dessiner un carré ou un cercleRecherchez les outils de forme. Cliquez sur la forme souhaitée, puis cliquez et faites glisser sur votre zone de dessin pour la représenter.

Pour ajouter des mots, cliquez sur texte Utilisez l'outil. Cliquez ensuite à l'endroit où vous souhaitez insérer le texte et commencez à taper.

Vous pouvez modifier la couleur de vos formes et de votre texte. Il vous suffit de trouver le sélecteur de couleurs. Vous pouvez également agrandir ou réduire les éléments en faisant glisser leurs coins.

Travailler avec des images :

Vous avez une image à utiliser ? Cliquez sur l’outil image. Vous pourrez ensuite choisir une image sur votre ordinateur.

Une fois l'image importée dans Framer, vous pouvez la déplacer, l'agrandir ou la réduire. Vous pouvez également la recadrer pour qu'elle s'adapte parfaitement à votre cadre.

Utilisation des calques :

Les calques sont comme des feuilles de papier transparentes empilées les unes sur les autres. Ils vous aident à garder les choses organisées.

Lorsque vous ajoutez une forme ou une image, elle est placée sur son propre calque. Vous pouvez déplacer les calques vers le haut ou vers le bas pour modifier ce qui se trouve au-dessus.

C'est important car si vous voulez une image derrière une forme, le calque de l'image doit être inférieur au calque de la forme.

Donner du mouvement : Animations

Donnons vie à nos créations ! Les animations permettent aux choses de bouger et de changer.

Animations simples :

Vous pouvez faire apparaître les éléments progressivement, les faire glisser sur l'écran ou en changer la taille. C'est magique !

Recherchez les paramètres d'animation. Vous verrez des options comme « fondu », « glissement » et « mise à l'échelle ».

Vous pouvez également régler la durée. Cela indique à Framer la vitesse d'animation souhaitée.

Transitions :

Les transitions correspondent à ce qui se produit lorsque vous passez d'un écran à un autre. Imaginez que vous tournez les pages d'un livre.

Vous pouvez faire glisser, estomper ou zoomer les écrans.

Des transitions fluides donnent à votre site web ou application un aspect très professionnel.

Interactions :

Les interactions sont ce qui se produit lorsqu'une personne clique ou appuie sur quelque chose.

Par exemple, vous pouvez faire en sorte qu'un bouton change de couleur lorsque vous le survolez avec la souris.

Vous pouvez également agrandir l'image en cliquant dessus.

Ces éléments rendent vos créations interactives et amusantes à utiliser.

Création d'un site web simple

Très bien, rassemblons tous les éléments et créons un site web simple. C'est plus facile que vous ne le pensez !

Planification de votre site :

Tout d'abord, réfléchissez à ce que vous voulez que votre site web fasse. Avez-vous besoin d'une page d'accueil, d'une page « À propos » ou d'une page de contact ?

Notez ce que vous souhaitez sur chaque page. Cela vous aidera à savoir ce qu'il faut construire.

Création de la page d'accueil :

Commencez par un projet vierge ou utilisez un modèle.

Ajoutez un en-tête en haut avec le nom de votre site web.

Intégrez du contenu au centre, comme du texte et des images.

Ajoutez un pied de page en bas de page avec les informations de contact ou des liens.

Utilisez les outils que vous avez appris à utiliser pour obtenir un résultat esthétique.

Ajout de pages supplémentaires :

Pour créer une autre page, cliquez sur le bouton « Nouvelle page ».

Concevez chaque page de la même manière que la page d'accueil.

Reliez les pages entre elles à l'aide de boutons ou de liens dans l'en-tête.

Aperçu et publication :

Cliquez sur le bouton « Aperçu » pour voir à quoi ressemble votre site web.

Si cela vous plaît, cliquez sur le bouton « Publier » pour le mettre en ligne.

Framer vous fournira un lien vers votre site web. Désormais, tout le monde pourra le consulter !

Alternatives à Framer

Voici quelques autres sites web constructeurs vous pourriez consulter :

• Gamma: Se concentre sur la création de présentations et de documents qui ressemblent à des sites web.
• Durable: Utilise l'IA pour créer rapidement un site web pour votre entreprise en quelques minutes.
• Butternut: Vous aide à créer des sites web grâce à l'IA, en mettant l'accent sur la génération de contenu.
• Conception de code: Un autre outil de création de sites web basé sur l'IA et axé sur le design.
• Sœur: Permet de créer des sites web axés sur le design visuel et les animations.
• 10Web: Une plateforme basée sur l'IA pour la création et l'hébergement de sites web WordPress.
• Constructeur d'ananas: Offre un outil de création de sites web par blocs.
• Dorik: Offre une interface simple de type glisser-déposer pour la création de sites web, notamment pour les entreprises SaaS et les startups.
• Typedream: Permet de créer des sites web aussi simples que d'écrire des documents.
• Jimdo: Un outil de création de sites web convivial, axé sur la simplicité et la facilité d'utilisation.
• B12: Propose la création de sites web assistée par l'IA avec des options de services professionnels.
• Tarte appétissante : Connu pour son créateur d'applicationsmais propose également un outil de création de sites web.

Conclusion

Vous avez donc beaucoup appris ! Vous connaissez maintenant les bases de l'utilisation de Framer.

Nous avons abordé la création de votre compte, l'utilisation des outils de conception, l'animation des éléments et même la création d'un site web simple.

Vous avez vu comment ajouter des formes, du texte et des images.

Vous avez compris comment utiliser les calques et les composants pour rester organisé. Et vous avez appris à faire glisser, fondre et réagir les éléments lorsqu'on clique.

Et ensuite ? Continuez à vous amuser avec Framer !

Essayez différents outils et voyez ce que vous pouvez créer.

Vous trouverez des tonnes de vidéos et de tutoriels en ligne si vous souhaitez en savoir plus.

Continuez à vous entraîner, et vous réaliserez des designs exceptionnels en un rien de temps.

Foire aux questions