Faire une maquette avec l'IA de Relume

Ce que l'IA de Relume produit avant Figma

Relume fonctionne par prompt. Le cours part d'un cas réel : la landing page de prélancement du manga d'Inoxtag, dont le site d'origine ne contenait qu'une table de prix, sans même de scroll. Le prompt décrit le projet, nomme le produit et précise qu'il s'agit d'un prélancement, cette dernière mention aidant l'outil à choisir les sections et à écrire le copywriting. On fixe ensuite le nombre de pages et la langue, puis on génère.

Du sitemap au wireframe : garder la main sur la structure

La génération sort d'abord un sitemap : navigation, hero, liste de fonctionnalités, avantages, témoignages, newsletter, contact, pied de page, chaque section accompagnée d'une explication de son contenu. Beaucoup ne colle pas au sujet, et c'est normal. Ici, on retire les fonctionnalités et les témoignages, on ajoute une section feature en bloc gauche droite, un CTA et une section de tarifs pour retrouver la table de prix du site d'origine.

Le wireframe se génère ensuite à partir de ce plan, sections et textes compris, en piochant dans les composants Relume. Trois réglages reviennent :

• Replace component pour changer la disposition d'une section, par exemple passer le hero en bannière.
• Generate copy pour relancer le texte d'une seule section sans toucher au reste.
• Le changement de composant quand l'option manque : la table de prix ne propose qu'une ou deux colonnes, il faut en choisir une autre pour en obtenir trois.

Importer un projet Relume dans Figma

Le passage de Relume à Figma se fait en quatre temps.

1. Export to Figma. C'est de là que part toute la chaîne.
2. Le Relume Figma Kit s'ouvre. Il crée le fichier de design et installe la style guide.
3. Le plugin Relume s'installe. La procédure le demande dans la foulée.
4. Clic droit, plugin Relume, choix du projet. Puis Add sitemap et Add wireframe. Le contenu arrive en désordre quelques secondes avant que le plugin range tout.

Le fichier contient alors le sitemap, le wireframe en version desktop et mobile, la style guide et la bibliothèque de composants. Ce qui traîne encore et qu'on ne veut pas, un méga menu par exemple, se supprime à la main.

Designer la maquette Figma par la style guide

Rien ne se retouche section par section.

On ouvre la style guide, on édite les styles H1, H2 et H3 en changeant la fonte, et tous les titres du wireframe suivent.

Les couleurs passent par les variables locales, organisées en deux niveaux : les primitives, qui portent les valeurs, et les sémantiques, qui pointent vers elles et sont connectées aux éléments. Pour basculer la maquette en sombre, on n'ouvre aucune section : on inverse les sémantiques. Le fond primaire passe au noir, le fond alternatif au blanc, les bordures s'échangent, les textes suivent. Une nouvelle couleur primitive, ici un rouge, s'ajoute dans la collection de marque avant d'être branchée où on veut.

Composants et boutons : modifier une fois pour tout le fichier

Les boutons sont des composants de la style guide. On double-clique dessus, on remplace la couleur de fond par la variable rouge et on ajuste les variables de texte selon le contraste voulu. Toutes les variantes se sélectionnent d'un coup pour recevoir un border radius commun, et le wireframe se met à jour.

Pour propager un libellé, clic droit, main component, push changes to main component. Certaines instances ne suivent pas parce qu'elles ont été modifiées pendant le transfert entre Relume et Figma : un reset sur l'instance règle le cas. Le logo répond à la même logique, avec un Go to main component pour l'éditer dans la style guide, puis un choix de variante claire ou sombre dans le wireframe.

Finitions et suite du fichier Figma

• Une image de hero se remplace en double-cliquant, avec fit plutôt que fill pour qu'elle entre entièrement dans son cadre.
• Le dégradé de démarcation se construit sur un fond linéaire auquel on ajoute un point à 50 %, opaque en bas et transparent au centre.
• La navigation devient flottante en retirant son fond et en la passant en position absolute.
• Une image de fond de section se pose avec un overlay assombri, quitte à repasser les textes sur la variable de couleur claire pour rester lisibles.
• Dans une carte en auto layout, une image décorative ne se place librement qu'en position absolute.
• Une carte se termine en fill container avec un espacement space between, pour caler le bouton en bas quelle que soit la longueur du texte.

Point important pour la suite : le wireframe importé est entièrement en auto layout. La maquette est donc prête à repartir dans Webflow avec le plugin Figma to Webflow, ou dans Framer.

Conclusion

Relume fait le squelette et le premier jet de texte, Figma fait le design. Le vrai gain de temps n'est pas dans la génération, il est dans la style guide et les variables : un changement, tout le fichier suit.