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

# Designer avec Canvas

> Explorez des variations de design sur Canvas, choisissez une direction et appliquez-la à votre application.

⏰ *Durée estimée : 5 minutes* · Suite de [Créez votre première application](/fr/getting-started/quickstarts/ask-ai)

**Canvas** est un espace visuel où vous pouvez explorer plusieurs directions de design avant de créer votre application. Générez des maquettes, comparez-les côte à côte et appliquez celle que vous préférez.

## Avant de commencer

Vous aurez besoin d'une application existante sur Replit — issue du guide [Créez votre première application](/fr/getting-started/quickstarts/ask-ai) ou de n'importe quel projet.

<Tip>Vous pouvez également repartir de zéro — créez simplement un nouveau projet et décrivez votre idée à Agent en premier.</Tip>

## Designez votre application

<Steps>
  <Step title="Explorez des variations de design">
    Ouvrez l'onglet **Canvas** dans l'Éditeur de projet, puis cliquez sur **Reimagine**. Un menu déroulant vous propose des prompts rapides pour explorer différentes directions.
    Choisissez « Essayer différentes mises en page » et Agent génère plusieurs maquettes de design sur le Canvas.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/try_different_layouts-with_canvas.mp4" />
    </Frame>

    Voici toutes les options disponibles :

    * Explorer différentes approches
    * Essayer différentes mises en page
    * Explorer différentes ambiances
    * Comme ça, mais en mieux
    * Optimiser pour l'utilisabilité
    * Montrez-moi le contraire de ça
    * Surprenez-moi

    Vous pouvez également demander à Agent de générer des variations avec vos propres mots :

    ```
    Montrez-moi un thème sombre, un thème minimaliste et un thème coloré sur le Canvas
    ```

    <Frame>
      <img src="https://mintcdn.com/replit/4_vaMd7KiBnniEFb/images/getting-started/quickstart_design_canvas_variations.png?fit=max&auto=format&n=4_vaMd7KiBnniEFb&q=85&s=2c848f63eeb54bd4af9a9302b310aa50" alt="Canvas affichant plusieurs variations de design côte à côte" width="2538" height="1428" data-path="images/getting-started/quickstart_design_canvas_variations.png" />
    </Frame>
  </Step>

  <Step title="Choisissez une direction">
    Parcourez les variations et choisissez celle qui correspond à votre vision. Vous pouvez demander à Agent d'affiner une variation spécifique avant de vous décider :

    ```
    J'aime la deuxième, mais agrandissez l'en-tête
    ```
  </Step>

  <Step title="Appliquez à votre application">
    Une fois que vous êtes satisfait d'un design, demandez à Agent de l'appliquer :

    ```
    Appliquez ce design à mon application
    ```

    Agent met à jour le code de votre application pour correspondre au design choisi. Consultez l'onglet **Aperçu** pour voir le résultat.
  </Step>

  <Step title="Publiez votre application mise à jour (optionnel)">
    Cliquez sur **Publier** dans l'Éditeur de projet pour mettre le nouveau design en ligne. Votre URL existante reste la même. Les visiteurs verront immédiatement la version mise à jour.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/quickstart-publish-app.mp4" />
    </Frame>

    En savoir plus sur la publication dans [Publiez votre application](/fr/getting-started/quickstarts/publish).
  </Step>
</Steps>

## Étapes suivantes

<CardGroup cols={2}>
  <Card title="Canvas" icon="palette" href="/fr/replitai/canvas">
    Approfondissez les fonctionnalités et les flux de travail de Canvas.
  </Card>

  <Card title="Éditeur visuel" icon="pen-ruler" href="/fr/replitai/visual-editor">
    Effectuez des ajustements précis sur les couleurs, le texte et la mise en page.
  </Card>

  <Card title="Développez votre projet" icon="layer-group" href="/fr/getting-started/quickstarts/expand-your-project">
    Ajoutez une application mobile, une présentation ou d'autres artefacts à votre projet.
  </Card>
</CardGroup>