Este guia explica como criar um mostrador do relógio, adicionar elementos com base no tempo e incluir suporte para fotos selecionadas pelo usuário, incluindo uma galeria de várias fotos. Para mais recursos, consulte o guia avançado.
Criar um mostrador de relógio
Para criar um mostrador do relógio, desenhe um frame no Figma e configure-o da seguinte maneira:
Defina o tamanho como 450 unidades de largura por 450 unidades de altura:
Figura 1: painel de layout de frame do Figma, mostrando um mostrador de relógio de 450 x 450 Outros tamanhos também funcionam, mas 450 x 450 é recomendado para mostradores do Wear OS e é necessário para exportação para o Watch Face Studio.
Para um mostrador do relógio eficiente em termos de bateria, defina a cor de preenchimento do frame como preto:
Figura 2: painel de preenchimento de frame mostrando uma cor de preenchimento preta Defina o nome do frame como o nome que você quer dar ao mostrador do relógio. Isso aparece nos relógios dos usuários.
Depois de criar e configurar o frame, abra o plug-in do Watch Face Designer e selecione o frame que você acabou de criar. Uma prévia em tempo real aparece na janela do Watch Face Designer.
Adicionar elementos a um mostrador do relógio
Adicione alguns elementos ao mostrador do relógio para que os usuários possam ver as horas.
Hora analógica
Desenhe um retângulo, que funciona como o ponteiro dos segundos no relógio.
Verifique se, ao mostrar o início de um novo minuto, o retângulo está centralizado horizontalmente e se a borda inferior dele fica no centro do mostrador do relógio, assim como um ponteiro de relógio real. Por padrão, o Figma ativa o recurso Ajustar à geometria, que mostra linhas de guia vermelhas para ajudar no alinhamento do retângulo:
Em seguida, informe ao Watch Face Designer que essa camada não é apenas para decoração. Selecione o retângulo que você desenhou na etapa anterior, navegue até a janela Watch Face Designer e mude Comportamento de "Estático" para "Ponteiro dos segundos".
Observe como o ponteiro começa a se mover uma vez por segundo, simulando o tique-taque de um relógio. Você pode ajustar a rotação se quiser e criar um ponteiro dos minutos e um ponteiro das horas da mesma forma que fez este.
Para saber mais sobre submostradores, consulte o guia de uso avançado.
Hora digital
Também podemos mostrar a hora usando um formato digital. Para fazer isso, crie uma camada de texto no Figma. Por enquanto, insira Hh:Mm:Ss como o conteúdo de texto
da camada.
Na janela Watch Face Designer, mude o Comportamento do texto de "Estático" para "Hora digital". A prévia mostra como isso ficaria em um dispositivo real:
Para saber mais sobre o conjunto de caracteres disponíveis que você pode usar, siga o guia de modelos exibido na barra lateral da janela do Watch Face Designer. Por exemplo, a representa se o horário atual é "AM" ou "PM", que pode ser usado com o "formato de hora" para mostrar o horário de 12 horas.
Você pode selecionar qualquer fonte no Figma, incluindo as que não estão disponíveis no Wear OS. Ela é exportada e agrupada automaticamente no mostrador do relógio. Cada fonte tem termos de licenciamento próprios para redistribuição.
Visualizar horários diferentes
Para ver o mostrador do relógio em diferentes horários do dia, arraste o controle deslizante na parte de baixo da janela do Watch Face Designer para ajustar o horário mostrado na prévia:
Quando terminar de visualizar diferentes horários, você poderá redefinir o horário para o atual selecionando o botão Redefinir no canto inferior esquerdo:
Incluir fotos fornecidas pelo usuário
O mostrador do relógio pode incluir um espaço para uma foto personalizada. Isso permite que os usuários adicionem uma foto pessoal como plano de fundo, sem deixar de mostrar a hora e outros elementos incluídos no design.
Para oferecer suporte a fotos personalizadas, adicione uma camada ao mostrador do relógio e defina o Comportamento como "Foto fornecida pelo usuário". Neste exemplo, usamos uma amostra de fotografia de uma flor para essa camada como a imagem padrão. Essa imagem é usada como substituta antes que o usuário atribua uma foto própria ou quando ele escolhe não usar uma das fotos dele.
Suporte para seleção múltipla de fotos
O mostrador do relógio pode oferecer suporte à seleção múltipla de fotos. O Watch Face Designer chama isso de galeria:
Quando a Seleção de fotos está definida como "Galeria", o usuário pode selecionar várias fotos para esse espaço, e o relógio passa por elas em diferentes pontos, dependendo do que você selecionar em "Mudar foto":
- Quando a opção "Ao tocar" está selecionada, a foto muda quando o usuário toca na sua camada.
- Quando a opção "Ao levantar o pulso" é selecionada, a mudança ocorre a cada três vezes que o usuário
levanta o pulso. No momento, isso não pode ser ajustado usando o Watch Face Designer. Saiba como o Formato do mostrador do relógio oferece suporte mais avançado usando o atributo
changeAfterEvery.
Saiba mais
Para conferir uma prévia do mostrador do relógio em um dispositivo físico, consulte o guia de exportações.
Para mais opções e recursos, consulte o guia de uso avançado.