SF Symbols personalizados: o template variável e os três desenhos de origem obrigatórios

A Apple oferece mais de 6.900 SF Symbols, e o app SF Symbols é gratuito. Mesmo assim, quase todo app acaba precisando de um ícone que a Apple não tem: uma marca, um glifo específico do domínio, uma ação personalizada que não cabe no vocabulário do sistema. O caminho certo é criar um SF Symbol personalizado em vez de inserir um SVG estático, porque SF Symbols personalizados herdam de graça a mecânica do sistema: eles acompanham o Dynamic Type, participam das animações de Symbol Effects, são renderizados nos quatro modos de renderização, alinham-se à tipografia SF Pro e respeitam as configurações de acessibilidade sem código específico no app. SVGs estáticos não participam de nada disso.

Este post percorre o fluxo de trabalho usando o template variável do app SF Symbols, apresentado no SF Symbols 3 na WWDC 2021¹. O recorte é “quais são os três desenhos de origem obrigatórios e por quê”, porque o formato do template é a parte crítica do fluxo que muitos designers e engenheiros deixam passar na primeira vez. As versões seguintes do SF Symbols (4, 5, 6, 7) ampliaram o formato do template com cor variável, transições magic replace, suporte a gradientes e efeitos de animação, mas a estrutura central de três desenhos de origem do template variável permanece estável desde o SF Symbols 3.

Resumo rápido

• SF Symbols personalizados começam com um template exportado do app SF Symbols (File > Export Template, ou ⌘E)². O template é um SVG com guias de tamanho definidas pelo sistema e um desenho de símbolo placeholder para substituir.
• O template variável exige apenas três desenhos de origem: Ultralight-Small, Regular-Small e Black-Small. O app SF Symbols interpola automaticamente as outras 24 variações (3 escalas × 9 pesos)³.
• A compatibilidade dos caminhos é o requisito crítico: todos os caminhos precisam ter o mesmo número de pontos de ancoragem, o mesmo ponto inicial e a mesma direção nas três origens. Sem isso, a interpolação gera glifos deformados.
• Símbolos personalizados aceitam os quatro modos de renderização (monochrome, hierarchical, palette, multicolor) e a estrutura de camadas (primary, secondary, tertiary). O painel do inspetor de renderização do Symbol Editor atribui subcaminhos às camadas.
• Entrega final: adicione o arquivo do símbolo ao Xcode como um Symbol Image Set no catálogo de assets. O SwiftUI referencia o símbolo com Image(_:) usando o nome dele; o sistema cuida do resto.

O template variável

O SF Symbols 3 (WWDC 2021) apresentou o template variável³, um único arquivo SVG que captura três desenhos de origem e a partir do qual o app SF Symbols gera a grade completa de 27 variações. As três origens são:

• Ultralight-Small. O peso mais leve, na menor escala.
• Regular-Small. O peso intermediário, na menor escala.
• Black-Small. O peso mais pesado, na menor escala.

O app usa essas três versões para interpolar as outras 24 células (Ultralight-Medium, Regular-Medium, Black-Medium, Ultralight-Large, Regular-Large, Black-Large, além dos pesos intermediários em cada escala). A interpolação é automática, desde que os caminhos de origem tenham estrutura compatível.

Antes de o SF Symbols 3 introduzir o template variável, os símbolos personalizados exigiam que todas as 27 variações fossem desenhadas manualmente. O template variável reduziu isso para 3 + interpolação, a diferença entre um esforço de design administrável e um projeto inviável.

O requisito de dados compatíveis

A interpolação de caminhos exige que os três caminhos de origem descrevam a mesma forma na mesma ordem²:

• Mesmo número de pontos de ancoragem. Um quadrado no peso Regular com 4 âncoras precisa ter 4 âncoras em Ultralight e em Black, mesmo que a curvatura visível seja diferente.
• Mesmo ponto inicial. A primeira âncora do caminho precisa estar na mesma posição conceitual (por exemplo, sempre o canto superior esquerdo) nos três pesos.
• Mesma direção. Os três caminhos percorrem a forma na mesma ordem (sentido horário ou anti-horário).

Qualquer falha aqui gera artefatos de interpolação: dobras, sobreposições erradas, traços ausentes. O app SF Symbols expõe alguns desses problemas (a prévia de variantes mostra o resultado da interpolação), mas questões sutis só aparecem no asset exportado final.

O fluxo pragmático é desenhar primeiro o Regular-Small e depois derivar o Ultralight reduzindo a largura do traço e o Black aumentando a largura do traço sobre o mesmo esqueleto de caminho. Cada derivação preserva, por construção, a contagem de âncoras, o ponto inicial e a direção. Desenhar cada peso de forma independente cria problemas de compatibilidade que levam mais tempo para depurar do que refazer a construção.

O fluxo de trabalho

Cinco etapas do conceito ao asset funcionando:

1. Encontre um símbolo existente parecido

