Tu veux créer un site sur Framer mais tu ne sais pas par où commencer ? Framer intègre deux outils IA directement dans l'éditeur qui font le gros du travail à ta place.

D'un côté Wireframer, qui génère la structure complète de ton site en quelques secondes à partir d'un prompt. De l'autre Workshop, qui crée des composants interactifs sur mesure, animations comprises, sans toucher une ligne de code.

Voici exactement comment utiliser les deux.

Wireframer : générer la structure de ton site en quelques secondes

Où trouver Wireframer

Wireframer est accessible directement depuis l'éditeur Framer. Clique sur le panneau d'insertion en haut à gauche, et tu le trouveras tout en haut de la liste dans la navigation gauche.

Comment rédiger un prompt efficace

C'est l'étape clé. Plus ton prompt est précis, plus le résultat sera utilisable directement.

Un prompt vague comme "crée un site portfolio" donne un résultat générique. Un prompt détaillé comme "crée un site link-in-bio simple pour un designer freelance, thème sombre, avec photo de profil, nom, titre, icônes réseaux sociaux et quelques boutons de liens" donne une base vraiment exploitable.

Les éléments à inclure dans ton prompt : le type de site, le thème visuel (clair ou sombre), les sections souhaitées, et si tu as un nom ou une activité précise, indique-le directement.

PS : Si tu veux un link-bio professionnel et modifiable en moins de 10 min, cette ressource gratuite devrait te plaire !

Ce que Wireframer génère automatiquement

Une fois le prompt envoyé, Wireframer construit le site en temps réel sous tes yeux. Il génère simultanément les trois breakpoints : desktop, tablette et mobile. Le responsive est donc inclus dès la génération initiale.

Ajuster le résultat

Le site généré est une base de travail. Quelques ajustements rapides suffisent dans la plupart des cas.

Pour repositionner un élément sur mobile, passe sur le breakpoint téléphone via les icônes en haut du canvas, sélectionne l'élément concerné et utilise les touches fléchées du clavier pour le repositionner précisément.

Pour modifier un texte, double-clique dessus et tape directement ton contenu.

Pour uploader une image, sélectionne le frame concerné, va dans le panneau droit et choisis ton fichier ou fais un glisser-déposer. Tu peux aussi coller une image directement depuis ton presse-papier avec Cmd + V.

Pour ajuster l'espacement entre deux éléments, sélectionne le conteneur et utilise la poignée visuelle qui apparaît entre les éléments pour augmenter ou réduire le gap.

Pour dupliquer un élément, sélectionne-le et appuie sur Cmd + D. Utile pour ajouter rapidement une icône réseau social supplémentaire par exemple.

Workshop : créer des composants interactifs avec l'IA

Wireframer génère la structure. Workshop va plus loin : il crée des composants interactifs complexes, animations et interactions comprises, à partir d'un prompt détaillé.

Où trouver Workshop

Workshop est un plugin intégré à Framer. Pour y accéder, clique sur la petite icône en bas de l'éditeur pour ouvrir le menu d'actions, puis tape "Workshop" dans la recherche et appuie sur Entrée. Une fenêtre s'ouvre avec un champ de prompt.

Comment prompter Workshop

Workshop comprend des descriptions techniques précises. Plus tu détailles le comportement souhaité, meilleur sera le résultat.

Tu peux écrire ton prompt en Français, il sera automatiquement traduit en anglais.

Exemple de prompt complet pour une card de témoignage client avec animation d'apparition :

"Crée un composant card de témoignage client. Fond blanc avec une légère ombre portée. En haut à gauche, cinq étoiles dorées. En dessous, un texte de témoignage en 16px regular gris foncé. En bas, une photo de profil circulaire à gauche avec à droite le prénom en 14px semi-bold et le titre du client en 14px regular gris. Au chargement, la card apparaît avec un léger fade-in vers le haut. Ajoute des propriétés dans le panneau droit pour modifier le texte du témoignage, le prénom, le titre, la photo de profil et le nombre d'étoiles."

Le niveau de détail fait toute la différence. Indique les tailles de police, les comportements au survol, les propriétés que tu veux pouvoir modifier ensuite.

Intégrer le composant dans ton site

Une fois Workshop terminé, le composant apparaît sur le canvas. Tu peux le redimensionner directement en tirant ses poignées.

Pour l'intégrer proprement dans ton site et qu'il garde un comportement responsive, copie les propriétés de taille d'un élément existant bien configuré. Sélectionne un élément de référence, note ses valeurs dans le panneau droit (largeur, hauteur, max-width à 100%, ratio verrouillé), puis applique les mêmes valeurs à ton nouveau composant.

Modifier un composant Workshop après coup

Workshop ne s'arrête pas à la première génération. Si tu veux ajouter des propriétés ou modifier le comportement, sélectionne le composant, clique sur "Edit in Workshop" dans le panneau droit, et décris les modifications souhaitées.

Exemple : "Ajoute des propriétés dans le panneau droit pour modifier la taille et la graisse du titre et du sous-titre" permettra ensuite d'ajuster ces valeurs directement depuis le panneau droit sans retoucher le composant.

Ajouter des liens sur les éléments

Une fois le site structuré, il reste à rendre les éléments cliquables.

Pour la plupart des éléments, sélectionne-le et dans le panneau droit tu trouveras un champ "Link" où tu colles l'URL cible.

Pour les icônes SVG, cette propriété n'est pas toujours disponible directement. La solution : sélectionne l'icône, fais un clic droit et choisis "Wrap in Frame". L'icône est maintenant dans un frame, et ce frame accepte une propriété lien dans le panneau droit.

Publier le site

Une fois tout configuré, clique sur le bouton "Publish" en haut à droite de l'éditeur.

Framer te propose deux options. Sur le plan gratuit, tu peux choisir un sous-domaine personnalisé au format tonnom.framer.website. Sur un plan payant, tu connectes ton propre nom de domaine. Le plan Basic à 10€ par mois (en annuel) inclut même un nom de domaine .com offert la première année.

Pour toutes les étapes de publication en détail, le guide publier un site Framer en ligne couvre l'ensemble du processus.

Ce que l'IA fait, ce qu'elle ne fait pas

Wireframer et Workshop sont des accélérateurs puissants, mais quelques points restent toujours à gérer manuellement.

Le responsive demande souvent quelques ajustements sur mobile, particulièrement les tailles de police et les espacements. Le guide sur le responsive dans Framer explique comment corriger ça efficacement.

Le SEO n'est jamais configuré par l'IA. Titles, meta descriptions, balises alt sur les images : tout est à renseigner manuellement dans les paramètres de chaque page. Le guide SEO Framer détaille chaque réglage.

Les composants réutilisables comme la navbar et le footer sont générés comme des éléments indépendants. Pour qu'une modification se répercute partout sur le site, il faut les transformer en vrais composants. Le tutoriel créer un composant Framer montre comment faire.

Pour aller plus loin et maîtriser Framer au-delà de ce que l'IA peut générer, la formation Framer Campus couvre toutes les bases de l'outil étape par étape.

👉 Accéder à la formation complète