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

# Composants de Replit Design

> Découvrez les briques de base de Replit Design : Canvas, frames, elements, chat, l'intelligence ambiante, la barre d'outils et le panneau de bibliothèque, et comment ils s'articulent.

À la base, Replit Design est un canvas infini qui affiche des frames. Tout le reste sur cette page concerne la manière d'agir sur ces frames :

* Générer et disposer des frames de design sur un tableau infini
* Itérer sur chaque frame avec le chat, les suggestions et la barre d'outils
* Cibler n'importe quelle partie d'une frame et modifier uniquement cette partie
* Intégrer des templates et de l'inspiration issue de produits réels sans quitter le tableau

## Le tableau en un coup d'œil

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-anatomy.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=ab44fbb9de376c3f43a0395f304f911a" alt="Canvas avec des zones étiquetées : trois Frames (un site web, un système de design et une maquette Design de la supercar APEX X1), un Element mis en évidence à l'intérieur de la frame Website, le panneau Chat, l'intelligence ambiante proposant des prochaines étapes suggérées, la barre d'outils en bas et le panneau de bibliothèque ouvert sur l'onglet Inspiration" width="2000" height="1255" data-path="images/replitai/canvas-anatomy.png" />
</Frame>

Sept composants constituent l'espace de travail Replit Design :

* **[Canvas](/fr/design/canvas)** : la vue design de l'éditeur de projet, un tableau infini à panoramique et zoom qui contient chaque frame, forme et note.
* **[Frames](/fr/design/frames)** : chaque tuile sur Canvas. Les frames peuvent être des artefacts vivants (sites web, diapositives), des maquettes de design, des images, des vidéos ou des graphiques vectoriels.
* **[Elements](/fr/design/elements)** : les pièces individuelles à l'intérieur d'une frame, comme les titres, les boutons, les images et les champs de formulaire.
* **[Chat](/fr/design/chat-about-your-design)** : le chat Agent ancré sur le canvas. Décrivez ce que vous voulez créer, ou sélectionnez une frame et demandez des modifications petites ou grandes ; réduisez-le pour un canvas plein écran.
* **[Intelligence ambiante](/fr/design/explore-suggestions)** : des prochaines étapes suggérées qui apparaissent à côté d'une frame sélectionnée, chacune à un clic de générer une nouvelle direction. Consultez [Explorer des suggestions](/fr/design/explore-suggestions) pour comprendre son fonctionnement.
* **[Toolbar](/fr/design/toolbar)** : la barre flottante en bas de Canvas avec les outils Interact, Pan, Chat, Draw, Edit et Generate.
* **[Panneau de bibliothèque](/fr/design/library-panel)** : des templates de départ, de l'inspiration sélectionnée par Mobbin, et vos propres créations passées, prêts à déposer sur le canvas.

## Comment ils s'articulent

Chaque composant prend le relais là où le précédent s'arrête, d'un tableau vide jusqu'à un design que vous pouvez construire.

### 1. Placer des frames sur le canvas

Générez des frames depuis une invite de chat ou le menu **Generate** de la barre d'outils. Une frame peut être une maquette de design, une application web, une application mobile, des diapositives, une image, une vidéo ou un graphique vectoriel.

### 2. Itérer sur une frame

Sélectionnez n'importe quelle frame pour travailler dessus individuellement. Discutez-en avec vos propres mots, suivez une [suggestion](/fr/design/explore-suggestions) pour partir dans une nouvelle direction, ou passez en **Focus** pour travailler de près. Quand elle est la bonne, **construisez-la** en une application vivante.

<Frame caption="Une frame sélectionnée avec sa barre d'actions : Build, Focus et plus d'options.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-frame-action-bar.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=c767372a08966097abccb48bf11591c7" alt="Canvas avec une frame Design APEX X1 sélectionnée, montrant la barre d'actions par frame en haut avec l'étiquette de type et les actions Build, Focus et plus d'options, la frame attachée sous forme de puce dans la zone d'invite du chat" width="2000" height="1290" data-path="images/replitai/canvas-frame-action-bar.png" />
</Frame>

### 3. Modifier, annoter ou générer avec la barre d'outils

La barre d'outils couvre trois tâches : **Edit** sélectionne un seul élément à l'intérieur d'une frame et ouvre le Visual Editor, **Draw** annote le tableau avec des croquis, des flèches et des notes autocollantes qu'Agent lit, et **Generate** crée les images, vidéos et graphiques vectoriels dont votre design a besoin.

<Frame caption="Un élément sélectionné avec l'outil Edit, avec le Visual Editor ouvert à droite.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-edit.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=94149292dc20f5bd7dbd4a754ef57099" alt="L'outil Edit actif sur un site web de location de supercar avec un élément div sélectionné, et le panneau Visual Editor montrant les contrôles Text, Layout, Color et Border ainsi que les boutons Discard et Save edits" width="2000" height="1269" data-path="images/replitai/canvas-edit.png" />
</Frame>

### 4. Puiser de l'inspiration dans le panneau de bibliothèque

Pour de l'inspiration et des points de départ, ouvrez le panneau de bibliothèque. Les templates arrivent sur le canvas sous forme de frames vivantes et modifiables ; l'inspiration sélectionnée par Mobbin arrive sous forme d'image de référence statique pour orienter votre prochaine génération.

<Frame caption="L'onglet Templates du panneau de bibliothèque : des frames de départ consultables, regroupées par type.">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/library-templates.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=1e02d8d303bf6a33006e116feba2ae22" alt="L'onglet Templates du panneau de bibliothèque avec une zone de recherche, des filtres par catégorie et des cartes de templates incluant une affiche et deux pages d'atterrissage" width="665" height="583" data-path="images/design/replit-design/library-templates.png" />
</Frame>

## Explorer chaque composant

<Columns cols={2}>
  <Card title="Canvas" icon="object-group" href="/fr/design/canvas">
    Le tableau infini où vous générez, disposez et itérez sur les frames.
  </Card>

  <Card title="Frames" icon="square-dashed" href="/fr/design/frames">
    Types de frames, la barre d'actions par frame, Build et Focus.
  </Card>

  <Card title="Elements" icon="object-ungroup" href="/fr/design/elements">
    Sélectionner et modifier les pièces individuelles à l'intérieur d'une frame.
  </Card>

  <Card title="Chat" icon="comments" href="/fr/design/chat-about-your-design">
    Briefer Agent à propos du tableau, d'une frame ou d'un seul élément.
  </Card>

  <Card title="Intelligence ambiante" icon="lightbulb" href="/fr/design/explore-suggestions">
    Des prochaines étapes suggérées en un clic à côté de votre frame sélectionnée.
  </Card>

  <Card title="Toolbar" icon="toolbox" href="/fr/design/toolbar">
    Le catalogue complet des outils, les raccourcis clavier et les gestes du tableau.
  </Card>

  <Card title="Panneau de bibliothèque" icon="images" href="/fr/design/library-panel">
    Modèles, inspiration sélectionnée par Mobbin, et vos propres créations.
  </Card>
</Columns>

## Prochaines étapes

* [Concevoir votre premier écran](/fr/design/design-your-first-screen) : générez vos premières frames à partir d'une invite.
* [Qu'est-ce que Replit Design](/fr/design/what-is-replit-design) : le parcours complet de l'invite à l'application à l'image de votre marque.
