Types de frame
Les deux types principaux sont les Artifacts (surfaces vivantes, adossées à une application) et les Designs (maquettes). L’en-tête en haut à gauche de la frame indique de quel type il s’agit.Le fait qu’une frame Design se comporte comme une image statique ou comme un prototype interactif dépend de la capacité Interactive frames. Lorsqu’elle est activée, les frames Design répondent aux clics et aux saisies de formulaire comme une véritable page ; sinon, elles s’affichent comme un instantané que vous pouvez itérer mais pas parcourir en cliquant.
Aperçu sur différents appareils
Voyez à quoi ressemble un design sur différentes tailles d’écran. Demandez à Agent de vous montrer une version mobile, tablette ou ordinateur, par exemple « Montre-moi la version mobile de cette page », et il génère une frame à cette taille :- Mobile : 390 × 844
- Tablet : 768 × 1024
- Desktop : 1280 × 720
Barre d’actions par frame
La sélection d’une frame fait apparaître une barre d’actions. Les actions dépendent du type de la frame.Frames Artifact et Design
Pour les frames Artifact (Website, Slides, etc.) et Design, la barre d’actions s’étend sur toute la largeur en haut de la frame.
La barre d'actions d'une frame Design : Build…, Focus, et plus d'options.
Les frames d’application (Website, Slides, Mobile app) affichent Focus et plus d’options ; les frames Design ajoutent Build… avant celles-ci. Pour créer de nouvelles directions à partir d’une frame sélectionnée, suivez ses suggestions.
Sélectionner une frame l’attache aussi au prochain message de chat Agent sous forme d’instantané — voir Ce qui se trouve sur le canvas.
La barre d’actions respecte le mode lecture seule. Lorsque 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.
Frames média
Les frames Image, Video et Vector graphic affichent une petite barre d’actions flottante au-dessus de la frame. Les trois types partagent :- Replace media : téléversez un nouveau fichier pour le substituer dans la frame, en conservant sa position et sa taille sur Canvas.
- Download : enregistrez le fichier média sur votre ordinateur.
- Alt text : ajoutez un texte alternatif pour l’accessibilité et afin qu’Agent dispose de plus de contexte lorsque la frame est référencée.
La barre d'actions d'une frame vidéo : Replace media, Download et Alt text.
- Crop : rognez l’image directement sur Canvas.
- Generate video : générez un clip vidéo à partir de l’image.
La barre d'actions d'une frame image ajoute Crop et Generate video.
Explorer de nouvelles directions
Sélectionner une frame fait apparaître des suggestions à côté d’elle : des directions en un clic ancrées dans ce que vous regardez, comme une mise en page différente, une nouvelle ambiance, ou une page que votre design sous-entend. Chacune se génère sous forme de nouvelle frame à côté de la source, de sorte que l’originale reste intacte et que vous puissiez comparer.
Build
Le menu Build… sur une frame Design sélectionnée fait passer le design au rang d’application vivante et fonctionnelle. Le même menu couvre aussi l’application du design à un Artifact déjà existant.
Build this design
Choisir Build this design dans le menu démarre un nouvel Artifact à partir de la frame Design sélectionnée. Le nouvel Artifact atterrit dans la liste des artifacts du projet et devient une application vivante et fonctionnelle. Build nécessite Core ou Pro.Apply to an existing Artifact
Le menu Build… liste chaque Artifact du projet. En choisir un applique les changements du Design sélectionné à cet Artifact — Agent réécrit le code de l’Artifact pour correspondre au design, en laissant la frame Design sur le Canvas pour référence.Focus
Focus zoome sur la frame sélectionnée afin qu’elle remplisse la vue, vous permettant de travailler dessus de près sans le reste du tableau. Sélectionnez Focus dans la barre d’actions pour y entrer, et Exit focus en haut du tableau pour revenir au canvas.
Pages liées
- Canvas — vue d’ensemble et anatomie.
- Toolbar — la barre d’outils flottante ; Generate crée de nouvelles frames.
- Elements — les éléments individuels à l’intérieur d’une frame.
- Visual Editor — modifications au niveau des éléments à l’intérieur d’une frame en focus.