Esta página explica casos de uso mais avançados do Watch Face Designer, incluindo como adicionar suporte a submostradores, complicações e temas de cores. Para saber mais sobre como começar, consulte o guia de conceitos básicos.
Submostradores
É possível criar ponteiros de relógio analógico que giram em uma subseção do mostrador, assim como um submostrador em um relógio de pulso real.
Para isso, siga estas etapas:
Crie um frame vazio que cubra a área em que você colocou o subdial no design:
Figura 1: frame vazio cobrindo um slot de submostrador Projete o ponteiro dos segundos dentro deste frame:
Figura 2: design de segunda mão em um frame de contêiner Selecione o quadro do submostrador que contém o ponteiro dos segundos. Em seguida, no Watch Face Designer, defina Girar em torno de como "Centro da camada":
Figura 3: depois de selecionar o frame de contêiner (à esquerda), escolha o comportamento de rotação do ponteiro dos segundos (à direita)
Complicações
Para adicionar um slot de complemento, adicione um frame ao mostrador do relógio. Dentro desse frame, crie o design de como o slot de complicação vai aparecer quando estiver vazio. Isso forma o design básico para os outros tipos de complementos, como ícones e texto.
Há vários tipos diferentes de complementos. O mostrador do relógio oferece modelos para cada tipo, e os apps no relógio de um usuário decidem qual modelo usar e quais dados fornecer para si mesmos. O usuário escolhe qual app vai em qual slot de complemento.
Selecione o frame que contém o design do slot de complicação. Em seguida, no Watch Face Designer, mude Comportamento para "Slot de complicação". Esse processo cria um componente com uma variante (um design vazio).
Aplicar tipos de slots de complementos
Como não é muito útil incluir um slot de complemento que só aceita o tipo "vazio", adicione outro tipo. Na janela do Watch Face Designer, pressione + Support a new type e selecione "Short text". O texto curto é um tipo de complicação compatível com a maioria dos apps, que mostra dois rótulos pequenos ao lado de um ícone.
Essa etapa cria outra variante para representar nosso design para esse tipo de complicação. Selecione a linha "Texto curto" para acessar essa seção.
Ao editar camadas em um modelo de complicação, a opção "Comportamento" aparece. Essa opção é semelhante à dos mostradores do relógio, mas aqui você pode selecionar comportamentos específicos para o tipo de complemento que está editando.
Neste exemplo, as camadas dentro de uma complicação de texto curto podem ser o título do seu app, o texto dele ou um ícone de uma só cor. Uma única cor significa que o ícone herda a cor definida para ele no Figma.
Depois de criar um retângulo onde você quer que o ícone do app apareça no mostrador do relógio, acesse a janela Watch Face Designer e defina Comportamento como "Ícone de uma única cor":
Em seguida, crie duas camadas de texto. Essas camadas representam mais dois slots de "texto curto": um para o título e outro para o texto:
A prévia mostra como a complicação está sendo criada. Este exemplo mostra como uma complicação pode aparecer se o app de agenda for atribuído a esse slot.
Para mostrar o texto em caracteres maiúsculos, como na imagem a seguir, use o recurso de caixa de texto no menu Tipografia do Figma.
Ao contrário do tempo digital, não há exportação de fonte arbitrária para o texto de complementação. As complicações são sempre desenhadas usando a fonte do sistema do dispositivo Wear OS, que pode variar, mas geralmente é Roboto.
Para adicionar suporte a outros tipos de complementos ou personalizar configurações relacionadas, como App padrão ou se o slot aparece quando o relógio está no modo ambiente, selecione o slot de complemento no mostrador do relógio:
Temas de cores
No mostrador do relógio, você pode incluir várias opções de temas de cores. Em seguida, o usuário pode escolher o tema que quiser usando o seletor de mostradores no relógio.
O Watch Face Designer inclui suporte a temas de cores usando estilos do Figma.
Considere o caso em que, dado o seguinte mostrador do relógio, você quer permitir que o usuário personalize as cores dos ponteiros e do mostrador:
Criar o primeiro estilo
Para criar um estilo de cor personalizável no relógio, crie um novo estilo:
- Desmarque tudo na tela.
- Na barra lateral à direita, ao lado de Estilos, selecione o botão +.
É preciso nomeá-lo de uma forma específica:
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
Nesse caso, o nome do mostrador de relógio de exemplo é Bauhaus, então a cor começa com isso, seguida por Hands, que é o elemento que os usuários podem personalizar.
Em seguida, dê um nome descritivo à cor, como Charcoal, e especifique qual elemento específico (o ponteiro das horas) deve ter a cor alterada.
Juntando tudo, o nome final é: Bauhaus/Hands/Charcoal/Hours:
Siga um processo semelhante para criar um tema de cor personalizado para o ponteiro dos minutos:
Por fim, atribua estas cores aos ponteiros que aparecem no mostrador do relógio:
Bauhaus/Hands/Charcoal/Minutes ao ponteiro dos minutos do mostrador
do relógioAdicionar outro estilo
Crie um novo estilo mudando a parte Theme Name do estilo. O exemplo a seguir adiciona um novo estilo chamado Rust (Bauhaus/Hands/Rust/Hours):
O usuário pode alternar entre os temas de cores "Carvão" e "Ferrugem" no dispositivo, e os ponteiros de hora e minuto do mostrador do relógio serão recoloridos de acordo com a escolha:
Aplicar a outros elementos
Siga etapas semelhantes para tornar outros elementos do mostrador do relógio personalizáveis. Esses temas podem ser combinados, e você pode usar qualquer número de estilos de cores para criar temas complexos e substituíveis:
Com o conjunto de estilos anterior, você forneceu duas opções para as mãos (Rust e Charcoal) e três opções para o ponteiro (Light, Dark e Duotone):
