L’éditeur comporte quatre zones autour du canevas. Les espaces de travail glissent par-dessus le canevas quand vous en avez besoin, puis s’effacent quand vous avez terminé.
| Zone | Ce qu’elle contient |
|---|---|
| Barre d’outils (en haut) | Menu du site, sélecteur de page, outils, sélecteur de point de rupture, zoom, timeline, annuler/rétablir, collaborateurs, état de synchronisation, Preview et Publish. |
| Barre latérale gauche | Onglets Layers, Pages, Components et Assets, et les boutons des espaces de travail en bas. |
| Canevas (au centre) | Un plan de travail par point de rupture pour la page en cours, les plans de travail des composants et les éléments libres. |
| Inspecteur (à droite) | Onglets Design, Interactions et Tokens. Quand rien n’est sélectionné, il affiche les réglages de la page. |
La barre d’outils
- Site menu : réglages du site, plugins, enregistrer comme modèle, export et raccourcis clavier.
- Page switcher : passez d’une page ou d’une page modèle à l’autre.
- Tools : Select V, Frame F, Text T, Image I et Hand H.
- Sections : insérez une section enregistrée à la fin de la page.
- Breakpoint switcher : choisissez le point de rupture sur lequel vos modifications de style s’appliquent.
- Zoom, undo/redo, la presence stack des personnes présentes sur le site et la sync pill (enregistré, enregistrement, hors ligne).
- Timeline ⌥T ouvre le panneau timeline des interactions.
- Preview ⌘↵ exécute les interactions, les liaisons et les workflows client sur le canevas. Publish met en ligne en préproduction ou en production.
La barre latérale gauche
- Layers : l’arbre des nœuds de la page. Faites glisser pour réordonner, double-cliquez ou appuyez sur ↵ pour renommer, masquez et verrouillez depuis les actions de la ligne.
- Pages : ajoutez, renommez et réordonnez les pages ; créez des pages modèles pour les collections du CMS.
- Components : les composants du site ; faites-en glisser un sur le canevas pour placer une instance.
- Assets : les images et fichiers téléversés.
Espaces de travail
Les boutons en bas de la barre latérale gauche ouvrent un espace de travail par-dessus le canevas. Cliquez à nouveau sur le même bouton pour revenir au canevas.
L’inspecteur
Design affiche les sections qui s’appliquent à la sélection : contenu, lien, image, mise en page, taille, position, typographie, remplissage, bordure, effets, visibilité, événements, et des sections propres aux formulaires, aux champs, aux instances et aux listes de collection. Au-dessus, la class bar choisit les classes utilisées par l’élément et la state bar choisit hover, focus ou active.
Interactions liste les animations déclenchées par la sélection ou qui la ciblent. Tokens modifie les couleurs, les polices et les espacements du site. Quand rien n’est sélectionné, l’inspecteur affiche la page : titre, chemin, aperçu SEO et règle d’accès.
Le panneau timeline
Le bouton Timeline de la barre d’outils, ou ⌥T, ancre une timeline sous le canevas. Elle affiche les étapes d’une interaction sous forme de barres en secondes : déplacez la tête de lecture pour voir l’animation sur le canevas, lancez la lecture et faites glisser les barres pour modifier leur minutage. Voir Panneau timeline.
Le panneau IA
Dans les sessions de conception, un panneau IA se trouve à côté du canevas. Décrivez une modification et il modifie la page avec les mêmes opérations validées et annulables que celles que vous utilisez. Voir IA et MCP.
Travailler ensemble
Tous les participants d’un site modifient le même document en direct. Vous voyez les avatars, les curseurs et les sélections des autres. Les modifications fusionnent automatiquement, et l’annulation ne revient que sur vos propres modifications.