Novidades do app Símbolos SF 7

Olá! Meu nome é Kelsey. Faço parte da equipe Apple Design. Hoje, vou apresentar as novas atualizações disponíveis para o SF Symbols. Se ainda não assistiu, confira a sessão "Novidades do SFSymbols 6" da WWDC do ano passado. É um ótimo recurso para ficar por dentro e se preparar para o que vem por aí. Antes de começar, vamos revisar rapidamente como os símbolos são criados, um conceito essencial para entender alguns dos novos recursos deste ano. Cada símbolo é meticulosamente criado para passar uma ideia ou um sentimento a ser reconhecido de forma instantânea. Essas ideias são transformadas em um design, começando com um único ponto vetorial e criando um caminho contínuo que começa a tomar forma. A linha é guiada intencionalmente com cada ponto vetorial e curva, definindo a característica e o contorno da forma. Cada curva e ângulo deve transmitir ponderação, equilíbrio e comunicação visual.

Vamos nos concentrar na seta. Um símbolo não é apenas um caminho com um contorno visível, pois isso não inclui os detalhes sutis que deixam os símbolos incríveis. Ele é feito com formas cuidadosamente contornadas, com um controle preciso de proporções, espaço negativo e peso visual.

Isso garante clareza, consistência e uma aparência mais refinada e intencional. Algumas formas são criadas com dois caminhos diferentes e em direções opostas, o que permite a cada caminho individual refinar sua aparência, além de ser uma parte importante de definir como esses caminhos serão animados. Vamos ver as novidades deste ano para saber como esses detalhes foram integrados nas nossas experiências mais recentes. Vamos começar apresentando o Draw, que inclui novos pré-ajustes de animação e renderização. Depois temos atualizações na Substituição mágica, que está ainda mais sofisticada. Vou apresentar os gradientes e mostrar como foram aplicados em símbolos e modos de renderização, antes de entrar na anotação de símbolos personalizados. Vamos encerrar com as atualizações das nossas APIs. Temos muitos tópicos, então vamos começar. Este ano, adicionaremos Draw ao SF Symbols, um novo conjunto de recursos inspirados na caligrafia para desenhar símbolos ao longo do caminho definido.

Com o Draw, apresentamos dois novos pré-ajustes de animação: Draw On, que anima o símbolo na tela, e Draw Off, que anima o símbolo fora da tela. Esses pré-ajustes usam a estrutura de camadas do Symbol e podem ser integrados às suas experiências para enfatizar momentos relevantes por meio de animação. Draw On e Draw Off funcionam com as opções de reprodução existentes, como Por Camada, em que cada caminho é desenhado com um deslocamento inicial. Se quiser um efeito mais rápido e imediato, use o Símbolo Inteiro, que une todas as camadas e onde cada caminho de desenho começa e termina ao mesmo tempo. Outra opção é usar a nova reprodução para pré-ajustes de desenho, individualmente, que desenha cada camada, esperando a camada anterior terminar antes de iniciar a próxima. Use essa opção se estiver buscando ser mais intencional, chamando a atenção para movimentos individuais. O recurso Draw é flexível, permitindo que cada símbolo defina como é desenhado. Por exemplo, o vento é desenhado da esquerda para a direita para transmitir movimento, mas este caractere árabe é desenhado da direita para a esquerda, como a direção da escrita. Além disso, alguns símbolos são desenhados a partir do centro, como este símbolo simétrico. Entender as direções de desenho disponíveis será útil ao anotar seus símbolos personalizados, o que abordaremos um pouco mais adiante na sessão. Alguns símbolos são mais complexos, como as setas, que são compostas por duas formas que se comportam como uma só. O Draw aceita até mesmo estas formas compostas, permitindo que a ponta da seta acompanhe o caminho. Esse movimento pode ajudar a reforçar o significado de um símbolo e dar vida ao app. Agora que apresentamos o Draw, vamos conferir o app SF Symbols e ver uma prévia das novas animações. Draw On e o Draw Off foram incluídos na lista de animações no inspetor. Vou selecionar Draw On, que revelará as três opções de reprodução disponíveis que discutimos antes. Assim como os pré-ajustes de animação existentes, posso ver uma prévia delas aqui no app. Draw Off é semelhante, mas conta com a opção Reverse. Isso indica se o caminho deve seguir a direção do desenho, continuando o movimento existente, ou se deve ser invertido, voltando para o outro lado. O Draw é uma ótima maneira de dar vida aos símbolos por meio da animação, mas também pode ser usado para transmitir progresso. Se você já conhece a cor variável, talvez se lembre de que alguns símbolos funcionam com a renderização variável para transmitir força ou progresso por meio da cor. Para aumentar mais a resolução, incorporamos o desenho variável aos pré-ajustes de renderização. O desenho variável usa as novas anotações de desenho nas camadas participantes.

