En esta guía, se explica cómo crear una cara de reloj, agregar elementos basados en el tiempo y brindar compatibilidad con las fotos seleccionadas por el usuario, incluida una galería de varias fotos. Para obtener más funciones, consulta la guía avanzada.
Cómo crear una cara de reloj
Para crear una cara de reloj, dibuja un marco en Figma y, luego, configúralo de la siguiente manera:
Establece su tamaño en 450 unidades de ancho por 450 unidades de alto:
Figura 1: Panel de diseño de marcos de Figma, en el que se muestra una esfera de reloj de 450 x 450 También funcionan otros tamaños, pero se recomienda usar 450 x 450 para las caras de reloj de Wear OS y es obligatorio para exportar a Watch Face Studio.
Para una cara de reloj que ahorre batería, establece el color de relleno del marco en negro:
Figura 2: Panel de relleno de fotogramas que muestra un color de relleno negro Establece el nombre del frame como quieras que se llame la cara del reloj. Esto aparece en los relojes de los usuarios.
Después de crear y configurar el marco, abre el complemento Watch Face Designer y selecciona el marco que acabas de crear. Aparecerá una vista previa en vivo en la ventana del Diseñador de caras de reloj.
Cómo agregar elementos a una cara de reloj
Agrega algunos elementos a la cara de reloj para que los usuarios puedan ver la hora.
Hora analógica
Dibuja un rectángulo que actúe como la segunda manecilla del reloj.
Verifica que, cuando se muestra el comienzo de un nuevo minuto, el rectángulo esté centrado horizontalmente y que su borde inferior se encuentre en el centro de la cara del reloj, tal como lo estaría una manecilla de reloj real. De forma predeterminada, Figma habilita Ajustar a la geometría, que muestra guías rojas para ayudarte con la alineación del rectángulo:
A continuación, informa a Watch Face Designer que esta capa no es solo para decoración. Selecciona el rectángulo que dibujaste en el paso anterior, navega a la ventana Watch Face Designer y cambia Behavior de "Static" a "Second hand".
Observa cómo la manecilla comienza a moverse una vez por segundo, simulando el tic tac de un reloj. Si quieres, puedes ajustar la forma en que gira, y puedes crear una manecilla de minutos y una de horas de forma similar a como hiciste esta.
Para obtener sugerencias sobre los subdiales, consulta la guía de uso avanzado.
Hora digital
También podemos mostrar la hora en formato digital. Para ello, crea una capa de texto en Figma. Por ahora, ingresa Hh:Mm:Ss como el contenido de texto de la capa.
En la ventana Watch Face Designer, cambia el Comportamiento del texto de "Estático" a "Hora digital". La vista previa muestra cómo se vería en un dispositivo real:
Para obtener información sobre el conjunto de caracteres disponibles que puedes usar, sigue la guía de plantillas que se muestra en la barra lateral de la ventana Watch Face Designer. Por ejemplo, a representa si la hora actual es "a.m." o "p.m.", lo que puedes usar con el "formato de hora" para mostrar la hora en formato de 12 horas.
Puedes seleccionar cualquier fuente en Figma, incluso las que no están disponibles en Wear OS, y se exportará y agrupará automáticamente en la cara del reloj. Ten en cuenta que cada fuente tiene sus propios términos de licencia para la redistribución.
Obtener una vista previa de diferentes horarios
Para ver la cara de reloj en diferentes momentos del día, puedes arrastrar el control deslizante que se encuentra en la parte inferior de la ventana del Diseñador de caras de reloj para ajustar la hora que se muestra en la vista previa:
Cuando termines de obtener una vista previa de diferentes horarios, puedes restablecer la hora a la hora actual seleccionando el botón Restablecer en la esquina inferior izquierda:
Incluir fotos proporcionadas por los usuarios
La cara de reloj puede incluir una ranura para una foto personalizada. Esto permite que los usuarios agreguen una foto personal como fondo y, al mismo tiempo, se muestre la hora y cualquier otro elemento que hayas incluido en tu diseño.
Para admitir fotos personalizadas, agrega una capa a la cara de reloj y configura su Comportamiento como "Foto proporcionada por el usuario". En este ejemplo, usaremos una fotografía de muestra de una flor para esta capa como imagen predeterminada. Esta imagen se usa como alternativa antes de que el usuario asigne su propia foto o cuando elige no usar una de sus fotos.
Admite la selección múltiple de fotos
Tu cara de reloj puede admitir la selección múltiple de fotos. El Diseñador de caras de reloj llama a esto una galería:
Cuando la Selección de fotos está configurada como "Galería", el usuario puede seleccionar varias fotos para este espacio, y el reloj las muestra en diferentes momentos, según lo que selecciones en "Cambiar foto":
- Cuando se selecciona "Al presionar", la foto cambia cuando el usuario presiona tu capa.
- Cuando se selecciona "Al levantar la muñeca", el cambio se produce cada tres veces que el usuario levanta la muñeca. Por el momento, no se puede ajustar con Watch Face Designer. Obtén más información sobre cómo el Formato de Caras de Relojes proporciona asistencia más avanzada con el atributo
changeAfterEvery.
Más información
Para obtener una vista previa de la cara de reloj en un dispositivo físico, consulta la guía de exportaciones.
Para obtener más opciones y funciones, consulta la guía de uso avanzado.