Crea un estilo para almacenar configuraciones de texto o un relleno (como un color, un degradado o una imagen de fondo) y reutilízalo en elementos de varias pantallas. Cuando editas un estilo, el cambio se aplica a todos los elementos y pantallas que lo usan.

Cada flow tiene su propio conjunto de estilos.

Abre el panel Styles para crear, explorar y editar los estilos de tu flow:

• Text styles: ajustes tipográficos (fuente, peso, tamaño).
• Color styles: rellenos como colores, degradados e imágenes. Un mismo estilo de color puede incluir versiones separadas para modo claro y modo oscuro.

Estilos de texto

Los estilos de texto almacenan un conjunto de configuraciones tipográficas: familia de fuente, grosor, tamaño, altura de línea y espaciado entre letras. Cada plantilla de flow incluye ajustes predeterminados, y puedes crear estilos personalizados.

Para crear un estilo de texto:

1. Abre el panel Styles .
2. En el encabezado del panel, haz clic en Create style.
3. Establece Type en Text, introduce un nombre y configura los ajustes tipográficos.
4. Haz clic en Create.

Para guardar la configuración tipográfica actual de un elemento de texto como un nuevo estilo de texto, haz clic en junto a las pestañas del selector de fuente. El elemento usará entonces el nuevo estilo.

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.

Para editar un estilo de texto, haz clic en su entrada en el panel Styles, cambia su configuración y haz clic en Save.

Estilos de color

Un estilo de color es un relleno guardado: un color, un degradado, una imagen, un vídeo o una combinación de ellos. Si usas un tema oscuro, puede tener versiones específicas para cada tema. El número que aparece en la entrada del estilo indica cuántos elementos y pantallas lo usan.

Crear un estilo de color

Para crear un estilo de color:

1. Abre el panel Styles .
2. En la cabecera del panel, haz clic en Create style.
3. Establece Type en Color e introduce un nombre.
4. Configura el estilo. Puedes cambiar el color o el tipo de relleno de su capa, y añadir más capas encima.
5. Haz clic en Save.

Para convertir el valor actual de una capa de relleno o un color en un estilo, haz clic en su muestra, luego haz clic en el icono junto a las pestañas Custom y Styles, y haz clic en Save. La capa de relleno o el color ahora usa el estilo.

Editar un estilo de color

Para editar un estilo de color:

1. Abre el panel Styles .
2. Selecciona la pestaña Colors.
3. Haz clic en una entrada de estilo.
4. Cada versión puede tener varias capas. Haz clic en la muestra para configurar la capa según su tipo de relleno:
   • Color sólido
   • Degradado
   • Imagen o vídeo

Colores sólidos

1. Establece el color: introduce un valor hexadecimal o haz clic en la muestra y elige uno.
2. Ajusta la opacidad con el deslizador.
3. Haz clic en Save.

Degradados

1. Selecciona el tipo de relleno Gradient.
2. Configura las paradas, los colores de las paradas y la Direction.
3. Haz clic en Save.

Imágenes y vídeos

Un elemento de imagen o vídeo no puede tener un archivo diferente para el tema oscuro. En su lugar, crea un contenedor y establece su fondo con un estilo de color. En cada versión del estilo, configura una capa de imagen o vídeo:

1. Selecciona el tipo de relleno Image o Video.
2. Sube el archivo fuente para el idioma seleccionado en la barra inferior. Puedes hacer clic en Replace si ya hay un archivo cargado.
3. Haz clic en Save.

Estilos multicapa

Cada versión de un estilo de color puede tener varias capas. Puedes usar estilos multicapa para crear efectos visuales más complejos, como imágenes con tinte.

Para añadir una capa, haz clic en la entrada de estilo. Luego, en la sección Properties, Light o Dark, haz clic en el botón . La nueva capa aparece encima de las capas existentes. Para cambiar el orden de las capas, arrastra sus filas. Configura la nueva capa y haz clic en Save.

No todas las capas aparecen en todos los lugares donde aplicas el estilo. Algunas capas solo son visibles si aplicas el estilo a ciertas propiedades o elementos:

• Relleno (inputs y pickers): Solo la capa inferior. El resto de capas se ignoran.
• Relleno (todos los demás elementos): Todas las capas.
• Borde (inputs y pickers): Solo un color sólido o degradado. Las capas de imagen y vídeo se ignoran.
• Borde (todos los demás elementos): Colores sólidos y degradados. Las capas de imagen y vídeo se ignoran.
• Color de texto: Solo capas de color sólido. Las capas de degradado, imagen y vídeo se ignoran. Si una versión no tiene ninguna capa de color sólido, el texto no tiene color en ese modo y es invisible.
• Icono, sombra y otros colores: No admite estilos de varias capas. Solo puedes aplicar un estilo de capa única con un color sólido.

Aplicar un estilo de color

Para aplicar un estilo de color a un elemento, haz clic en la muestra de su capa de relleno, color de texto, color de borde o color de icono. Reemplaza el valor estático por el estilo haciendo clic en la pestaña Styles y seleccionando la entrada del estilo. Si ningún estilo tiene el valor que necesitas, guarda el valor actual como estilo.

Para aplicar un estilo a muchos elementos de una pantalla, pídelo al AI Editor, por ejemplo: Apply the Card background style to all cards. Para configurar estilos y aplicarlos en todo el flow, usa el skill flow-generator.

No puedes aplicar un estilo de color a un elemento de imagen o vídeo, ya que estos elementos no tienen relleno. En su lugar, crea un contenedor y establece su fondo.

Gestionar estilos

En el panel Styles :

• Para renombrar un estilo, haz clic en su entrada, cambia el campo Name y haz clic en Save.
• Para duplicar un estilo, haz clic derecho en su entrada y selecciona Duplicate.
• Para eliminar un estilo, haz clic en su entrada y luego en Delete style. Si el estilo está en uso, selecciona el estilo que lo reemplazará.
• Para cambiar el orden de los estilos, arrastra sus entradas hacia arriba o hacia abajo en la lista.
• Para copiar estilos a otro flow, selecciona sus entradas (Shift+clic para seleccionar varios) y pulsa ⌘C / Ctrl+C. Abre la misma pestaña (Text o Colors) en el otro flow y pulsa ⌘V / Ctrl+V.

Modo oscuro

Un estilo de color puede tener un valor independiente para el modo oscuro. Cuando el dispositivo del usuario está configurado en modo oscuro, el flow utiliza ese valor en su lugar.

Para usar valores oscuros, añade un tema oscuro al flow. Luego cambia el valor oscuro de cada estilo que deba ser diferente en modo oscuro.