Ele renderiza o caminho em uma porcentagem específica sobre uma versão de opacidade reduzida da camada. Isso é ótimo para visualizar o progresso, como em um download, para refletir a temperatura ou até mesmo ao fazer uma sessão de ioga.

Vamos voltar ao app SF Symbols e conferir as atualizações do Inspetor de Renderização, onde é possível ver uma prévia do desenho variável. Aprimoramos o seletor de renderização de variáveis existente para incluir a nova opção de desenho.

Vou selecionar Draw, e as camadas de desenho participantes reagirão à renderização variável, assim como a cor variável.

Importante: Os símbolos aceitam cores e desenhos variáveis, mas apenas uma opção pode ser escolhida na renderização. Nesses casos, você pode usar a opção padrão para utilizar o modo de renderização de variável preferencial do sistema. Junto com as novas animações de Draw, também aprimoramos a Substituição mágica para proporcionar maior continuidade ao animar entre símbolos relacionados. A Substituição mágica agora reconhece estruturas correspondentes para criar uma transição perfeita entre dois estados. Se dois símbolos tiverem a mesma estrutura, o sistema os preservará e, ao mesmo tempo, substituirá as diferentes camadas. Também adicionamos o Draw à Substituição mágica para os símbolos compatíveis, usando o Draw Off para símbolos de saída e o Draw On para símbolos de entrada. Junto com a correspondência de estruturas, o sistema combinará esses novos recursos nos símbolos participantes para criar a transição mais perfeita e expressiva. Esses aprimoramentos podem ser visualizados por meio do pré-ajuste existente da Substituição mágica no Inspetor de Animação. Se você não tem experiência no app SF Symbols, encontre a opção no seletor de animação junto com outros pré-ajustes. Gradientes são comumente usados para adicionar profundidade, dimensão e interesse visual a um desenho. Neste ano, estamos felizes em anunciar os gradientes no SF Symbols. Quando aplicado a um símbolo, o gradiente ajuda a criar uma sensação de iluminação que não existe em cores sólidas. A nova renderização de gradiente no SF Symbols gera um gradiente linear suave a partir de uma cor, que está disponível em cores do sistema e personalizadas. Esse recurso está disponível em todos os modos de renderização e pode ser aplicado aos seus símbolos personalizados.

Os gradientes são ótimos em todas as escalas e tamanhos, mas se destacam em instâncias maiores. Use os gradientes em locais em que você deseja chamar a atenção para a profundidade e dimensão do símbolo. Vamos voltar ao app SF Symbols para ver uma prévia desses gradientes, que posso ativar usando a opção recém-adicionada no modo de renderização no inspetor. Ao visualizar gradientes, o gradiente de cores é aplicado em todos os modos de renderização usando as opções selecionadas. Agora que vimos os novos recursos em ação nos símbolos do sistema, vamos conferir como usá-los nas anotações dos seus próprios símbolos personalizados. Nesta seção, vamos mostrar como anotamos alguns dos nossos próprios símbolos do sistema. Se quiser acompanhar, duplique-os como símbolos personalizados, apague os pontos de guia e faça anotações conosco. Para entender como o recurso desenhar anotações funciona, lembre-se dos detalhes de como os símbolos são desenhados. Neste exemplo, o símbolo é criado com dois caminhos separados. scribble.variable é desenhado com uma largura variável. Isso significa que não podemos só traçar os caminhos para criar as animações. Então, como realmente funciona o Draw?

