Résumer cet article avec l'IA
Quand il s'agit de faire des animations avec des textes circulaires, on se pose tout le temps la question de comment faire… Si vous utilisez Webflow et Figma, vous serez ravi de savoir qu'il est tout à fait possible de créer des textes circulaires facilement ! Dans cet article, nous allons vous montrer comment utiliser l'extension Figma "Arc" pour créer un texte circulaire, puis l'intégrer dans votre site Webflow. Nous verrons aussi une méthode alternative en SVG pour garder un texte modifiable, et comment animer le résultat.
Comment utiliser l'extension « Arc » sur Figma
Accédez à la page de l'extension « Arc » et ajoutez-la à votre Figma. Sélectionnez ensuite votre texte, choisissez le rayon de votre cercle et ajustez l'arc pour obtenir la forme souhaitée. Vous pouvez jouer avec les différents paramètres pour obtenir le design parfait !
Il ne vous reste plus qu'à exporter votre design au format PNG ou SVG pour une meilleure qualité et un chargement plus rapide, puis à l'intégrer à votre site Webflow. Privilégiez le SVG quand c'est possible : il reste net à toutes les tailles et pèse généralement moins lourd. Si vous exportez un PNG, compressez-le avant l'upload (notre convertisseur gratuit Image to WebP le fait en quelques secondes).
Alternative : un vrai texte circulaire avec le SVG textPath
La méthode Figma exporte une image, ce qui signifie que le texte n'est plus du vrai texte : impossible de le modifier sans repasser par Figma, et les lecteurs d'écran comme les moteurs de recherche ne peuvent pas le lire. Si vous voulez un texte circulaire qui reste modifiable, il existe une solution native du web : un SVG avec un élément textPath.
Le principe est simple. Vous définissez un chemin circulaire invisible dans un SVG, puis vous attachez votre texte à ce chemin. Le navigateur enroule automatiquement les caractères le long du cercle. Dans Webflow, cela s'ajoute via un élément Embed : une balise SVG contenant un chemin circulaire (avec un id), et un élément texte dont l'attribut textPath référence ce chemin. Ajustez le rayon du cercle pour contrôler la courbe, et la taille de police et le letter-spacing en CSS pour affiner le rendu.
Les avantages de cette approche : le texte reste sélectionnable et lisible par les moteurs de recherche, vous pouvez changer le libellé en quelques secondes sans rien réexporter, et le fichier ne pèse presque rien. La contrepartie : il faut un petit bout de code, là où la méthode Figma est entièrement visuelle.
Animer votre texte circulaire
Le texte circulaire prend tout son sens quand il tourne. Deux options simples dans Webflow :
- Les interactions Webflow : ajoutez une animation de rotation (0 à 360 degrés, easing linéaire, en boucle) sur l'image ou l'embed. Cela prend quelques minutes et ne nécessite aucun code.
- GSAP : pour un contrôle plus fin (vitesse de rotation liée au scroll, pause au survol, sens inversé), quelques lignes de GSAP suffisent. Notre guide complet GSAP explique comment le mettre en place dans Webflow.
Un pattern classique est le badge circulaire rotatif (« scroll down », « open for projects ») placé dans un coin de la section hero, souvent avec un logo ou une flèche au centre.
Quelques conseils pour une meilleure intégration
- Assurez-vous que le texte reste lisible et esthétique.
- Utilisez le texte circulaire avec parcimonie afin de ne pas surcharger votre design.
- Pensez à l'accessibilité : le texte circulaire peut être difficile à lire pour certains utilisateurs, alors utilisez-le pour les éléments non critiques. Si vous utilisez la méthode image, renseignez toujours l'attribut alt avec le contenu du texte.
- Gardez une rotation lente (un tour complet en 10 à 20 secondes suffit généralement) et respectez la préférence « prefers-reduced-motion » pour les utilisateurs qui désactivent les animations.
Conclusion
L'ajout de texte circulaire à votre site Webflow peut vraiment le différencier et attirer l'attention de vos visiteurs. Grâce à l'extension Arc, ce processus est très facile à maîtriser, vous permettant de créer facilement des designs de texte uniques. Et quand le texte doit rester modifiable ou animé, la méthode SVG textPath et une petite animation de rotation prolongent la même idée. Si vous voulez que ce genre de détail soit géré par des spécialistes sur votre prochain projet, notre agence Webflow est là pour vous accompagner.
