En esta página, se explican casos de uso más avanzados de Watch Face Designer, incluido cómo agregar compatibilidad con subesferas, complicaciones y temas de color. Para obtener más información sobre cómo comenzar, consulta la guía de conceptos básicos.
Subdiales
Puedes crear manecillas de reloj analógicas que giren dentro de una subsección de la cara del reloj, como un segundero en un reloj de pulsera real.
Para ello, completa los siguientes pasos:
Crea un fotograma vacío que cubra el área en la que colocaste el dial secundario en tu diseño:
Figura 1: Marco vacío que cubre una ranura de subdial Diseña la segunda manecilla dentro de este marco:
Figura 2: Diseño de segunda mano dentro de un marco contenedor Selecciona el marco del subdial que contiene la manecilla de los segundos. Luego, en Watch Face Designer, configura Rotate around como "Layer center":
Figura 3: Después de seleccionar el cuadro contenedor (izquierda), elige el comportamiento de rotación de la segunda mano (derecha)
Complicaciones
Para agregar un espacio de complicación, agrega un marco a la cara de reloj. Dentro de este marco, diseña cómo se verá la ranura de la complicación cuando esté vacía. Esto forma el diseño base para los otros tipos de complicaciones, como los íconos y el texto.
Existen muchos tipos diferentes de complicaciones. La cara del reloj proporciona plantillas para cada tipo, y las apps del reloj de un usuario deciden qué plantilla usar y qué datos proporcionar por sí mismas. El usuario elige qué app va en qué ranura de complicación.
Selecciona el fotograma que contiene el diseño para la ranura de la complicación. Luego, en el Diseñador de caras de reloj, cambia Comportamiento a "Espacio de complicación". Este proceso crea un componente con una variante (un diseño vacío).
Aplica tipos de espacios para complicaciones
Como no es muy útil incluir una ranura de complicación que solo admita el tipo "vacío", agrega otro tipo. En la ventana Watch Face Designer, presiona + Support a new type y selecciona "Short text". El texto corto es un tipo de complicación que admiten la mayoría de las apps y que muestra dos etiquetas pequeñas junto a un ícono.
En este paso, se crea otra variante para representar nuestro diseño para este tipo de complicación. Selecciona la fila "Texto corto" para ir a ella.
Cuando editas capas dentro de una plantilla de complicación, aparece la opción "Comportamiento". Esta opción es similar a la de las caras de reloj, pero aquí puedes seleccionar comportamientos específicos para el tipo de complicación que estás editando.
En este ejemplo, las capas dentro de una complicación de texto corto pueden ser el título de tu app, su texto o un ícono de un solo color. Un solo color significa que el ícono hereda el color que le estableciste en Figma.
Después de crear un rectángulo en el lugar donde quieres que aparezca el ícono de tu app en la cara de reloj, navega a la ventana Watch Face Designer y configura Behavior como "Single-color icon":
A continuación, crea dos capas de texto. Estas capas representan dos espacios más de "texto corto": uno para el título y otro para el texto:
En la vista previa, se muestra cómo se arma la complicación. En este ejemplo, se muestra cómo se podría ver una complicación si la app de calendario se asignara a este espacio.
Para mostrar texto en caracteres en mayúsculas, como se muestra en la siguiente imagen, usa la función de casos de texto en el menú Tipografía de Figma.
Ten en cuenta que, a diferencia del tiempo digital, no hay una exportación de fuentes arbitraria para el texto de la complicación. Las complicaciones siempre se dibujan con la fuente del sistema del dispositivo Wear OS, que puede variar, pero suele ser Roboto.
Para agregar compatibilidad con tipos de complicaciones adicionales o personalizar parámetros de configuración relacionados, como App predeterminada o si la ranura aparece cuando el reloj está en modo ambiente, selecciona la ranura de complicación en la cara de reloj:
Combinaciones de colores
En la cara del reloj, puedes incluir varias opciones de temas de color. Luego, el usuario puede elegir el tema que quiera con el selector de caras de reloj en su reloj.
Watch Face Designer incluye compatibilidad con temas de color a través de estilos de Figma.
Considera el caso en el que, dada la siguiente cara de reloj, deseas permitir que el usuario personalice los colores de las manecillas y el dial del reloj:
Crea el primer diseño
Para crear un estilo de color que se pueda personalizar en el reloj, crea un estilo nuevo:
- Anula la selección de todo en el lienzo.
- En la barra lateral derecha, junto a Estilos, selecciona el botón +.
Debes asignarle un nombre de una manera específica:
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
En este caso, el nombre de la muestra de la cara del reloj es Bauhaus, por lo que el color comienza con ese nombre, seguido de Hands, que es el elemento que los usuarios pueden personalizar.
Luego, asigna un nombre de color descriptivo, como Charcoal, y especifica qué elemento específico (la manecilla de las horas) debe cambiar de color.
Si juntamos todo, el nombre final es Bauhaus/Hands/Charcoal/Hours:
Sigue un proceso similar para crear un tema de color personalizado para la manecilla de los minutos:
Por último, asigna estos colores a las manecillas reales que aparecen en la cara de reloj:
Bauhaus/Hands/Charcoal/Minutes a la manecilla de los minutos de la
carátula del relojAgregar otro estilo
Crea un estilo nuevo cambiando la parte Theme Name del estilo. En el siguiente ejemplo, se agrega un nuevo diseño llamado Rust (Bauhaus/Hands/Rust/Hours):
Luego, el usuario puede cambiar entre los temas de color "Gris oscuro" y "Óxido" en su dispositivo, y las manecillas de horas y minutos de la cara de reloj se volverán a colorear según corresponda:
Aplicar a otros elementos
Sigue pasos similares para que otros elementos de nuestra cara de reloj admitan temas. Estos temas se pueden combinar y puedes usar cualquier cantidad de estilos de color para crear temas intercambiables complejos:
Con el conjunto anterior de estilos, proporcionaste dos opciones para las manecillas (Rust y Charcoal) y tres opciones para el dial (Light, Dark y Duotone):
