Editor de Lienzo
El lienzo de edición de wireframes es donde diseñas y perfeccionas tus pantallas. La barra lateral izquierda contiene todas las herramientas de dibujo y selección, el centro es el lienzo donde colocas y organizas elementos, y la barra lateral derecha muestra las propiedades del elemento seleccionado.
Herramientas
Seleccionar
Haz clic para seleccionar y mover elementos en el lienzo. Los elementos seleccionados muestran sus propiedades en la barra lateral derecha.
Cuadrado
Dibuja elementos contenedores rectangulares en el lienzo.
Círculo
Dibuja elementos circulares en el lienzo.
Texto
Agrega etiquetas de texto y bloques de contenido.
Imagen
Coloca elementos de marcador de posición de imagen.
Botón
Agrega elementos de botón interactivos.
Campo de entrada
Agrega campos de entrada de formulario.
+ (Agregar pantalla)
Agrega una nueva pantalla al proyecto de wireframe.
Elementos Bloqueados
Las pantallas generadas por IA vienen bloqueadas por defecto — los elementos no se pueden mover ni redimensionar hasta que se desbloqueen. Presiona Ctrl + D para desbloquear todos los elementos en la pantalla actual, dándote control total para reorganizarlos y editarlos.
Modo Storyboard
El modo storyboard te permite ver todos tus marcos y sus puntos de conexión en una vista panorámica. Alterna entre el lienzo de pantalla única y el modo storyboard usando el mismo botón en la barra lateral izquierda. En el modo storyboard, cada pantalla se muestra como una tarjeta con una vista previa de su diseño.
Características del Storyboard
Vista general de marcos
Ve todas las pantallas de un vistazo con sus conteos de elementos y vistas previas visuales.
Establecer modal
Marca cualquier pantalla como una superposición modal en lugar de una página completa.
Clic para editar
Haz clic en cualquier tarjeta de marco para ir a su vista de lienzo para edición detallada.
Controles de zoom
Usa los controles de zoom a la izquierda para acercar/alejar el storyboard.
Conexiones de flujo
Visualiza cómo las pantallas están conectadas a través de acciones de flujo entre marcos.
Propiedades del elemento
Haz doble clic en cualquier elemento del lienzo para entrar en él y abrir su panel de propiedades en la barra lateral derecha. El panel tiene tres pestañas: Propiedades, Flujo y Colores. Desde aquí puedes editar la posición, tamaño, estilo y comportamiento de cada elemento.
Pestaña de propiedades
Posición (X, Y)
Establece la posición exacta en píxeles del elemento en el lienzo.
Tamaño (Ancho, Alto)
Establece las dimensiones del elemento en píxeles.
Índice Z (Orden de capas)
Controla qué elementos aparecen encima de otros.
Radio de borde
Establece el redondeo de esquinas con un valor numérico o usa los preajustes Agudo, Redondeado o Píldora.
Contenido de texto
Edita el texto mostrado dentro del elemento.
Pestaña de colores
Personaliza los colores de fondo, borde y texto del elemento seleccionado.
Flujos
Los flujos definen acciones y navegación entre pantallas. Un flujo es una acción como navegar a otra página, abrir un modal o dirigirse a una área diferente. Pequeños íconos de enlace en el lienzo indican qué elementos tienen flujos adjuntos. Los marcos se vinculan automáticamente entre sí durante la generación con IA, y las conexiones de flujo también se crean.
Configurar flujos
Seleccionar un elemento
Haz clic en el elemento al que deseas agregar un flujo.
Abrir pestaña de flujo
En la barra lateral derecha, cambia a la pestaña de Flujo para ver conexiones existentes o agregar nuevas.
Agregar conexión
Haz clic en Agregar primera conexión (o el botón +) para crear un nuevo flujo. Elige una pantalla o marco de destino para vincular.
Ver en el lienzo
Los elementos conectados muestran un pequeño ícono de enlace en el lienzo para indicar que tienen acciones de flujo.
Conexiones de bloques
Las Conexiones de Bloques te permiten adjuntar bloques de la Biblioteca de Bloques directamente a elementos de wireframe. Cuando haces doble clic en un elemento y te desplazas hacia abajo en el panel de propiedades, encontrarás la sección de Conexiones de Bloques. Haz clic en + Agregar Bloque para vincular un bloque (HTML, componente o plantilla) al elemento. Los bloques conectados se referencian al generar código con IA, facilitando adjuntar código HTML o de componentes específicos a elementos de wireframe.
Edición con IA
La barra de indicaciones de IA en la parte inferior del lienzo te permite usar IA para editar o crear pantallas. Selecciona tu modelo de IA del menú desplegable a la izquierda, describe los cambios que deseas y la IA modificará el wireframe por ti. También puedes usar entrada de voz o el botón Edición CLI para edición avanzada.
Indicaciones con reconocimiento de contexto
Pantalla única
Al editar una sola pantalla, la barra de indicaciones muestra "Editando 'Nombre de pantalla'" y los cambios de IA se aplican solo a esa pantalla.
Storyboard
En modo storyboard, la IA puede editar todos los marcos a la vez o construir nuevos marcos usando los existentes como referencia.
Entrada de voz
Usa el ícono de micrófono en la barra de indicaciones para dictar tus instrucciones en lugar de escribirlas.
Edición CLI
Haz clic en Edición CLI para un modo de edición avanzado con más control sobre los cambios impulsados por IA.
Exportación e integración
Los wireframes se pueden exportar, importar o usar directamente al crear proyectos o dentro del Hub de Proyectos. Esto facilita pasar del diseño de wireframe a un proyecto funcional sin recrear diseños manualmente.