Ao desenhar animações, usamos pontos de guia a serem colocados ao longo do caminho de desenho desejado. Como sugere o nome, esses pontos ajudam a guiar o caminho ao longo do percurso definido. Para calcular corretamente o caminho de desenho, ele deve conter pelo menos dois pontos de guia. Um ponto inicial, indicado por um círculo aberto, e um ponto final, indicado por um círculo fechado. Conforme os caminhos ficam mais complexos, podem exigir mais pontos de guia para preencher as lacunas entre o início e o fim, indicar vários caminhos de desenho ou guiar uma ponta de seta ao longo de um caminho. Além disso, alguns símbolos podem exigir pontos de guia especializados para ajudar o sistema a calcular corretamente o caminho de desenho. Por exemplo, vários subcaminhos podem ter o mesmo ponto inicial e final, e as curvas acentuadas em um caminho precisam ser marcadas como pontos de canto. Há bastante coisa aqui, então vamos abrir o app SF Symbols para explorar como anotar esses símbolos na prática. Vamos usar line.diagonal como primeiro exemplo. Alterne para o modo de visualização de galeria com os controles na barra de ferramentas do app. Ao selecionar Draw On ou Draw Off na lista de animações, a barra de ferramentas do Draw aparece na parte superior. Ao selecionar o botão mais à esquerda, entro no modo de ponto de guia, que fornecerá uma prévia do posicionamento à medida que me movo pela tela.

Quando eu gostar da localização, posso inserir o ponto de guia com apenas um clique e posicionar o próximo ponto. Note que o primeiro ponto de guia que coloquei passa a ser o ponto inicial automaticamente. Quando eu colocar o segundo ponto de guia, o sistema determinará o ponto final e a direção do desenho, indicada por uma seta.

Agora posso testar a animação.

Ótimo. Nossa linha é desenhada para cima pelo caminho definido.

Mas e se tivermos um símbolo mais complexo? O recurso Escrever à mão tem algumas curvas e, para guiar a animação em cada uma delas, precisamos colocar mais alguns pontos de guia no caminho. Vamos para o app SF Symbols para tentar replicar essa anotação.

Já tenho alguns pontos de guia inseridos, mas preciso preencher as lacunas em torno das curvas apertadas. É importante ter precisão para garantir que o caminho seja animado perfeitamente pelas formas mais complexas. Vamos conferir.

Perfeito. A animação agora funciona bem nas curvas. Até agora, anotamos símbolos com um único caminho. Mas e se você tiver um símbolo com mais de um caminho para desenhar? Cada caminho em um símbolo pode usar o mesmo conjunto de regras para definir o caminho e a direção de desenho específicos. Se estiver acompanhando a anotação, vá para line.3.horizontal para ver como isso funciona.

Posso anotar esse símbolo de vários jeitos, mas vou começar anotando cada linha para desenhar da esquerda para a direita, selecionando cada camada para anotá-lo.

Isso é ótimo, mas talvez eu queira que a linha do meio seja desenhada na direção oposta. Posso arrastar os pontos de guia de lugar existentes ao longo do caminho para movê-los. Você notará que, ao arrastar o ponto inicial em outro ponto de guia existente, a direção da seta gira, indicando que o caminho agora vai para a direção oposta. Isso é ótimo para símbolos que quero desenhar em uma única direção, mas alguns símbolos têm direcionalidade implícita a partir do centro. Podemos anotar esses símbolos para que sejam bidirecionais. wave.3.up é um ótimo caso de uso disso. Posso começar colocando o ponto inicial no centro do caminho e colocar pontos de guia adicionais em cada lado do ponto inicial. O sistema reconhece automaticamente o sentido bidirecional e indica isso com setas em cada lado do ponto inicial. Nesse caso, garanta que todos os pontos iniciais estejam alinhados em camadas para garantir um efeito simétrico. Para ajudar a conseguir isso, posso ativar o alinhamento.

Conforme anoto os próximos dois caminhos, note que meus pontos de guia se encaixam em ambos os vértices do caminho e nos pontos de guia em outras camadas.

Vou revisar minha animação para garantir que todos os caminhos estão sendo desenhados do centro para fora. Já anotamos alguns símbolos até agora, então vamos conferir mais opções de configuração para personalizar as animações de desenho de acordo com suas preferências. Por padrão, os caminhos são desenhados com um limite arredondado, mas você pode precisar de algo diferente. Neste exemplo, note que a animação é um pouco abrupta no final porque o limite arredondado não corresponde exatamente ao desenho, mas isso pode ser corrigido. Usando o menu de contexto nos pontos de início, podemos configurar limites finais adaptáveis, que usarão o estilo do limite final do caminho durante a animação. Vamos tentar novamente.