A biblioteca do app SF Symbols tem mais de 6.900 símbolos. Encontre um que seja estruturalmente parecido com o seu conceito (um círculo com conteúdo, um quadrado com sobreposição, uma linha com decoração). O caminho de exportação do template usa a geometria de um símbolo existente como ponto de partida.

2. Exporte o template

File > Export Template… ou ⌘E. Escolha “Variable” como tipo de template. O resultado é um arquivo SVG com os três pesos de origem do símbolo organizados, além de uma geometria de referência que mostra a altura das maiúsculas, a linha de base e as margens visuais que o SF Symbols usa para se alinhar ao texto em SF Pro.

3. Substitua os caminhos do template

Abra o SVG em um editor vetorial (Sketch, Figma, Illustrator, Affinity Designer, Inkscape). As camadas nomeadas do template contêm os três desenhos de origem. Substitua cada um pelo seu desenho personalizado, preservando os nomes das camadas e o alinhamento com a altura das maiúsculas e a linha de base.

O requisito de compatibilidade de caminhos importa aqui: desenhe cada peso a partir do mesmo esqueleto de caminho, variando a largura do traço ou o peso do preenchimento em vez de redesenhar. O fluxo de “duplicar e modificar” das ferramentas vetoriais é o caminho de menor resistência.

4. Reimporte e verifique

Arraste o SVG modificado de volta para o app SF Symbols. O app gera as 27 variações e as mostra na grade de variantes. Inspecione cada combinação de peso e escala em vários níveis de zoom; artefatos de interpolação costumam aparecer em pesos intermediários que não saltam aos olhos de imediato.

Para símbolos com vários elementos visuais (um corpo com um badge, um círculo com uma forma interna), abra o painel do inspetor de renderização e atribua subcaminhos a camadas (primary, secondary, tertiary). Essas atribuições definem como o símbolo é renderizado nos modos hierarchical, palette e multicolor.

5. Adicione ao Xcode

Arraste o arquivo do símbolo (.svg exportado do SF Symbols) para o catálogo de assets do Xcode. O Xcode o trata como um Symbol Image Set. Referencie-o no código:

Image("MyCustomSymbol")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.tint)

Image(_:) (sem o parâmetro systemName:) carrega o símbolo a partir do catálogo de assets. Os mesmos comportamentos de .symbolRenderingMode, .foregroundStyle, .symbolEffect e Dynamic Type que funcionam em símbolos do sistema também funcionam em símbolos personalizados, desde que o símbolo tenha sido criado corretamente.

Modos de renderização e estrutura de camadas

Os quatro modos de renderização expostos pelo SF Symbols funcionam em símbolos personalizados da mesma forma que nos símbolos do sistema⁴:

• Monochrome. Uma única cor (foregroundStyle). É o modo mais simples e o mais comum.
• Hierarchical. Uma única cor, com opacidade variando por camada. As camadas definidas no painel do inspetor de renderização recebem opacidades predefinidas; o desenvolvedor aplica uma única tonalidade e ganha hierarquia visual automaticamente.
• Palette. Cor explícita por camada. O desenvolvedor passa vários argumentos de foregroundStyle; cada camada recebe o seu.
• Multicolor. Cores fixas definidas pela Apple por camada. Em símbolos personalizados, as cores são as que o designer atribui na configuração Multicolor do Symbol Editor.

A estrutura de camadas é o que faz hierarchical, palette e multicolor funcionarem. Um símbolo personalizado sem atribuições de camada agrupa todos os caminhos na camada primary; ele ainda renderiza em monochrome, mas não produz hierarquia visual nos outros modos. Reserve alguns minutos para atribuir camadas no painel do inspetor de renderização em qualquer símbolo que se beneficie de profundidade.

Falhas comuns

Três padrões vistos em registros de falha de símbolos personalizados:

Violações de compatibilidade de caminhos. É o problema mais comum. Um símbolo que “parece bom no peso Regular”, mas gera pesos intermediários com falhas visuais, quase sempre tem um problema de compatibilidade de caminhos. Diagnóstico: abra a grade de variantes do app SF Symbols e observe as variantes de peso médio; se elas mostram dobras ou traços que não correspondem à interpolação esperada, um dos três caminhos de origem viola a compatibilidade.

Linha de base ou altura das maiúsculas desalinhada. Símbolos desenhados sem respeitar a guia de linha de base do template ficam estranhos ao lado do texto. O sintoma visual: o símbolo parece alto ou baixo demais quando colocado em linha com um Text estilizado como .body. Correção: use a geometria de referência do template; posicione o centro óptico do símbolo no ponto médio da altura das maiúsculas.

Sem atribuições de camada. Um símbolo com estrutura interna rica (vários elementos visuais), mas sem atribuições de camada, renderiza corretamente apenas em monochrome. Apps que escolhem o modo hierarchical ou palette recebem uma saída plana. Correção: abra o painel do inspetor de renderização e atribua cada subcaminho a uma camada (primary para a forma principal, secondary para acentos, tertiary para detalhes terciários).

O que esse padrão significa para apps iOS 26+

