> ## 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. # Canvas > Ouvrez, parcourez et enrichissez le canvas, la surface infinie où Replit Design affiche vos frames. Le canvas est la surface infinie à panoramique et zoom où Replit Design affiche vos frames. Tout ce que vous concevez vit ici : générez des frames, déplacez-les, zoomez sur un détail et itérez jusqu'à ce que l'une d'elles soit la bonne. Canvas avec trois frames disposées sur le tableau : un site web (Scroll Hero), un système de design APEX X1 et une maquette Design de la supercar APEX X1, avec la barre d'outils flottante (Chat, Draw, Edit, Generate) en bas ## Ouvrir le canvas Le canvas est la première chose que vous voyez dans Replit Design. Dans un projet, sélectionnez **Design** dans l'en-tête et le canvas remplit le panneau ; sélectionnez **Build** pour revenir à votre application en cours d'exécution. Gros plan sur un en-tête de projet avec le bouton bascule Design et Build, Design sélectionné, au-dessus des frames sur le canvas Démarrer à zéro sur [replit.com/design](https://replit.com/design) vous invite à créer un nouveau design, qui s'ouvre sur le canvas. Consultez [Design vs. Build](/fr/design/design-vs-build) pour savoir quand utiliser chaque surface. ## Ce qui vit sur le canvas * **Frames** : chaque tuile sur le tableau. 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. Générez-les depuis une invite de chat, le [menu Generate](/fr/design/toolbar#generate) de la barre d'outils, ou le [panneau de bibliothèque](/fr/design/library-panel). Tout ce que vous faites sur une frame, Build, Focus, suggestions, se fait via la frame elle-même : consultez [Frames](/fr/design/frames). * **Dessins et notes** : des annotations que vous ajoutez avec l'[outil Draw](/fr/design/toolbar#draw), comme des croquis, des flèches, des formes et des notes autocollantes. Agent lit vos annotations, vous pouvez donc entourer une zone à problème et demander une modification. * **Le panneau de chat** : le chat Agent ancré à côté du canvas. Sélectionner des frames avant d'envoyer un message les attache en tant que captures pour qu'Agent dispose d'un contexte visuel. Pour savoir ce qu'est chaque composant et comment ils s'articulent, consultez l'[aperçu des composants](/fr/design/core-components). ## Parcourir le tableau Le panoramique, le zoom et la sélection fonctionnent depuis n'importe quel outil, sauf mention contraire. **Panoramique :** * Trackpad : glisser à deux doigts. * Souris : clic central et glisser, ou maintenir la barre d'espace et glisser avec le clic gauche. * [Outil Pan](/fr/design/toolbar#pan) : cliquer et glisser avec le bouton gauche de la souris. **Zoom :** * Trackpad : pincer. * Souris : `Ctrl` (ou `Cmd` sur macOS) + molette de défilement. * Clavier : `Cmd`/`Ctrl` + `+` pour zoomer, `Cmd`/`Ctrl` + `-` pour dézoomer, `Cmd`/`Ctrl` + `0` pour réinitialiser le zoom. Le zoom est ancré sur le curseur, de sorte que l'endroit sous le curseur reste fixe pendant que le reste du tableau s'agrandit ou se réduit autour de lui. **Sélection :** * Frame unique : cliquez dessus avec l'[outil Interact](/fr/design/toolbar#interact). * Sélection multiple : maintenez `Shift` et cliquez sur chaque frame, ou faites glisser un rectangle de sélection sur le tableau. * Désélectionner : cliquez sur une zone vide, ou appuyez sur `Escape`. Sélectionner une ou plusieurs frames fait apparaître la [barre d'actions par frame](/fr/design/frames#per-frame-action-bar) et attache ces frames au prochain message Agent en tant que captures. ### Raccourcis clavier | Raccourci | Action | | ------------------------------ | ----------------------------------------- | | `V` | Activer l'outil Interact | | `H` | Activer l'outil Pan | | Maintenir `Espace` + glisser | Panoramique depuis n'importe quel outil | | `Cmd` / `Ctrl` + molette | Zoom | | `Cmd` / `Ctrl` + `+` | Zoomer | | `Cmd` / `Ctrl` + `-` | Dézoomer | | `Cmd` / `Ctrl` + `0` | Réinitialiser le zoom | | `Shift` + clic | Ajouter une frame à la sélection actuelle | | `Cmd` / `Ctrl` + `Shift` + `C` | Copier la frame sélectionnée en PNG | | `Escape` | Désélectionner | ## Menu du clic droit Faites un clic droit n'importe où sur le tableau pour ouvrir un menu contextuel. Le menu est contextuel, les actions s'adaptent donc à ce qui se trouve sous le curseur : une frame obtient des actions de frame, tandis qu'une zone de canvas vide obtient des actions au niveau du tableau, et les frames d'application ajoutent **Refresh artifact**. Sur une frame sélectionnée, le menu inclut : | Action | Raccourci | Ce que ça fait | | ------------------------------ | ----------------------------- | ------------------------------------------------------------------------------- | | Edit | | Passer à l'outil Edit pour sélectionner des éléments à l'intérieur de la frame. | | Chat | | Discuter avec Agent à propos de la frame. | | Focus | | Entrer en [mode focus](/fr/design/frames#focus) sur la frame. | | Cursor chat | `/` | Démarrer un chat rapide à la position du curseur. | | Reorder | | Déplacer la frame vers l'avant ou l'arrière dans l'ordre d'empilement. | | Copy, Paste, Duplicate, Delete | `⌘C`, `⌘V`, `⌘D`, `Backspace` | Gestion standard du presse-papiers et des frames. | | Export as… | | Exporter la frame sous forme de fichier. | | Select all | `⌘A` | Sélectionner toutes les frames du tableau. | Le menu du clic droit ouvert sur une frame Design sélectionnée montrant une supercar Apex X1 grise, avec les actions Edit, Chat, Focus, Cursor chat, Reorder, Copy, Paste, Export as…, Duplicate, Delete et Select all. ### Exporter une frame en PNG Enregistrez n'importe quel artefact ou frame de design sous forme d'image PNG. C'est utile pour partager un aperçu dans un document ou un chat, capturer un instantané avant d'itérer davantage, ou envoyer une capture d'écran à un coéquipier. Sélectionnez l'artefact ou la frame de design que vous voulez exporter, puis attendez qu'elle finisse de charger. Sélectionnez **Export** dans la barre d'actions de la frame. Vous pouvez aussi faire un clic droit sur la frame et sélectionner **Export as…** > **PNG**. L'image se télécharge sur votre ordinateur avec un nom de fichier basé sur le nom de la frame. Pour copier la frame sélectionnée en PNG au lieu de la télécharger, appuyez sur `Cmd+Shift+C` (ou `Ctrl+Shift+C` sous Windows et Linux). Le PNG exporté correspond à ce que la frame affiche actuellement sur le canvas. Si votre application ou votre design est encore en cours de chargement, attendez qu'il s'affiche entièrement avant d'exporter. ## Le canvas et l'application en direct Le canvas et l'aperçu de l'application en direct partagent le même panneau, et quelques modes font le lien entre les deux : * **Mode focus** : l'action **Focus** sur une frame sélectionnée l'agrandit pour remplir la vue. Sélectionnez **Exit focus** en haut du tableau pour revenir au canvas. * **Mode lecture seule** : quand le canvas est verrouillé dans un contexte de tâche en arrière-plan, les actions d'itération se masquent et seul Focus reste disponible. Construire une nouvelle application à partir d'une frame Design nécessite Core ou Pro ; toutes les autres fonctionnalités du canvas fonctionnent avec chaque forfait. Consultez [Facturation](/fr/billing/ai-billing) pour les détails des forfaits. **Référence** * [Aperçu des composants](/fr/design/core-components) : les briques de base et comment elles s'articulent. * [Frames](/fr/design/frames) : types de frames, la barre d'actions par frame, Build et Focus. * [Elements](/fr/design/elements) : les pièces individuelles à l'intérieur d'une frame. * [Toolbar](/fr/design/toolbar) : le catalogue complet des outils. **Apprendre** * [Explorer des suggestions](/fr/design/explore-suggestions) : partez dans de nouvelles directions à partir d'une frame sélectionnée et appliquez le gagnant à votre application. * [Design vs. Build](/fr/design/design-vs-build) : quand utiliser chaque surface.