01 · Empezar
Primeros pasos
Del dashboard al primer proyecto editable y exportable.
Crear un proyecto
Crea el proyecto desde Dashboard → New project. La plantilla inicial ya incluye una página real con estructura editable; no necesitas configurar todo antes de entrar al editor.
- Pon un nombre reconocible al proyecto.
- Elige el tipo de proyecto o plantilla inicial.
- Después puedes cambiar rutas, diseño, recursos y exportación desde Configure sin recrear el proyecto.
Templates
Elige un template de partida al crear el proyecto y después sustituye su contenido, páginas, estilos y estructura desde el editor normal. Un template es un punto de inicio, no un modo de edición separado.
Cómo se organiza el editor
Layers y recursos viven a la izquierda, el canvas en el centro y las propiedades de la selección en el inspector derecho. El viewport es independiente del documento: hacer zoom o pan no modifica la página.
- Canvas: selección, movimiento, resize, zoom, pan y edición visual.
- Layers: jerarquía real del documento y orden de exportación.
- Inspector: contenido, estilo, layout y opciones avanzadas de la selección.
- La barra flotante mantiene acciones primarias visibles y agrupa View, Zoom y acciones secundarias en menús contextuales.
- Con varias capas seleccionadas, el inspector cambia a edición múltiple real: muestra valores mixtos y aplica cambios compartidos sin fingir que solo editas la capa enfocada.
Inspector
Selecciona una capa para editar Content, Style, Layout y Advanced en contexto. Con selección múltiple muestra valores compartidos y estados Mixed para aplicar un cambio a las capas compatibles de una vez.
Guardado e historial
Los cambios de documento entran en el historial; acciones de cámara como zoom y pan no. Usa Undo/Redo para cambios del proyecto, no para la posición del viewport.
Si ves un conflicto de versión, evita refrescar varias pestañas del mismo proyecto a la vez y conserva la pestaña con los cambios más recientes.
02 · Editor
Canvas, selección y movimiento
El canvas intenta comportarse como una herramienta de diseño sin perder las reglas de una web exportable.
Zoom y pan
Ctrl/Cmd + rueda o trackpad hace zoom alrededor del cursor. Space + arrastre o el botón central desplazan el canvas. El zoom solo cambia el viewport y está limitado por frame para mantener una interacción fluida.
- Shift+1 encuadra la página.
- Shift+2 encuadra y centra la selección.
- También puedes escribir el porcentaje de zoom.
Seleccionar elementos
Click selecciona; Shift añade o quita de una selección; Ctrl/Cmd + click entra directamente en una capa anidada. En solapamientos, el menú contextual permite elegir la capa bajo el cursor.
- Enter entra en la jerarquía; Shift+Enter vuelve al padre.
- Tab y Shift+Tab recorren capas hermanas.
- Ctrl/Cmd + arrastre permite selección profunda por marco.
Edición múltiple real
Al seleccionar varias capas, el inspector muestra propiedades compartidas con estado Mixto cuando los valores no coinciden. Cambiar una propiedad actualiza toda la selección en una única operación.
- Opacity, radio, fondo y color de texto pueden editarse en conjunto.
- Si todos los seleccionados son Stack/Grid aparecen gap y padding compartidos.
- Si comparten un campo textual compatible aparece Texto compartido para editarlo en bloque.
- Igualar ancho, alto o tamaño usa la capa enfocada como referencia.
Mover y reparentar
Al mover una capa a otro contenedor, Frame conserva por defecto sus dimensiones visuales. Entrar en un Stack/Grid no debería convertirla automáticamente en un elemento que ocupa todo el contenedor.
- El tamaño Fill solo se aplica cuando está elegido explícitamente.
- Los contenedores con align stretch no fuerzan stretch a una capa reparentada que estaba en tamaño fijo.
- Durante el drag se oculta UI secundaria y solo queda la guía necesaria para entender el destino.
Contenedores, Stack y Grid
Los contenedores definen cómo se ordenan sus hijos. Free conserva posiciones absolutas; Auto/Stack ordena en una dirección; Grid reparte elementos en columnas/filas.
- Fixed conserva la dimensión visual del hijo.
- Hug se ajusta al contenido cuando el tipo de bloque lo permite.
- Fill ocupa el espacio disponible del eje correspondiente y debe ser una decisión explícita.
Tidy up y Auto layout sugerido
Frame puede leer la geometría libre y convertirla en estructura web real. Tidy up detecta filas o columnas, alinea centros e iguala gaps; Auto layout sugerido elige Stack o Grid según la disposición.
- Shift+A crea Auto layout desde la selección actual.
- Ctrl/Cmd+Alt+Shift+A sugiere Stack o Grid a partir de la geometría existente.
- Ctrl/Cmd+Alt+T ordena tres o más capas hermanas en layout libre.
- Estas acciones cambian el modelo que se exporta como flex/grid; no son solo ayudas visuales.
Controles directos de layout
Al seleccionar un Stack o Grid aparecen controles compactos de gap y padding en el canvas. Puedes escribir un valor o arrastrar horizontalmente la etiqueta para ajustar el spacing viendo el resultado en tiempo real.
- El scrub de Gap/Padding actualiza una previsualización DOM durante el gesto y crea una sola edición al soltar, evitando llenar Undo de pasos intermedios.
- Mantén Shift durante el arrastre para saltos mayores.
- En Stack también puedes cambiar la dirección sin abandonar el contexto visual.
- Fixed, Hug y Fill siguen disponibles desde click derecho cuando la capa vive dentro de un layout gestionado.
- Alt+Shift+A elimina Auto layout del contenedor seleccionado.
Ajustar a contenido y modo foco
Un contenedor de posición libre puede ajustarse a los límites de sus hijos visibles y el modo foco oculta temporalmente ambos paneles laterales para ganar espacio de trabajo.
- Ctrl/Cmd+Alt+Shift+R ajusta un contenedor libre a su contenido.
- Ctrl/Cmd+Backslash activa o desactiva el modo foco del canvas.
Guías responsive y contornos
Las guías muestran una retícula responsive orientada a web (12 columnas en desktop, 8 en tablet y 4 en móvil). Los contornos permiten inspeccionar rápidamente los límites de las capas renderizadas sin cambiar el documento.
- Shift+G muestra u oculta las guías de columnas.
- Ctrl/Cmd+Shift+O muestra u oculta contornos de estructura.
- Mantén Control durante un drag o resize para ignorar temporalmente el snapping.
- Estas ayudas pertenecen al editor y nunca se exportan como HTML/CSS.
03 · Estructura
Layers, frames, grupos y componentes
Layers refleja la jerarquía de página que usan el editor visual y el export: contenedores/frames, grupos, componentes y contenido conviven en un único árbol inspeccionable.
Jerarquía, orden y grupos
Layers usa un único árbol virtualizado: arrastra el icono de tipo para reordenar, anidar o sacar una capa de un contenedor. La indentación representa parentesco real y el hover resalta la misma capa en el canvas.
- Doble click o F2 renombra; Ctrl/Cmd+R abre renombrado individual o múltiple.
- Shift selecciona un rango y Ctrl/Cmd alterna capas dentro de la selección.
- Flecha derecha expande o entra en los hijos; izquierda contrae o sube al padre. Alt/Option + click en el disclosure expande o contrae toda la rama.
- El ojo y el candado solo permanecen visibles cuando el estado está activo o pasas el cursor por la fila.
- Click derecho permite agrupar, añadir Auto layout, desagrupar, seleccionar hijos/hermanos, expandir/contraer descendientes, copiar ID y acciones normales de capa.
- Contraer mantiene expandida la ruta de la capa seleccionada y cierra el resto del árbol.
Reemplazar un bloque sin perder su colocación
Replace block está disponible desde Layers, el canvas, el inspector y Ctrl/Cmd+K. Cambia el tipo/contenido base del bloque sin obligarte a reconstruir su posición.
- Conserva el ID de la capa destino, geometría, sizing y overrides responsive.
- Mantiene apariencia/estados compatibles del destino y contenido común cuando el nuevo bloque lo soporta.
- Los candidatos se filtran por las reglas del padre actual y por si deben conservar hijos.
- Para elementos que deben mantenerse vinculados entre usos, utiliza Componentes en vez de Replace block.
Componentes e instancias
Convierte una capa reutilizable en componente con Ctrl/Cmd+Alt+K o desde el panel Componentes. Las instancias siguen siendo árboles web normales, pero conservan un vínculo de edición con el principal.
- Los cambios del componente principal se sincronizan con sus instancias sin cambiar el formato exportable de la página.
- Los cambios locales de props/estilos de una instancia se registran como overrides y se conservan al sincronizar.
- El inspector de una instancia reúne propiedades seguras de contenido de capas internas —texto, labels, href, alt y booleanos simples— para editarlas sin entrar en cada subcapa.
- Reset descarta overrides; Detach conserva el resultado actual y elimina el vínculo; Ir al principal navega al origen.
- El panel Componentes permite buscar componentes locales e insertar instancias en un destino compatible.
- Añadir variante crea otro principal editable dentro del mismo conjunto; las instancias pueden cambiar de variante desde el inspector conservando overrides compatibles.
Variants
Usa variants para agrupar estados relacionados de un componente. Una instancia puede cambiar de variante conservando los overrides locales compatibles.
IDs de capa
Cada capa necesita un ID único para selección, historial, bindings, colaboración y exportación. IDs ausentes o duplicados se reparan automáticamente al insertar o normalizar el árbol.
- No se muestran IDs técnicos en todas las filas.
- Click derecho → Copiar ID de capa permite obtenerlo cuando lo necesitas para depuración o soporte.
- También puedes pegar un ID en el buscador de Layers para localizar la capa sin mostrar IDs en todas las filas.
- Una reparación automática de ID no añade una acción extra de Undo.
Problemas de una capa
Los problemas se muestran con un indicador neutro y un contador, no con puntos rojos/amarillos sin explicación. Púlsalo para seleccionar la capa y abrir el panel donde puede resolverse.
- Assets o CMS → Content.
- Colores directos o contraste → Style.
- Overflow o placement inválido → Layout.
- Accesibilidad → Advanced.
Oculto y bloqueado ya no cuentan como problemas porque el usuario los controla explícitamente.
Placement inválido
Algunos bloques no pueden vivir dentro de cualquier padre porque producirían HTML o layout inválido. El editor intenta una inserción segura automáticamente; si no existe un destino razonable, mantiene el bloque fuera del destino inválido y explica el motivo.
04 · Responsive
Responsive y sistema de diseño
Diseña una misma página para distintos tamaños y mantén decisiones visuales reutilizables coherentes en todo el proyecto.
Breakpoints
Cambia entre desktop, tablet y móvil desde la barra del editor. Las propiedades que admiten override pueden variar por breakpoint manteniendo la misma capa y el mismo contenido base.
Overflow
Un elemento fuera del ancho útil puede provocar scroll horizontal o contenido cortado. El indicador de problema de Layers abre Layout para revisar dimensiones, posición, sizing y constraints.
- Evita widths fijos mayores que el viewport móvil.
- Prefiere Fill/Hug dentro de stacks cuando la intención sea fluida.
- Comprueba los tres breakpoints antes de exportar.
Spacing y snapping
Las guías aparecen al mover o redimensionar para alinear bordes y separaciones. Son ayudas del viewport y no se exportan como elementos del documento.
Tokens de diseño y themes
Configura colores, tipografía, spacing, sombras, variables y themes reutilizables desde Configure → Design y aplícalos desde los controles compatibles del editor en lugar de repetir valores crudos capa por capa.
05 · Contenido
Contenido, CMS, assets y formularios
Gestiona contenido estático, bindings dinámicos, medios, localización y formularios sin mezclarlos con la geometría de página.
Texto y contenido
Selecciona una capa de contenido para editar sus propiedades desde Content. Cuando el bloque permite edición inline, puedes editar el texto directamente en el canvas.
Imágenes y recursos
Los assets pueden ser locales/gestionados o externos. Añade alt text cuando la imagen comunica contenido y revisa el estado del recurso antes de publicar.
Bindings de contenido
Los bindings de contenido se gestionan desde Content. Layers reserva su indicador para problemas accionables, evitando que una capa enlazada parezca tener un error solo por usar CMS.
CMS y contenido dinámico
Usa Content para conectar campos compatibles a contenido dinámico y revisar el estado del CMS antes de preview o publicación. La estructura visual sigue siendo editable mientras los valores enlazados proceden de la fuente configurada.
Localización e i18n
Usa las herramientas de localización del proyecto para gestionar locales compatibles y contenido traducido, y revisa las páginas localizadas antes de compartir, exportar o publicar.
Formularios
Inserta bloques de formulario y configura sus campos y comportamiento desde el editor. Revisa la validación y los ajustes de entrega que correspondan al flujo de exportación o publicación antes de lanzar.
06 · Sitio
Páginas, rutas, SEO y preview
Construye el mapa del sitio, configura metadatos públicos de página y revisa el resultado antes de compartirlo.
Páginas
Cada página tiene su propio árbol visual. Añadir, duplicar o eliminar páginas modifica la estructura del proyecto, no solo una vista del editor.
Rutas
Configura rutas y navegación desde las herramientas de proyecto. Antes de exportar, revisa que no haya rutas duplicadas, enlaces a páginas inexistentes ni slugs inválidos.
SEO y metadatos
Los ajustes de página y de proyecto alimentan el código exportado cuando corresponda. Revisa títulos, descripciones, indexación y metadatos antes de publicar.
07 · Entrega
Handoff, exportar y publicar
Pasa del proyecto visual a revisión de desarrollo, código editable o despliegue conectado sin convertir el canvas en una captura.
Checks antes de exportar
El proyecto pasa por validaciones de estructura, assets, configuración y calidad. Un problema bloqueante debe llevarte a la capa o ajuste relevante en lugar de mostrar solo un código de error.
Developer handoff
Abre Code / Handoff para inspeccionar el proyecto desde una vista orientada a desarrollo, revisar información de entrega y pasar de la revisión de diseño al export sin modificar la página fuente solo para comunicar intención de implementación.
Export React / Next.js
La exportación genera estructura, componentes, estilos, contenido y configuración según el proyecto. El resultado está pensado para seguir editándose fuera de Frame.
Publicación conectada
La publicación conectada admite GitHub con Vercel, Netlify, Cloudflare Pages o un webhook de despliegue personalizado cuando el proveedor correspondiente está configurado. Revisa cuenta, repositorio, rama, proyecto y permisos antes de ejecutar; Cloudflare Pages requiere un target de exportación estática.
08 · Equipo
Colaboración, review, branches e historial
Coordina acceso, edición simultánea y revisión manteniendo visibles el historial y el trabajo por ramas cuando esas capacidades estén disponibles.
Roles y acceso
Si una acción aparece deshabilitada, comprueba primero el rol del workspace/proyecto y después el estado del plan. No todos los bloqueos son errores del editor.
Edición en tiempo real
La colaboración en tiempo real está disponible en Starter o superior. Cuando está habilitada, la presencia y los cambios se sincronizan entre colaboradores. Evita abrir copias independientes del mismo proyecto en entornos que no compartan la misma sesión de colaboración.
Branches e historial
Usa el historial del proyecto para inspeccionar puntos de cambio guardados. Cuando las herramientas de branch/review estén disponibles, crea cambios aislados, compáralos y revísalos antes del merge; la disponibilidad depende del plan y los permisos del proyecto.
09 · Ayuda
Errores y problemas comunes
Diagnóstico rápido de los fallos que más suelen parecer un bug del canvas o del proyecto.
Un elemento se hace gigante al meterlo en un contenedor
Comprueba el sizing del hijo. Si estaba en Inherit dentro de un contenedor Fill/Stretch antiguo, podía heredar el tamaño del padre. El editor actual normaliza reparentados a Fixed/Start salvo que Fill se hubiese elegido explícitamente.
- Selecciona la capa → Layout → sizing.
- Usa Fill solo cuando quieras ocupar el espacio disponible.
- Si el contenedor está vacío, revisa también min-height y padding del padre.
No puedo soltar una capa en un destino
El destino probablemente no acepta ese tipo de hijo, está bloqueado o produciría un ciclo. Prueba a soltar en el contenedor inmediatamente superior o abre Layers para ver la jerarquía exacta.
Aparecía “Apply fix” al añadir un bloque
Ese flujo se ha eliminado. Las reparaciones deterministas de ID, metadata y placement seguro se aplican automáticamente antes de insertar. Ya no necesitas confirmar un arreglo interno del editor.
El zoom parece lento o los elementos saltan
El zoom usa una transformación de viewport agrupada por frame y no debería re-renderizar cada bloque. Si reaparece, comprueba extensiones del navegador, escala del sistema y si un bloque pesado está forzando layout/paint por contenido externo.
Aparece scroll horizontal en móvil
Busca problemas de overflow desde Layers. Suele deberse a widths fijos, posiciones absolutas, transforms o gaps que superan el viewport.
La exportación está bloqueada
Abre el check que falla y corrige la causa, no el síntoma. Las causas habituales son estructura inválida, recurso roto, configuración incompleta o referencia a una página/ruta que ya no existe.
El proyecto cambió mientras editaba
Puede ocurrir cuando dos sesiones guardan versiones distintas. Conserva los cambios válidos y vuelve a abrir el proyecto si se rechaza una versión obsoleta.
ID duplicado o inexistente
El editor repara IDs de capa al normalizar o insertar contenido. Para reportar una capa, copia su ID desde el menú contextual de Layers.
Guías prácticas
Guías de tareas del editor
Flujos prácticos del editor, desde crear una página hasta previsualizar y publicar, usando las etiquetas visibles del producto.
01
Crear una página
Añade una página desde Pages, ponle un nombre y una ruta claros y ábrela en el canvas antes de insertar contenido.
- 1.Abre Pages desde el rail izquierdo.
- 2.Pulsa Añadir página y define el nombre y la ruta.
- 3.Abre la página nueva y empieza desde su canvas vacío o desde el contenido inicial elegido.
Mantén las rutas cortas y legibles. Puedes refinar SEO y metadatos después sin reconstruir la página.
02
Insertar y editar un elemento
Inserta un bloque en el destino seleccionado y edita después su contenido y apariencia desde el canvas o el Inspector.
- 1.Selecciona el contenedor que debe recibir el elemento.
- 2.Abre Insertar, elige un bloque y colócalo en el canvas.
- 3.Edita el texto directamente cuando esté disponible o usa Contenido y Diseño en el Inspector.
Si el destino no acepta el bloque, elige en Layers el contenedor compatible más cercano en vez de forzar una jerarquía inválida.
03
Seleccionar y multiseleccionar
Usa la selección normal para una capa y Shift+click cuando varias capas necesiten la misma edición.
- 1.Haz click en una capa del canvas para seleccionarla.
- 2.Usa Shift+click para añadir o quitar capas de la selección.
- 3.Usa Ctrl/Cmd+click para llegar a una capa anidada sin entrar repetidamente en sus padres.
Con varias capas seleccionadas, Mixed indica que sus valores actuales difieren. Cambiar una propiedad compartida la aplica a las capas compatibles.
04
Mover y redimensionar
Arrastra una capa seleccionada para moverla o cambiarla de contenedor y usa sus tiradores para modificar el tamaño con guías y snapping.
- 1.Arrastra la capa seleccionada; la guía de destino indica dónde quedará.
- 2.Arrastra un borde o una esquina para redimensionarla.
- 3.Mantén Control durante el arrastre o resize cuando necesites ignorar temporalmente el snapping.
Al mover un elemento a Stack o Grid conserva su tamaño visible salvo que Fill se haya elegido de forma intencionada.
05
Construir con Auto layout y Grid
Usa Stack para filas o columnas ordenadas y Grid para composiciones bidimensionales que deban responder como un conjunto.
- 1.Selecciona un contenedor o un grupo de capas hermanas.
- 2.Usa Shift+A para Auto layout o elige Stack/Grid desde Layout.
- 3.Configura dirección, gap y padding y decide Fixed, Hug o Fill de forma intencionada para los hijos.
Tidy up puede regularizar una fila o columna libre antes de convertirla en layout estructurado.
06
Editar estilos desde el Inspector
Usa Diseño para propiedades visuales como color, tipografía, radius, bordes y efectos manteniendo separadas las decisiones de layout.
- 1.Selecciona la capa que quieres estilizar.
- 2.Abre Diseño en el Inspector y ajusta la sección correspondiente.
- 3.Para decisiones repetidas, vincula tokens o valores de tema del proyecto en vez de copiar valores aislados por todas partes.
La multiselección puede aplicar cambios de estilo compartidos y compatibles a varias capas en una sola edición.
07
Adaptar una página a responsive
Parte del layout principal, cambia de contexto de breakpoint y añade solo los overrides necesarios para pantallas más pequeñas o más grandes.
- 1.Construye la estructura base en el breakpoint principal.
- 2.Cambia entre Desktop, Tablet y Mobile desde los controles de breakpoint del canvas.
- 3.Ajusta layout, sizing o visibilidad solo donde el breakpoint necesite un resultado diferente y revisa cada tamaño.
Shift+G muestra las guías responsive. Evita arreglar móvil con offsets arbitrarios cuando Stack, Grid, wrapping o sizing expresen mejor la intención.
08
Reutilizar un componente
Crea un componente para UI que deba mantenerse relacionada entre páginas e inserta instancias en vez de mantener copias independientes.
- 1.Selecciona la capa reutilizable y crea un componente con Ctrl/Cmd+Alt+K o desde Componentes.
- 2.Inserta una instancia desde el panel Componentes donde la necesites.
- 3.Edita el componente principal para cambios compartidos y usa overrides de instancia solo para contenido o propiedades locales soportadas.
Haz Detach solo cuando esa instancia deba dejar de recibir cambios de su componente principal.
09
Trabajar más rápido con shortcuts
Usa comandos de teclado para acciones repetitivas y consulta la referencia completa de shortcuts que aparece más abajo.
- 1.Usa Ctrl/Cmd+Z y Ctrl/Cmd+Shift+Z para Deshacer y Rehacer.
- 2.Usa Ctrl/Cmd+D para duplicar y Shift+click para multiselección.
- 3.Usa Shift+1 para ajustar la página, Shift+2 para ajustar la selección y Space+arrastre para pan.
Los shortcuts no toman el control mientras estás escribiendo en un campo o editando texto.
10
Previsualizar antes de entregar
Usa Preview para inspeccionar la página como la verá una visita, sin el chrome del editor, y vuelve después a corregir lo que no funcione como esperabas.
- 1.Abre Preview desde el editor.
- 2.Revisa navegación, responsive, contenido, formularios y los estados de interacción relevantes para la página.
- 3.Vuelve al editor, corrige y previsualiza de nuevo antes de compartir o publicar.
Preview es una fase de revisión; no sustituye comprobar los distintos contextos responsive mientras construyes.
11
Publicar el proyecto actual
Ejecuta los checks del proyecto, revisa el destino de publicación elegido y publica solo cuando la configuración visible sea correcta.
- 1.Abre Publish desde las herramientas del editor.
- 2.Resuelve los checks bloqueantes y revisa el destino y los datos del proyecto configurados.
- 3.Inicia la publicación y espera al resultado visible antes de considerar terminada la release.
Si Publish falla o queda bloqueado, vuelve al ajuste o check relevante en lugar de repetir la acción sin revisar la causa.
De template a publicación
Plantillas y creación web
De la plantilla a la publicación: páginas, marca, SEO, formularios, diseño adaptable y dominio.
01
Elegir un template de partida
Empieza con el tipo de proyecto que corresponda a lo que vas a construir y usa el template como contenido editable, no como un tema bloqueado.
- 1.Desde Dashboard, pulsa Nuevo proyecto y asigna un nombre.
- 2.Elige Sitio público, App privada o Tienda y revisa el target de exportación y las opciones visibles de Avanzado.
- 3.Crea el proyecto, abre Configure para las decisiones globales y sustituye el contenido inicial desde el editor.
Limit · Los templates solo fijan páginas y configuración iniciales. La exportación HTML / CSS / JS está disponible para Sitio público; los proyectos Tienda usan el target Next.js.
02
Crear una página desde cero
Crea una ruta nueva desde Pages y construye su estructura con contenedores, layout y bloques en vez de duplicar una página que no corresponda.
- 1.Abre Pages desde el rail del editor y pulsa Nuevo.
- 2.Define un nombre y una ruta claros, abre la página e inserta el primer contenedor o sección.
- 3.Construye la jerarquía desde Layers y usa Stack o Grid cuando el contenido deba reorganizarse como conjunto.
Limit · El proyecto debe conservar al menos una página. Las rutas deben ser únicas y válidas para la estructura del sitio elegida.
03
Adaptar contenido y branding
Sustituye primero textos y medios del template y mueve después las decisiones visuales repetidas a tokens y themes del proyecto para mantener coherencia.
- 1.Edita textos, enlaces e imágenes visibles desde el canvas o los controles de Contenido.
- 2.Usa Diseño para estilos puntuales y Configure → design tokens/themes para decisiones reutilizadas en todo el proyecto.
- 3.Revisa las instancias de componentes después de cambiar estilos compartidos para comprobar que sus overrides locales siguen teniendo sentido.
Limit · Cambiar un token o un componente principal puede afectar a todos sus usos. Las copias separadas y los overrides locales siguen siendo independientes.
04
Configurar rutas y SEO
Asigna a cada página pública una ruta y metadatos útiles y define después fallbacks globales para las páginas que no necesiten valores propios.
- 1.En Pages, revisa la ruta y abre Metadatos de página para título, descripción, imagen social y opciones para crawlers.
- 2.En Configure → SEO y runtime, define nombre del sitio, título/descripción por defecto y la URL canónica pública del proyecto.
- 3.Previsualiza la página y revisa los checks de publicación para resolver metadatos ausentes o incoherentes antes del lanzamiento.
Limit · El valor específico de una página prevalece sobre el fallback del proyecto. Sitemap/canonical necesitan una URL pública válida; previsualizar metadatos no publica la página.
05
Añadir y preparar un formulario
Inserta un bloque de formulario, define los campos que necesita el visitante y revisa su comportamiento de envío antes de darlo por listo.
- 1.Inserta un bloque Form o Contact Form y selecciónalo en el canvas.
- 2.Configura campos, obligatorios, validación y los estados visibles de éxito/error.
- 3.Elige un destino de envío compatible con el proyecto y resuelve cualquier aviso de readiness del formulario antes de preview o publicación.
Limit · Un formulario no está terminado solo porque se vea en el canvas. Necesita al menos un campo configurado y un flujo de envío compatible con el target de exportación/publicación elegido.
06
Terminar el comportamiento responsive
Usa el layout principal como base y añade cambios por breakpoint únicamente cuando la página necesite realmente un resultado distinto.
- 1.Revisa la página en Desktop, Tablet y Mobile desde los controles de breakpoint del canvas.
- 2.Prioriza Stack, Grid, wrap y sizing Fill/Hug antes de añadir overrides específicos.
- 3.Abre Preview y corrige overflow, contenido oculto o navegación que no quepa en el ancho objetivo.
Limit · Los overrides de breakpoint modifican el contexto seleccionado, no una copia independiente de la página. Los anchos fijos y posiciones absolutas pueden seguir provocando overflow en pantallas pequeñas.
07
Conectar y revisar un dominio propio
Configura primero el destino de publicación y usa después la sección de dominios/TLS que aparece cuando el proveedor conectado ofrece soporte para dominios.
- 1.Abre Publicar y selecciona/configura el destino de despliegue conectado.
- 2.Cuando exista un proyecto de despliegue, revisa Dominios / salud TLS para los dominios personalizados informados por el proveedor.
- 3.Resuelve cualquier acción visible de verificación o certificado y actualiza la salud antes de compartir la dirección personalizada.
Limit · Los controles de dominio solo aparecen cuando el proveedor y el despliegue activos los ofrecen. Si el proveedor no informa de un dominio personalizado, Frame no puede mostrar su estado desde ese destino.
08
Previsualizar y publicar el sitio
Usa Preview para la revisión como visitante y publica solo cuando los checks visibles y los datos del destino sean correctos.
- 1.Previsualiza páginas clave, navegación, formularios y layouts responsive sin el chrome del editor.
- 2.Abre Publicar, resuelve los checks bloqueantes y confirma proveedor, rama/entorno y destino del proyecto que muestra el panel.
- 3.Inicia la publicación y usa el resultado/historial visible antes de considerar completado el lanzamiento.
Limit · Preview no es un despliegue. Una publicación puede quedar bloqueada, en cola, fallar o requerir otra acción del proveedor; usa el estado mostrado por Frame en vez de asumir éxito al pulsar Publicar.
Trabajo en equipo
Colaboración y flujo de trabajo
Flujos visibles para invitar, editar juntos, revisar, compartir, entregar y recuperar trabajo desde Frame.
01
Invitar a alguien a un proyecto
Abre Colaboración y acceso desde el editor cuando otra persona necesite acceso a ese proyecto sin cambiar todo el workspace.
- 1.Abre Colaboración y acceso e introduce el correo del colaborador.
- 2.Elige Viewer o Editor para ese proyecto y envía la invitación.
- 3.Revisa las invitaciones pendientes desde el mismo panel y revoca una si ya no debe utilizarse.
Disponibilidad · Los cambios de acceso al proyecto los gestiona un owner del workspace. Si la persona ya pertenece al workspace, puede recibir acceso al proyecto directamente en lugar de una nueva invitación pendiente.
02
Entender roles y acceso visible
La pertenencia al workspace y el acceso al proyecto se muestran por separado para distinguir quién solo puede ver, quién puede editar y quién es owner.
- 1.Usa Settings → Members para revisar miembros del workspace, invitaciones pendientes y el rol mostrado para cada persona.
- 2.En Editors, revisa las capacidades visibles de Design y Content antes de cambiar el acceso.
- 3.Usa Colaboración y acceso dentro de un proyecto cuando ese proyecto necesite un nivel Viewer o Editor distinto del acceso general del workspace.
Disponibilidad · Los owners gestionan membresía y cambios de acceso. Viewer es de solo lectura; Editor puede modificar las áreas concedidas; Owner mantiene la gestión del workspace.
03
Editar con presencia en vivo
Cuando la edición simultánea está activada, los colaboradores pueden ver quién está conectado y ver cursores o selecciones remotas en el mismo breakpoint.
- 1.En Colaboración y acceso, elige Editar juntos en tiempo real cuando el proyecto y el plan lo permitan.
- 2.Usa Conectados ahora para confirmar quién más está dentro antes de coordinar cambios.
- 3.En el canvas, usa el nombre junto al cursor o selección remota para saber quién está trabajando en esa zona.
Disponibilidad · La edición simultánea en tiempo real está disponible en Starter o superior. El proyecto también puede usar Un editor cada vez, manteniendo el acceso sin edición simultánea.
04
Comentar un bloque
Asocia el feedback al bloque seleccionado para que la conversación permanezca junto al trabajo revisado y no pase a ser contenido de la página.
- 1.Selecciona el bloque correspondiente y abre su panel Comentarios.
- 2.Escribe el comentario y utiliza una @mención disponible cuando quieras señalar el contexto a un colaborador concreto.
- 3.Responde dentro del hilo y marca Resolver cuando esté atendido; Reabrir sigue disponible si el asunto vuelve a aparecer.
Disponibilidad · Los comentarios de colaboración están disponibles en Starter o superior. Las acciones pueden quedar en solo lectura cuando tu acceso actual al proyecto no permite editar.
05
Trabajar con la cola de review
Usa la vista de review colaborativa para localizar feedback abierto, menciones y elementos que necesitan otra revisión sin recorrer manualmente cada bloque.
- 1.Abre Actividad / review del proyecto y empieza por Abiertos para ver la cola actual.
- 2.Cambia a Resueltos, Menciones, Obsoletos o Recientes cuando necesites una vista más concreta.
- 3.Pulsa Ver bloque para volver al elemento afectado del canvas o Actividad para revisar el contexto de la línea temporal.
Disponibilidad · La review refleja los comentarios y la actividad disponibles para tu cuenta. Un elemento puede seguir apareciendo como pendiente de revisión aunque su bloque original se haya eliminado.
06
Revisar trabajo aislado con branches e historial
Cuando las herramientas de branch están disponibles, mantén un conjunto de cambios separado, actualízalo, solicita review y haz merge solo cuando se cumpla el estado de revisión requerido.
- 1.Abre el workspace de branch review y revisa los cambios visuales antes de pedir una aprobación.
- 2.Trae el estado actual de main cuando sea necesario, elige revisores y solicita review; los revisores pueden Aprobar o Pedir cambios y comentar un cambio seleccionado.
- 3.Haz merge de un branch aprobado cuando tu rol lo permita. Usa Historial por separado para inspeccionar versiones guardadas y comparar estados anteriores del proyecto.
Disponibilidad · Los controles de branch/review solo aparecen cuando ese flujo está disponible para el proyecto y tu rol. El merge corresponde al owner; la aprobación se limita a los revisores seleccionados.
08
Preparar el handoff de desarrollo
Usa Handoff de desarrollo para comunicar contexto de implementación de la capa seleccionada y llevar la revisión de diseño hacia código sin convertir la página en documentación.
- 1.Abre Code / Handoff de desarrollo y selecciona la capa cuyo contexto de implementación quieras revisar.
- 2.Revisa los detalles de la capa y añade anotaciones de handoff cuando la intención de implementación deba quedar explícita.
- 3.Marca el handoff como preparado solo cuando el estado de revisión esté listo y continúa desde el workspace de handoff o el flujo de exportación.
Disponibilidad · La información de handoff describe el proyecto y la capa seleccionada. No hace que los cambios del código fuente vuelvan automáticamente al canvas.
09
Recuperar una versión anterior
Usa Historial cuando un cambio revisado necesite compararse con un estado anterior guardado o restaurarse desde él.
- 1.Abre Historial y selecciona el snapshot que quieras inspeccionar; compara páginas, bloques, rutas y recursos con el proyecto actual.
- 2.Revisa el resumen de seguridad de restauración y las confirmaciones que aparezcan para cambios que se sustituirían o eliminarían.
- 3.Usa Restaurar solo cuando las confirmaciones requeridas estén completas; el evento restaurado aparecerá después en la actividad del proyecto.
Disponibilidad · Restaurar está deshabilitado con acceso de solo lectura y puede seguir bloqueado hasta superar sus comprobaciones y confirmaciones. Puedes exportar una versión seleccionada sin restaurarla.
Código e integraciones
Exportación y Developer
Contratos públicos para exportar código e integrar aplicaciones sin depender de detalles internos de Frame.
01
Elegir el destino de exportación
Configure → Export permite generar un proyecto para Next.js App Router, React + Vite, Astro + React o HTML / CSS / JS sin framework.
- 1.Abre Configure → Export y elige el destino que corresponda al entorno donde se ejecutará el código.
- 2.Revisa la matriz de capacidades antes de descargar; cambiar el destino también actualiza la estructura generada del proyecto.
- 3.Conserva la capa de estilos generada con el export. Frame usa su contrato Tailwind/variables CSS cuando el destino seleccionado admite el runtime basado en paquetes.
Contrato · Los proyectos Store se exportan a Next.js. Private app no admite el destino HTML. HTML es un destino estático para Public site y no incluye paquetes ni funciones de servidor.
02
Entender la estructura generada
El ZIP es un proyecto de código normal cuyos archivos exactos dependen del destino seleccionado y de las funciones usadas por el proyecto.
- 1.Empieza por README.md y frame.manifest.json cuando estén presentes; resumen la preparación y el mapa de artefactos generado.
- 2.Next.js usa páginas de App Router; React/Vite usa el árbol src de la aplicación; Astro usa src/pages; HTML genera index.html y assets estáticos.
- 3.Componentes, estilos, datos de contenido y assets públicos se generan solo cuando el proyecto los necesita, por lo que dos exports pueden tener árboles diferentes.
Rutas representativas
Next.js app/page.tsx
React/Vite src/App.tsx
Astro src/pages/index.astro
HTML index.html + assets/frame.cssContrato · No dependas de una carpeta si el export actual no la contiene. El contrato es el destino y las funciones del proyecto; los archivos opcionales dependen de las capacidades utilizadas.
03
Comprobar diferencias de capacidades
Frame muestra Full, Partial o Unsupported por destino para no presentar como portables funciones que dependen del servidor.
- 1.Consulta la matriz de Export para pages, CMS, rutas dinámicas, formularios, Resources, auth, commerce, i18n, paquetes y runtime de servidor.
- 2.Prefiere Next.js cuando el proyecto necesite el conjunto completo de funciones de servidor, incluido commerce.
- 3.En React/Vite o Astro revisa las funciones marcadas Partial antes del despliegue; HTML permanece intencionadamente estático y no tiene paquetes ni runtime de servidor.
Contrato · Una capacidad Partial requiere la vía de despliegue compatible indicada por Frame. Unsupported significa que ese destino no genera la capacidad y debes cambiar de destino o eliminar la dependencia antes de utilizarla.
04
Usar la Developer API pública v1
El Developer portal publica una descripción OpenAPI 3.1 y una API v1 estable para leer metadatos de workspace y proyecto.
- 1.Abre Settings → Developer y usa el enlace OpenAPI como descripción canónica legible por herramientas.
- 2.Envía una credencial Bearer creada como clave de service account u obtenida mediante el flujo OAuth soportado.
- 3.Solicita metadatos del workspace con workspace:read o un proyecto con project:read y el grant de proyecto correspondiente.
Petición de workspace
GET /api/developer/v1/workspace
Authorization: Bearer frame_sa_…Contrato · La superficie v1 actual es de solo lectura y se limita a las lecturas documentadas de workspace y proyecto. Los límites por credencial son Free 120, Starter 300, Pro 600 y Team 1200 peticiones/minuto. Las deprecaciones ofrecen al menos 180 días de transición; los cambios incompatibles requieren una nueva versión mayor en la ruta.
Bearer frame_sa_…
05
Crear un service account para lecturas servidor a servidor
Los owners del workspace pueden crear service accounts en Settings → Developer con grants de lectura explícitos sin utilizar una sesión personal.
- 1.Elige workspace:read para metadatos del workspace o project:read junto con un project ID para un grant específico.
- 2.Crea una clave con nombre, configura opcionalmente su caducidad y copia el token cuando Frame lo muestre.
- 3.Rota creando una clave de sustitución y revoca las claves antiguas o el service account completo cuando deje de necesitar acceso.
Contrato · Las claves de service account son credenciales Bearer y el token completo se muestra una sola vez. Los grants actuales son de solo lectura: workspace:read y project:read. La caducidad puede configurarse entre 1 y 3650 días.
06
Conectar un usuario con OAuth
Las aplicaciones OAuth públicas usan Authorization Code con PKCE para que un usuario apruebe los mismos scopes de lectura acotados de Developer API.
- 1.Registra la app en Settings → Developer con una redirect URI HTTPS exacta y los scopes necesarios.
- 2.Envía al usuario a la página OAuth localizada con PKCE S256 y canjea después el código recibido en el endpoint de token documentado.
- 3.Usa el token Bearer frame_ou_… resultante contra Developer API v1 hasta que caduque o sea revocado.
Endpoints OAuth públicos
GET /{locale}/oauth/authorize (Authorization Code + PKCE S256)
POST /api/oauth/token (canje form-encoded)Contrato · Los scopes soportados son workspace:read y project:read. La redirect URI debe coincidir exactamente con una URI HTTPS registrada. Los códigos de autorización caducan a los 5 minutos y son de un solo uso; los access tokens caducan a la hora.
07
Recibir webhooks Developer soportados
El Developer portal puede entregar eventos del ciclo de vida de service accounts a un receptor HTTPS y muestra el estado de entrega de cada webhook configurado.
- 1.Crea un webhook, elige entre service_account.created, updated, revoked, key_created o key_revoked y selecciona entre 1 y 8 intentos de entrega.
- 2.Guarda el signing secret cuando se muestre y verifica cada petición antes de procesar su cuerpo JSON.
- 3.Usa Delivery logs para revisar evento, estado HTTP y número de intento; desactiva el webhook o rota el secreto cuando sea necesario.
Contrato de firma
x-frame-timestamp: …
x-frame-delivery-id: …
x-frame-event-id: …
x-frame-signature: sha256=…
HMAC-SHA256(secret, timestamp + '.' + deliveryId + '.' + rawBody)Contrato · La entrega es al menos una vez: el receptor debe ser idempotente por delivery/event ID. Frame firma el cuerpo exacto con HMAC-SHA256 y envía la firma como sha256=…; al rotar el secreto, el anterior deja de ser válido.
08
Ejecutar y mantener el código exportado
Un export es un handoff a un código fuente normal: instálalo, revisa su configuración generada y continúa el desarrollo con tu flujo habitual de control de versiones.
- 1.Lee el README generado para conocer el package manager, variables de entorno y preparación específica del destino.
- 2.En destinos con paquetes, instala dependencias y ejecuta los scripts generados de lint, typecheck y build antes del despliegue.
- 3.Sube el proyecto exportado a tu propio repositorio y trata exports posteriores de Frame como nuevos handoffs explícitos, no como sincronización bidireccional automática.
Comprobaciones del proyecto generado
pnpm install
pnpm run lint
pnpm run typecheck
pnpm run buildContrato · Frame no fusiona automáticamente los cambios de código fuente dentro del canvas ni mezcla un export posterior con un repositorio ya editado. Revisa los diffs al reemplazar o combinar código generado con cambios de aplicación.
Workspace
Cuenta y facturación
Guía pública de los controles de perfil, workspace y plan disponibles desde Settings.
Perfil y cuenta
Settings → Profile es la superficie de usuario para nombre visible, URL del avatar, idioma y zona horaria. También muestra la identidad con sesión iniciada y el proveedor de autenticación.
- Guarda los cambios del perfil desde el propio panel Profile.
- Usa Cerrar sesión cuando quieras terminar la sesión actual.
Workspace
Settings → Workspace muestra el nombre actual del workspace, plan, almacenamiento, número de proyectos y número de miembros.
- Cambiar el nombre del workspace está disponible para el owner.
- Los roles e invitaciones de miembros se documentan en Colaboración.
Plan, uso y facturación
Settings → Billing muestra el plan actual, intervalos de facturación disponibles, límites del plan y uso actual cuando esos datos están disponibles.
- El checkout de planes de pago solo está disponible cuando la facturación está configurada para el workspace.
- La gestión de facturación y los cambios de plan siguen los controles visibles en este panel; Team usa su flujo asistido por ventas.
- El tipo de comprador se selecciona explícitamente durante el checkout de pago y no se infiere desde el perfil.
Atajos del editor
Los atajos no se ejecutan mientras escribes en un input o estás editando texto. En macOS usa Cmd donde se indica Ctrl/Cmd.
Preguntas frecuentes
Respuestas breves sobre el editor.
¿Hacer zoom cambia el diseño o el export?
No. Zoom y pan pertenecen al viewport del editor y no modifican geometría, estilos ni código exportado.
¿Por qué una capa no puede estar dentro de otra?
El editor aplica reglas de placement para evitar jerarquías que no tengan sentido en HTML, layout o export. Si puede resolverlo de forma segura, redirige/autowrap automáticamente.
¿Ocultar una capa es lo mismo que borrarla?
No. Ocultar conserva la capa en el proyecto pero cambia su visibilidad. Borrar elimina el nodo y puede afectar bindings o referencias.
¿Qué significa el indicador de problema en Layers?
Que existe una comprobación accionable para esa capa. No necesitas memorizar colores: pulsa el indicador y se abrirá la sección del inspector donde se puede resolver.
¿Puedo copiar el ID de una capa?
Sí. Abre el menú contextual de la capa en Layers y usa Copiar ID de capa. Los IDs se mantienen fuera de la fila normal para no saturar la interfaz.
¿El código exportado depende del zoom o de dónde está el canvas?
No. El export usa el modelo del documento, sus propiedades, contenido, layout y configuración; la cámara del editor no participa.
¿Qué conserva Replace block?
Conserva la identidad y colocación de la capa destino: ID, geometría, sizing y overrides responsive; además intenta mantener apariencia/estado y contenido común compatibles. No cambia a un tipo que sea inválido dentro del padre actual.
¿Qué diferencia hay entre un componente y una copia?
Una copia es independiente. Una instancia permanece vinculada al componente principal: recibe cambios del principal salvo en propiedades que hayas sobrescrito localmente; puedes restablecerla o separarla cuando necesites independencia.
¿Qué debería revisar antes de publicar?
Responsive en los breakpoints disponibles, overflow, assets y alt text, rutas/enlaces, metadatos, checks de exportación, permisos e integraciones.
Comentarios y review
Los comentarios de colaboración están disponibles en Starter o superior. Úsalos para discutir puntos de revisión dentro del contexto del proyecto; los comentarios siguen siendo datos de colaboración y no contenido de página.