Le Style Guide Builder de Relume révolutionne la création de guides de style grâce à l’IA ! On fait le point sur cet outil qui permet de générer et projeter en un clic un style guide sur vos maquettes.
Vue d’ensemble du Style Guide Builder Relume
Dans le processus de création d’un site web, les designers font face à plusieurs défis en matière de création de guides de style. Choisir une palette de couleurs idéale, sélectionner les bonnes typographies, et assurer une harmonie visuelle sont des éléments clés pour développer une identité de marque cohérente.
C’est précisément là que le nouvel outil de Relume - Style Guide Builder - entre en jeu. Déjà connu pour ses fonctionnalités de génération de site map par IA, de wireframes, et sa bibliothèque de composants Figma, Webflow, et React, Relume ajoute enfin des fonctionnalités UI ! Pour le plus grand plaisir des designers, car avec cet outil, ils peuvent à présent générer et tester n’importe quel style guide en quelques clics.
Principales fonctionnalités pour le design UI
Le Style Guide Builder propose un ensemble de fonctionnalités essentielles pour répondre aux besoins des UI designers dans la création d’un guide de style pour une identité de marque cohérente :
- Création de palettes de couleurs : Un simple clic pour générer une palette de couleurs complète, incluant couleurs neutres, primaires, secondaires et d'accents, ainsi que leurs déclinaisons. La palette est ensuite automatiquement projetée sur des éléments UI comme les boutons, les arrière-plans et les placeholders - permettant de mieux se visualiser le rendu.
- Choix de typographies : Connecté à la bibliothèque Google Font, l’outil permet de sélectionner rapidement les polices pour les titres et le corps du texte, avec plusieurs styles par défaut pour ajuster les paramètres d’épaisseur et de taille selon les besoins.
- Éléments UI (à venir) : Une fonctionnalité qui proposera une personnalisation de l’utilisation des couleurs et des typographies pour les principaux éléments du design system, tels que les boutons, les cartes ou encore les champs de texte.
- Projection sur maquettes : L’IA intégrée, permet notamment d’appliqués les styles sur vos maquettes précédemment créées dans Relume. Vous pourrez également tester les variantes Dark et Light modes et évaluer ce qui fonctionne le mieux pour votre projet.
- Génération IA : En manque d’inspiration ? Relume permet de générer automatiquement un style guide en un clic, pour itérer et de tester plus rapidement.
→ Tester l’outil de génération de Style Guide
Pourquoi ce générateur de guide de style est un game changer ?
Jusqu’ici, Relume était particulièrement apprécié par une large communauté de designers et de développeurs pour sa bibliothèque de composants Webflow et React. Ces éléments, réutilisables en un clic, répondaient avant tout aux besoins UX avec des structures HTML de base et des animations pré-configurées. Ce qui laissait une impasse sur les aspects UI et notamment sur les éléments du style guide.
Le Style Guide Builder vient donc combler ce manque ! Il offre un flux de travail plus complet, couvrant désormais les aspects suivants :
- Création de sitemaps détaillés
- Génération de wireframes UX pour chaque page
- Intégration d’un premier jet de copywriting grâce à l’IA
- Conception et application rapide d’un style guide sur les maquettes
Le tout est facilement exportable vers Figma, Webflow, et bientôt en React, ce qui en fait une solution complète, à la fois pour les designers et les développeurs.
Un OUTIL pour les designer et non un designer
Vous l’aurez compris, Relume devient un outil plus complet que jamais pour les designers, accompagnant les premières phases de conception et d’itération dans la création d’un site web.
L'outil de génération de style guide reste cependant un outil conçu pour les designers et au service des designers. Il permettra à vos équipes d’itérer plus rapidement, de manière plus précise et de faciliter la projection visuelle du projet.
En d’autres termes, c’est une base solide sur laquelle vous pouvez vous appuyer pour tester et affiner vos choix, ce qui est essentiel quand on connaît la subjectivité de l’étape UI dans un projet.
Cependant, Relume ne remplace en aucun cas le travail de conception et de création d’un designer. Si l’objectif est d’éviter un rendu “template” et de donner une véritable identité au site, il reste indispensable de pousser plus loin la réalisation des maquettes.
Pour aller plus loin sur le sujet, cette vidéo pourrait vous intéresser : Figma to Webflow : Comment préparer son Design System