Três conclusões.

1. Use SF Symbols personalizados, não SVGs brutos, para ícones dentro do app. O fluxo de símbolos personalizados dá trabalho de engenharia de verdade, mas a integração com o sistema (Dynamic Type, Symbol Effects, modos de renderização, acessibilidade) faz o custo valer a pena para qualquer ícone que vai viver na UI por muito tempo. SVGs estáticos fazem sentido para assets pontuais de marketing, não para a UI central.

2. Projete a partir de um único esqueleto; varie o peso do traço, não a estrutura do caminho. Violações de compatibilidade de caminhos são o modo de falha crítico. O processo defensivo de design é começar com um peso (Regular-Small), derivar o Ultralight reduzindo o traço e o Black aumentando o traço a partir da mesma geometria de caminho. Assim, a compatibilidade se mantém por construção.

3. Atribua camadas explicitamente a qualquer símbolo que se beneficie dos modos de renderização. Um símbolo que renderiza apenas em monochrome está abrindo mão de metade do sistema SF Symbols. O painel do inspetor de renderização leva minutos; o resultado são símbolos que participam dos modos hierarchical, palette e multicolor ao lado dos símbolos do sistema.

O conjunto completo sobre o ecossistema Apple: App Intents tipados; servidores MCP; a questão de roteamento; Foundation Models; a distinção entre ambiente de execução e ferramentas LLM; três superfícies; o padrão de fonte única da verdade; dois servidores MCP; hooks para desenvolvimento Apple; Live Activities; o ambiente de execução do watchOS; componentes internos do SwiftUI; modelo mental espacial do RealityKit; disciplina de schema no SwiftData; padrões de Liquid Glass; envio multiplataforma; a matriz de plataformas; Vision framework; Symbol Effects; inferência com Core ML; API do Writing Tools; Swift Testing; Privacy Manifest; acessibilidade como plataforma; tipografia SF Pro; padrões espaciais do visionOS; Speech framework; migrações do SwiftData; mecanismo de foco do tvOS; componentes internos de @Observable; protocolo Layout do SwiftUI; o que eu me recuso a escrever. O hub está na série sobre o ecossistema Apple. Para um contexto mais amplo sobre iOS com agentes de IA, veja o guia de desenvolvimento de agentes para iOS.

FAQ

Preciso do app SF Symbols ou posso criar símbolos personalizados de outra forma?

O app SF Symbols é a ferramenta oficial e a única que produz símbolos personalizados validados e compatíveis com a App Store. Existem ferramentas de terceiros e conversores online, mas eles geram SVGs que podem ou não atender aos requisitos do formato do template. Para apps de produção, use o app SF Symbols.

Posso criar símbolos personalizados no Windows?

O app SF Symbols existe apenas para macOS. Você pode editar o template SVG exportado em qualquer plataforma com um editor vetorial, mas as etapas de exportação e reimportação exigem macOS. A maioria das equipes tem pelo menos um designer no macOS para cuidar dessas etapas; em equipes remotas, o arquivo SVG circula por controle de versão ou armazenamento compartilhado.

Como dou suporte a .symbolEffect em um símbolo personalizado?

A maioria dos efeitos de símbolo funciona automaticamente se a estrutura do símbolo estiver bem formada: bounce, pulse, scale e os demais se aplicam ao símbolo independentemente da origem. A transição de conteúdo .replace exige que o símbolo de origem e o símbolo de destino tenham estruturas compatíveis (contagens de camada parecidas, forma geral parecida). O post sobre Symbol Effects deste conjunto cobre o vocabulário de efeitos em detalhes.

Qual é a diferença entre um Symbol Image Set e um Image Set comum no Xcode?

Um Symbol Image Set importa o template completo do símbolo (todas as 27 variações) e o expõe pelo pipeline de renderização do SF Symbols. O símbolo escala com Dynamic Type, participa dos modos de renderização e funciona com .symbolEffect. Um Image Set comum é um recurso estático raster ou SVG que não participa de nada disso. Use Symbol Image Set para SF Symbols personalizados.

Como símbolos personalizados lidam com visionOS e watchOS?

Do mesmo jeito que os símbolos do sistema: eles são renderizados nos tamanhos esperados da plataforma (pequeno no watchOS, grande no visionOS), participam dos recursos de acessibilidade da plataforma e respeitam as convenções de cor e efeito da plataforma. A criação do símbolo personalizado é feita uma única vez; o comportamento multiplataforma é automático. Os posts matriz de plataformas Apple e padrões espaciais do visionOS deste conjunto cobrem as considerações por plataforma.

Qual é o impacto na revisão da App Store?

Nenhum. SF Symbols personalizados são revisados da mesma forma que outros assets do Asset Catalog. As diretrizes de estilo visual (não imitar padrões de UI da Apple, não violar marcas registradas) se aplicam a símbolos personalizados como se aplicam a qualquer arte personalizada; fora isso, o processo de revisão os trata como assets de imagem padrão.

Referências