1. Origine
Lancée en 2021 en Australie, Relume a démarré comme librairie de composants Figma et Webflow avant de rapidement évoluer vers un outil plus ambitieux.
Le constat de départ était simple : les studios Webflow reconstruisaient les mêmes composants d'un projet à l'autre (navbars, sections hero, cards, pricing tables) en gaspillant du temps sur des éléments non différenciants.
En 2023, le Relume Site Builder (aussi appelé Relume AI) a été introduit : un générateur de sitemap et de wireframe alimenté par l'IA, capable de produire une architecture de site et des wireframes en quelques minutes à partir d'un brief.
Aujourd'hui, Relume est devenu un standard dans les workflows des studios Webflow à travers le monde.
2. Utilité
Relume répond à deux besoins bien distincts selon les phases de projet.
UX : structurer rapidement l'architecture
Avant de designer, il faut cadrer.
Relume Site Builder transforme un brief en sitemap structuré en quelques minutes. Chaque page est listée avec les sections recommandées, chacune mappée à un composant de la librairie. C'est un outil de réflexion autant que de production : il permet de valider la logique de navigation, d'aligner le client sur la structure du site, et de partir sur une base commune avant d'ouvrir Figma.
Une fois le sitemap validé, Relume génère les wireframes correspondants et offre la possibilité de les exporter directement dans Figma. Chaque section du sitemap devient une frame (navbars, sections hero, formulaires, footers), ce qui donne des wireframes exploitables directement.
Chez Studio Relief, c'est là que s'arrête notre usage de Relume : on a posé notre base de réflexion, on peut maintenant partir sur une phase de direction artistique et d'UI.
Production : accélérer l'intégration avec des composants prêts à l'emploi
L'utilité première de Relume reste sa librairie de composants de plus de 1 000 sections UI disponibles pour Webflow et React.
Pour les studios qui travaillent en volume ou avec des contraintes de délais serrées, c'est un gain concret : les composants sont structurés, responsifs, et respectent les conventions Client-First pour Webflow.
Côté React, Relume propose des composants exportables en code propre, compatibles avec les projets front-end modernes.
Le workflow devient alors linéaire : sitemap → wireframes → composants Figma → intégration Webflow ou React, sans friction entre les outils.
3. Fonctionnalités
Relume structure le projet du brief au design system de sections, en passant par le sitemap, les wireframes et les composants prêts à intégrer.
- Relume AI (Site Builder) : génération de sitemap et de wireframes section par section à partir d'un brief texte (chaque section est mappée à un composant de la librairie)
- Librairie de composants : plus de 1 000 sections UI organisées par catégorie (Hero, Pricing, FAQ, Blog, Portfolio, E-commerce…)
- Plugin Figma : import des composants dans un fichier Figma, avec les variables, auto-layouts et styles déjà configurés
- Cloneable Webflow : import des composants dans l'éditeur Webflow, responsive et structuré en Client-First
- Style guide cloneable : un projet Webflow clonable qui inclut un système de variables et de styles de base (point de départ pour les studios qui veulent démarrer avec une fondation cohérente sans construire leur propre design system from scratch)
- Compatibilité Client-First : les composants Webflow suivent la convention de nommage Client-First par défaut
- Mises à jour régulières : la librairie est enrichie en continu avec de nouveaux composants et catégories
4. Cas concrets
→ En début de projet, on utilise le Relume AI Site Builder pour générer une proposition d'architecture de site. On saisit le contexte client, les objectifs et les pages attendues : Relume produit un sitemap structuré avec les sections suggérées pour chaque page. Ce n'est pas un livrable final, mais un point de départ structurant pour la phase de cadrage et de présentation au client. L'architecture se construit en quelques minutes plutôt qu'en quelques heures.
→ Pour les studios qui adoptent une approche basée sur les composants, le workflow va plus loin : le sitemap Relume se connecte directement au plugin Figma pour peupler les pages de wireframes, puis les mêmes composants sont importés dans Webflow via le cloneable. La conception UI et l'intégration partagent la même base, ce qui élimine la friction de transfert entre les deux outils.
5. Prix
Relume propose un plan gratuit donnant accès à une sélection de composants et au Site Builder avec un quota limité.
Le plan Pro débloque l'accès illimité à toute la librairie, le plugin Figma complet et le Site Builder sans restriction.
→ Consulter les tarifs : relume.ai/pricing
6. Questions fréquentes
Les composants Relume sont-ils compatibles avec Client-First ?
Oui, les composants Webflow de Relume suivent la convention de nommage Client-First.
À quoi sert le style guide cloneable ?
C'est un projet Webflow clonable fourni par Relume qui inclut un système de variables CSS, de typographies et de couleurs prêt à l'emploi. Utile comme point de départ pour les projets qui n'ont pas de design system existant.
Peut-on modifier librement les composants après les avoir clonés ?
Oui, une fois cloné dans Webflow, un composant Relume est entièrement éditable (structure, styles, textes, images…). Il n'y a aucun lien de dépendance avec Relume après le clonage.
La fonctionnalité IA génère-t-elle directement dans Webflow ?
La génération IA produit un sitemap et des wireframes dans l'interface Relume. Depuis ces wireframes, vous pouvez cloner les composants correspondants directement dans votre projet Webflow ou les exporter vers Figma.