Muito melhor. Os caminhos são animados de acordo com o estilo desenhado. Importante: Os limites finais adaptáveis só estão disponíveis em símbolos que vão para uma direção única. Todos os símbolos que revisamos até agora são criados a partir de formas que foram desenhadas como um único subcaminho. No entanto, nem todos os símbolos são projetados dessa forma. Os símbolos criados por meio de vários subcaminhos podem ser anotados para desenho, mas têm mecânicas ligeiramente diferentes. Vamos anotar este círculo. Quando coloco meu primeiro ponto de guia, o sistema detecta que ele fica em dois subcaminhos e o trata como o ponto inicial e final, o que é indicado pela cápsula na borda inicial do ponto de guia. Por padrão, a animação gira no sentido horário.

Para desenhar o círculo no sentido anti-horário, posso alternar a direção no menu de contexto do ponto de guia e, se necessário, posso adicionar mais pontos de guia longo do caminho para criar formas mais complexas. Como você deve ter notado, esses tipos de desenhos aceitam apenas animação unidirecional e não podem ser anotados para desenhar bidirecionalmente. Para símbolos com componentes de desenho e que não são de desenho, os componentes que não são de desenho aparecerão por padrão. Para alguns casos, como setas, pode ser necessário fazer mais anotações para ter o resultado desejado. Vamos ver como anotá-los.

Naturalmente, o componente de linha do símbolo seria animado perfeitamente no sentido horário. Mas seria ainda melhor se a própria ponta da seta estivesse presa à linha durante o desenho. Ao arrastar a ponta da seta para um ponto de guia já posicionado, posso criar um anexo, um elemento que não é desenho associado a um ponto de guia.

O ponto de guia a ser anexado indica de onde o anexo aparecerá e começará a seguir o caminho. Depois de criar um anexo, você verá uma prévia do caminho anexado ao ponto de guia associado. Para removê-lo, basta arrastar o caminho para fora do ponto de guia e soltá-lo em qualquer outro lugar da tela. Importante: Para criar um anexo, a ponta da seta precisa ser desenhada como um caminho separado da base. Para aproveitar os anexos de desenho, talvez você precise analisar e modificar seus símbolos personalizados para separar elementos como pontas de seta. Nós anotamos diversos símbolos neste ponto, usando o posicionamento automático de pontos de guia. Nem todos os símbolos são tão simples, por isso incluímos opções avançadas para ajudar você a anotar esses caminhos mais complicados. Ao colocar pontos de guia, o sistema ajuda a decidir o posicionamento padrão de cada lado do ponto de guia. Em alguns casos, no entanto, o local padrão pode não ser o posicionamento ideal para o símbolo.

Nesses casos, mantenha pressionada a tecla Option e arraste um lado do ponto de guia para frente ou para trás no caminho, sem afetar o ponto associado. Para símbolos com muitos caminhos sobrepostos ou que estão diretamente uns sobre os outros, pode ser um desafio colocar o ponto de guia no subcaminho direito do nível da camada. Nessas situações, selecione o subcaminho na lista de camadas a qualquer momento de modo a forçar um ponto de guia específico nele. Ao apresentar o tópico de pontos de guia no início da sessão, mencionamos alguns tipos específicos: pontos iniciais e finais. Ao colocar pontos de guia, o sistema determina os tipos com base no posicionamento ao longo do caminho. Da mesma forma que o posicionamento, convém substituir o tipo padrão, o que pode ser feito por meio do menu de contexto em um ponto de guia. Aqui, você pode decidir se deseja que um ponto de guia seja padrão ou assuma o papel de um ponto final. Você pode colocar o ponto de guia como automático a qualquer momento para que o sistema faça o trabalho por você. Você deve ter notado um tipo de ponto de guia adicional nesta lista que ainda não abordamos: cantos. Para que um caminho seja desenhado com cantos acentuados, o sistema precisa lidar com esses casos de modo especial. Para isso, especifique pontos de guia como pontos de canto. Todos os outros tipos de ponto de guia funcionam associando dois pontos, um em cada lado do caminho a ser desenhado. A especificidade dos pontos de canto é que eles associam dois pontos no mesmo lado do caminho e são indicados por um diamante. Dependendo do design do símbolo, a anotação pode exigir um pouco de tentativa e erro. Se precisar recomeçar, basta usar a opção para redefinir o ponto de guia no menu de contexto em cada camada. Não há uma maneira correta de inserir pontos de guia. Teste diferentes posicionamentos para encontrar o que funciona melhor para o símbolo. Lembre-se de que os símbolos aceitam nove pesos diferentes e três escalas. Além disso, é importante garantir que o símbolo personalizado seja animado corretamente em todas as configurações. Não se preocupe, pois você só precisará anotar três deles. O sistema cuidará do resto. Ao anotar um símbolo personalizado, é importante começar anotando o peso normal. Isso serve como base da anotação, sendo o único peso onde você pode adicionar e remover pontos de guia.

