> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/images/changelog-design-view-11-26-25.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=08a6483a1839b8ed34bfb420913293df" alt="Changelog Design View 11 26 25 Pn" width="937" height="277" data-path="images/changelog-design-view-11-26-25.png" />

<div id="why-use-design-tools">
  ## Pourquoi utiliser des outils de design
</div>

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.

<div id="key-benefits">
  ### Principaux avantages
</div>

* **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

<div id="common-use-cases">
  ### Cas d'utilisation courants
</div>

* 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

<div id="themes">
  ## Thèmes
</div>

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.

<div id="key-capabilities">
  ### Fonctionnalités clés
</div>

* **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

<div id="visual-editing">
  ## Édition visuelle
</div>

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.

<div id="key-capabilities">
  ### Fonctionnalités clés
</div>

* **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

<div id="quick-start">
  ## Démarrage rapide
</div>

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.

   <Tip>
     Pour accéder rapidement aux modifications visuelles, utilisez le raccourci **Visual edits** dans la zone de Prompt.
   </Tip>
3. **Prévisualisez et enregistrez** lorsque le résultat vous convient.

<Warning>
  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.
</Warning>