El editor tiene cuatro regiones alrededor del lienzo. Los espacios de trabajo se deslizan sobre el lienzo cuando los necesitas y se retiran cuando terminas.
| Región | Qué contiene |
|---|---|
| Barra de herramientas (arriba) | Menú del sitio, selector de páginas, herramientas, selector de punto de quiebre, zoom, línea de tiempo, deshacer/rehacer, colaboradores, estado de sincronización, Preview y Publish. |
| Barra lateral izquierda | Pestañas de Layers, Pages, Components y Assets, y los botones de espacios de trabajo en la parte inferior. |
| Lienzo (centro) | Una mesa de trabajo por punto de quiebre para la página actual, mesas de trabajo de componentes y elementos sueltos. |
| Inspector (derecha) | Pestañas de Design, Interactions y Tokens. Sin nada seleccionado muestra la configuración de la página. |
La barra de herramientas
- Menú del sitio: configuración del sitio, plugins, guardar como plantilla, exportar y atajos de teclado.
- Selector de páginas: salta entre páginas y páginas plantilla.
- Herramientas: Select V, Frame F, Text T, Image I y Hand H.
- Secciones: inserta una sección guardada al final de la página.
- Selector de punto de quiebre: elige en qué punto de quiebre se escriben tus ediciones de estilo.
- Zoom, deshacer/rehacer, la pila de presencia con las personas que están en el sitio y la indicador de sincronización (guardado, guardando, sin conexión).
- Timeline ⌥T abre el panel de línea de tiempo para las interacciones.
- Preview ⌘↵ ejecuta interacciones, enlaces de datos y flujos de trabajo de cliente en el lienzo. Publish publica en staging o en producción.
La barra lateral izquierda
- Layers: el árbol de nodos de la página. Arrastra para reordenar, haz doble clic o presiona ↵ para renombrar, y oculta o bloquea desde las acciones de la fila.
- Pages: agrega, renombra y reordena páginas; crea páginas plantilla para las colecciones del CMS.
- Components: los componentes del sitio; arrastra uno al lienzo para colocar una instancia.
- Assets: imágenes y archivos subidos.
Espacios de trabajo
Los botones de la parte inferior de la barra lateral izquierda abren un espacio de trabajo sobre el lienzo. Presiona el mismo botón otra vez para volver al lienzo.
El inspector
Design muestra las secciones que aplican a la selección: contenido, enlace, imagen, layout, tamaño, posición, tipografía, relleno, borde, efectos, visibilidad, eventos, y secciones específicas para formularios, campos, instancias y listas de colección. Encima de ellas, la barra de clases elige qué clases usa el elemento y la barra de estados elige hover, focus o active.
Interactions lista las animaciones que dispara la selección o que apuntan a ella. Tokens edita los colores, las fuentes y el espaciado del sitio. Sin nada seleccionado, el inspector muestra la página: título, ruta, vista previa de SEO y regla de acceso.
El panel de línea de tiempo
El botón Timeline de la barra de herramientas, o ⌥T, acopla una línea de tiempo debajo del lienzo. Muestra los pasos de una interacción como barras en segundos: arrastra el cabezal de reproducción para ver la animación en el lienzo, reprodúcela y arrastra las barras para cambiar sus tiempos. Consulta Panel de línea de tiempo.
El panel de IA
En las sesiones de diseño, un panel de IA está junto al lienzo. Describe un cambio y edita la página con las mismas operaciones validadas y reversibles que usas tú. Consulta IA y MCP.
Trabajar en equipo
Todas las personas de un sitio editan el mismo documento en vivo. Ves los avatares, cursores y selecciones de los demás. Los cambios se combinan automáticamente, y deshacer solo revierte tus propias ediciones.