O sistema fará a interpolação automática para colocar os pontos de guia nos outros dois pesos de modelo: ultraleve e preto.

Cada ponto de guia em ultraleve e em preto está associado ao respectivo ponto de guia de origem no peso normal.

Se eu mover o ponto de guia no peso normal, ele moverá também os pontos de guia associados em ultraleve e preto.

Como os símbolos podem interpolar pesos usando os modelos, os pontos de guia associados devem estar na mesma ordem entre os itens regulares, ultraleves e pretos. Vamos revisar o posicionamento atual dos nossos pontos de guia. Na maioria das vezes, eles estão em uma boa forma. Parece que há alguns pontos de guia fora do lugar no peso preto. Poderíamos facilmente corrigir esses pontos de guia, mas precisamos garantir que estejam na ordem correta. Para ajudar nisso, podemos ativar os números de ponto de guia, que exibe números únicos ao lado de cada ponto para indicar a ordem em que ele deve ocorrer com base na ordem associada no peso normal. Note que seis, sete e oito estão fora de ordem, o que posso consertar rapidamente arrastando-os para novos locais. Os pontos de guia substituídos são indicados em laranja e garantem que x os símbolos sejam desenhados corretamente em todas as configurações. Feito isso, anotamos completamente nossos símbolos para desenho. Com apenas alguns passos, você pode começar a animar seus próprios símbolos.

Agora que eles estão anotados, podemos decidir se gostaríamos que ativassem o desenho variável ou não.

Depois de ativar a opção de renderização variável no popover de ajustes, você pode ativar uma camada usando o botão de desenho variável na lista de camadas. Você pode ver uma prévia quando quiser com o controle deslizante de renderização variável que vimos anteriormente. Ao fazer essa seleção, é importante revisar cada camada cuidadosamente para determinar quais camadas devem participar. No exemplo do termômetro, ativamos apenas uma camada, o que permite que a parte do medidor transmita o progresso sem afetar as outras camadas do desenho. Isso é tudo sobre anotar símbolos personalizados para desenho. Agora que apresentamos todos os novos recursos do SF Symbol 7, vamos analisar as atualizações das APIs que aproveitam esses novos recursos no código. Para nossos novos pré-ajustes de animação, você pode aplicar desenho usando o modificador symbolEffect, seguindo o padrão existente para animações de símbolos. Na SwiftUI, quando o valor isHidden é atualizado, o desenho do símbolo é desativado e ativado novamente, aplicando a animação. No AppKit e UIKit, você pode especificar Draw On e Draw Off respectivamente para acionar cada animação. Como em outros efeitos de símbolo, para substituir o padrão Por Camada, defina o modo de reprodução desejado diretamente na linha.

Para aproveitar o desenho variável, especifique o modo de valor da variável nas seções relevantes. Não se esqueça de definir o valor da variável desejado ao configurar o símbolo. Por fim, para aproveitar a renderização de gradiente, defina o modo de renderização de cores como gradient usando o modificador de visualização da SwiftUI ou as opções de configuração de símbolo do UIKit e AppKit. Com apenas algumas adições simples ao código, você pode aproveitar todo o poder do SF Symbol 7. Você também pode usar o botão Copy Code no app SF Symbols, se necessário. Nós abordamos muita coisa hoje, então vamos as algumas próximas etapas para aproveitar ao máximo esses novos recursos.

Se ainda não fez isso, baixe a nova versão beta do SF Symbol 7 para conferir as atualizações da nossa biblioteca de símbolos, ver os gradientes e testar o Draw.

Revise seus desenhos personalizados para garantir que aproveitem todas as opções de anotação disponíveis. Consulte nossa documentação de frameworks para obter mais informações sobre como usar esses novos recursos diretamente no código. Essas são as novidades do SF Symbol 7. Mal podemos esperar para ver o que você fará com os novos recursos.