La pestaña Design del panel derecho controla la apariencia visual de cada elemento. Las propiedades disponibles dependen del tipo de elemento, aunque la mayoría comparte opciones de estilo comunes.

Tamaño y espacio

Visibilidad

El botón Visibility determina si el elemento aparece en pantalla.

• Show Show (predeterminado): El elemento siempre es visible.
• Conditional Conditional: El elemento solo es visible cuando se cumplen determinadas condiciones. Consulta Visibilidad condicional para más información.
• Hide Hide: El elemento siempre está oculto. Úsalo para eliminar temporalmente un elemento del flow sin borrarlo.

Tamaño

Cada elemento tiene controles de Width (anchura) y Height (altura) con tres modos:

• Fill: Se expande para ocupar todo el espacio disponible en el elemento padre
• Hug: Se contrae para ajustarse al contenido del elemento
• Fixed: Establece un valor exacto en píxeles para las dimensiones

Espaciado

La sección Spacing muestra un modelo de caja con dos capas:

• Margin: El espacio entre el elemento y sus vecinos. No sobrepasa los límites del contenedor padre, independientemente del valor asignado.
• Padding: El espacio entre el borde del elemento y su contenido.

Establece el valor de cada lado de forma individual.

Relleno

La sección Fill controla el fondo del elemento. Hay cuatro tipos de relleno disponibles: color sólido, degradado, imagen y vídeo.

Usa esta propiedad para establecer la imagen o vídeo principal de toda la pantalla.

• Color sólido Solid color. Usa el selector de color, introduce un valor hexadecimal o asigna un estilo de color del proyecto. Ajusta la opacidad para que el fondo sea semitransparente.
• Degradado Gradient. Añade un relleno degradado con dos o más paradas de color. Arrastra las paradas para ajustar la transición y cambia el ángulo del degradado para controlar su dirección.

• Image Image o Video Video. Establece una imagen / vídeo como fondo del elemento.

Borde

Los bordes están desactivados por defecto. Haz clic en Plus junto a Border en el panel derecho para añadir uno. Para eliminar un borde, haz clic en Close junto al encabezado Border.

Cuando hay un borde, configura:

• Color: Usa el selector de color, introduce un valor hexadecimal o asigna un estilo de color del proyecto. Ajusta la opacidad para que el borde sea semitransparente.
• Width: El grosor del borde en píxeles.

Esquinas

La sección Corners controla el radio del borde (esquinas redondeadas).

• Control deslizante de radio: Establece el mismo radio para las cuatro esquinas
• Activar por esquina Por esquina: Actívalo para definir un radio distinto en cada esquina individual

Efectos

Haz clic en el botón más Plus junto a Effects para añadir uno o más efectos visuales:

• Drop shadow: Una sombra detrás del elemento
• Inner shadow: Una sombra dentro de los límites del elemento
• Background blur: Desenfoca el fondo
• Layer blur: Desenfoca el elemento y sus hijos

Puedes apilar varios efectos en el mismo elemento. Activa o desactiva su visibilidad Show para desactivar un efecto temporalmente.

Animación

Haz clic en el botón Plus junto a Animation para añadir un efecto animado. Por ahora, Pulse es la única animación disponible: el elemento se escala hacia arriba y hacia abajo rítmicamente para captar la atención.

Configura la animación Pulse con los siguientes parámetros:

Parámetro	Descripción
Scale amount (%)	Cuánto crece el elemento respecto a su tamaño original
Duration (ms)	Duración de un ciclo de animación
Delay between loops (ms)	Pausa entre repeticiones
Shadow color	Color del efecto de sombra pulsante
Shadow size (px)	Tamaño de la sombra pulsante

Vista previa de la animación

El builder muestra pantallas estáticas por defecto: las animaciones permanecen quietas hasta que las actives. Hay dos formas de hacerlo:

• Haz clic en el botón Toggle animations Toggle animations que aparece encima de la vista previa del dispositivo. Activa o desactiva las animaciones de la pantalla; una vez activadas, se reproducen de forma continua hasta que vuelvas a hacer clic. El botón solo aparece cuando la pantalla activa contiene al menos una animación.
• Abre el menú contextual de la pantalla (el icono de tres puntos junto a la capa de la pantalla) y elige Play Animation.

Apariencia

• Opacity: Va del 0% (transparente) al 100% (opaco)
• Rotation: Introduce un valor en grados para rotar el elemento

Propiedades de tipografía (elementos de texto)

Los elementos de texto muestran una sección de Typography con los siguientes controles:

Fuente

Haz clic en el menú desplegable de fuente Font select para abrir el selector de fuentes. Tiene dos pestañas:

• Styles: Muestra los estilos de texto guardados en tu proyecto. Selecciona un estilo para aplicar toda su configuración tipográfica de una vez.
• Fonts: Muestra todas las familias de fuentes disponibles. Busca o desplázate para encontrar la que necesitas.

Tamaño y grosor

• Weight: Selecciona un grosor de fuente en el desplegable
• Size: Selecciona un tamaño en el desplegable o escribe un valor personalizado

Color

Haz clic en la muestra de color para abrir el selector de color. Escribe un valor hexadecimal, usa la paleta o selecciona uno de los estilos reutilizables. Ajusta el control deslizante de opacidad para hacer el texto semitransparente.

Alineación

Dos grupos de controles de alineación:

• Horizontal: Izquierda Align left, Centro Align center, o Derecha Align right
• Vertical: Arriba Align top, Centro Align middle, o Abajo Align bottom

Decoración

• None None: Sin decoración (predeterminado)
• Underline Underline: Añade un subrayado al texto
• Strikethrough Strikethrough: Añade una línea tachada

Truncación

Activa la truncación para cortar el texto que supere el ajuste de Máx. líneas. Esto es útil cuando trabajas con varios idiomas: si una cadena traducida es más larga que el original, la truncación evita que rompa el diseño.

Configuración por estado (elementos interactivos)

Los elementos interactivos admiten varios estados visuales. Al seleccionar uno de estos elementos, aparece una sección States en el panel derecho. Cambia entre estados para configurar distintas propiedades visuales en cada uno.

Cada estado puede sobrescribir cualquier propiedad visual: relleno, borde, color de tipografía, opacidad y más.

Estados seleccionables

Los elementos que pertenecen a un grupo seleccionable (opciones de quiz, productos, pestañas, toggles de prueba) ofrecen dos estados por defecto:

• Default: La apariencia normal del elemento
• Selected: La apariencia cuando el usuario ha seleccionado esta opción. Sobreescribe propiedades como relleno, color de borde y color de texto para resaltar la opción activa Para aplicar estilos a un elemento seleccionable cuando no es interactivo, añade un tercer estado manualmente. Abre States settings Settings y añade un Disabled state.

El estado Disabled está basado en condiciones. Selecciónalo y haz clic en Set conditions set conditions para definir cuándo el elemento queda deshabilitado en tiempo de ejecución, por ejemplo cuando un campo obligatorio está vacío.

Estados de input

Los campos de input ofrecen estados adicionales:

• Default: Apariencia normal, sin foco
• Active: El campo tiene el foco y está listo para recibir texto
• Invalid: El valor introducido no supera la validación
• Disabled: El campo no es interactivo

Otros elementos con estados

Algunos elementos exponen estilos específicos de estado fuera del patrón estándar Default / Selected / Disabled:

• Pasos del indicador de progreso — tres estados por paso: Completed, Current y Upcoming.
• Puntos del carrusel — dos variantes de color: Color para los puntos inactivos y Active Color para el punto de la diapositiva actual.

Estilos reutilizables

El panel Styles Styles en la barra lateral izquierda te permite definir estilos reutilizables que se aplican en todo tu flow. Hay dos tipos de estilos disponibles: estilos de texto y estilos de color. Necesitas usar estilos de color para activar el soporte del modo oscuro.

Estilos de texto

Los estilos de texto almacenan un conjunto completo de ajustes tipográficos: familia de fuente, peso, tamaño, interlineado, alineación y decoración. Cada plantilla de flow incluye presets predeterminados, y puedes crear estilos personalizados.

Para crear un estilo de texto:

1. Abre el panel Styles Styles y selecciona la pestaña Text.
2. Haz clic en Plus Create style.
3. Escribe un nombre y configura los ajustes de tipografía.
4. Haz clic en Create.

Para aplicar un estilo de texto, selecciona un elemento de texto y elige el estilo en el desplegable de fuente de la sección Typography.

Estilos de color

Los estilos de color son colores con nombre que puedes referenciar en todo tu flow. Cada estilo de color tiene un nombre (como “Primary text” o “Brand”), un valor hexadecimal y un contador de uso que muestra cuántos elementos lo referencian.

Para crear un estilo de color:

1. Abre el panel Styles Styles y selecciona la pestaña Colors.
2. Haz clic en Plus Create style.
3. Escribe un nombre y elige un color. Cuando actualizas un estilo de color, todos los elementos que lo referencian se actualizan automáticamente.

Modo oscuro

Si es necesario, puedes añadir dos variantes a cada estilo de color: una para el modo claro Light mode y otra para el modo oscuro Dark mode. El SDK aplica automáticamente la variante correcta según el esquema de colores actual del dispositivo. Para previsualizar el modo oscuro en el builder, usa el selector de tema Dark mode en la barra de herramientas inferior.