Personnaliser les projets avec les outils de design

Utilisez les outils de design pour appliquer et personnaliser des thèmes, modifier les éléments d’interface et maintenir une image de marque cohérente dans votre projet.

Les outils de design rassemblent tout ce dont vous avez besoin pour personnaliser visuellement votre projet — des thèmes globaux aux modifications visuelles détaillées. Vous pouvez gérer l’apparence globale de votre projet via les Thèmes ou effectuer des changements rapides et ciblés avec les Modifications visuelles, sans écrire de code ni utiliser de crédits.

Pour accéder aux outils de design, ouvrez la vue Design depuis le bouton + situé à côté d’Aperçu.

​

Pourquoi utiliser des outils de design

Les outils de design permettent à tous — designers, marketeurs et collaborateurs non techniques — d’apporter visuellement des modifications au design, de rester fidèles à la marque et d’avancer plus vite.

​

Principaux avantages

• Image de marque cohérente : appliquez des thèmes partagés qui reflètent l’identité de votre marque
• Itération plus rapide : mettez à jour les mises en page et le texte visuellement — aucune ligne de code ni invites nécessaires
• Édition accessible : les utilisateurs non techniques peuvent apporter des modifications de design en toute confiance
• Aperçu en direct : visualisez chaque changement visuel en temps réel avant la publication

​

Cas d’utilisation courants

• Designers qui maintiennent la cohérence de la marque sur plusieurs projets
• Responsables marketing qui lancent de nouvelles pages de campagne tout en respectant la charte de marque
• Product managers qui affinent directement les mises en page et les textes
• Équipes qui créent rapidement des prototypes et des variantes avec des styles visuels partagés

​

Thèmes

Les thèmes définissent le système de style principal de votre Projet — couleurs, polices, espacements et arrondis de bordures — qui constitue le fondement de l’identité de votre marque.

​

Fonctionnalités clés

• Appliquer : Choisis parmi les modèles Lovable intégrés ou applique un thème personnalisé
• Créer : Génère un thème à partir de ton projet actuel
• Importer : Importe un fichier CSS personnalisé (comme index.css ou globals.css) pour le transformer en thème
• Personnaliser : Modifie les couleurs, la typographie et les espacements directement dans l’interface utilisateur
• Partager : Les thèmes sont disponibles pour tous les membres de ton espace de travail
• Aperçu : Teste les modifications en temps réel avant de les appliquer

​

Édition visuelle

Le mode Édition visuelle te permet de modifier visuellement ton projet, directement sur la page. Il est conçu pour des ajustements rapides et intuitifs, tout en offrant un contrôle total sur la mise en page et les espacements.

​

Fonctionnalités clés

• Sélection multiple d’éléments pour des modifications groupées en maintenant la touche ⌘ Command (Mac) ou ⊞ Win (Windows).
• Contrôles de mise en page pour l’alignement et le positionnement
• Ajuster les marges et l’espacement interne (padding) sur chaque côté des conteneurs
• Modifier le texte, les couleurs et les polices directement depuis le panneau latéral
• Mise en forme de texte améliorée avec des sauts de ligne et des styles en ligne
• Remplacer les images en important des fichiers ou en ajoutant des URL d’image
• Générer des images avec l’IA en modifiant les images à l’aide d’invites

​

Démarrage rapide

1. Ouvrez la Design view à partir du bouton + à côté de Aperçu.

2. Basculez entre les onglets Themes et Visual edits pour travailler sur le design de votre projet dans le panneau de gauche.

   • Allez dans Themes pour sélectionner un thème ou créer le vôtre, puis l’appliquer au projet.
   • Allez dans Visual edits pour sélectionner des éléments dans l’aperçu en direct et les modifier visuellement.
   Pour accéder rapidement aux modifications visuelles, utilisez le raccourci Visual edits dans la zone de Prompt.

3. Prévisualisez et enregistrez lorsque le résultat vous convient.

La personnalisation visuelle de votre projet ne consomme pas de crédits, sauf dans les cas suivants :

• Vous apportez des modifications à des éléments dynamiques.
• Vous demandez au Lovable Agent de modifier le design. Utilisez plutôt les outils de design.