Skip to main content
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 vous invite à créer un nouveau design, qui s’ouvre sur le canvas. Consultez 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 de la barre d’outils, ou le panneau de bibliothèque. Tout ce que vous faites sur une frame, Build, Focus, suggestions, se fait via la frame elle-même : consultez Frames.
  • Dessins et notes : des annotations que vous ajoutez avec l’outil 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.

​
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 : 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.
  • 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 et attache ces frames au prochain message Agent en tant que captures.

​
Raccourcis clavier

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

Le menu du clic droit sur une frame sélectionnée.

​
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.
1

Sélectionner la frame

Sélectionnez l’artefact ou la frame de design que vous voulez exporter, puis attendez qu’elle finisse de charger.
2

Choisir Export

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 pour les détails des forfaits.
Référence
  • Aperçu des composants : les briques de base et comment elles s’articulent.
  • Frames : types de frames, la barre d’actions par frame, Build et Focus.
  • Elements : les pièces individuelles à l’intérieur d’une frame.
  • Toolbar : le catalogue complet des outils.
Apprendre