Limitações e solução de problemas

Limitações do Figma e da translação

Tipos de camadas do Figma com suporte

O Relay oferece suporte apenas aos tipos de camada abaixo:

  • Nós de texto
  • Nós de imagem (PNG, JPEG etc.)
  • Nós de frame (layout automático e não automático)
  • Componentes e variantes, instâncias de componente
  • Nós vetoriais

Camadas e recursos do Figma sem suporte

  • Recursos de prototipagem
  • Grupos de mascaramento
  • Camadas do Slice

Propriedades do Figma sem suporte

Há várias propriedades sem suporte, incluindo:

  • Sombra interna, desfoque de camada e desfoque de segundo plano
  • Rotação da camada (a rotação vetorial é permitida)
  • Modos de combinação de camada ou de traço (o modo de combinação de preenchimento é permitido)
  • Propriedades do texto:
    • Espaçamento entre parágrafos
    • Recuo do parágrafo
    • Estilo do número
    • Letras
    • Conjuntos de estilo
    • Tachado e sublinhado
    • Altura da linha (ainda funciona quando aplicada ao elemento de texto inteiro)
  • Propriedades de vetor:
    • Recursos sem suporte com o formato VectorDrawable do Android:
      • Imagens de bitmap incorporadas
        • Exceto para retângulos, que são aceitos como imagens em vez de vetores
      • Tracejados
      • Desfoque
      • Sombra
      • Padrão
      • Máscara
      • Opacidade do grupo
      • Ponto focal do gradiente radial
    • Recursos sem suporte do importador de SVG:
      • Gradientes angulares
      • Gradientes de diamante
    • Operações booleanas entre objetos vetoriais (união / subtração / interseção / exclusão)
      • Uma solução alternativa para essas operações é fazer a combinação e nivelar um único vetor

Camadas e propriedades do Figma com suporte parcial

  • O truncamento do texto (reticências) funciona de maneira mais confiável quando o item de texto tem apenas uma linha
  • Cor de preenchimento:
    • As imagens só podem ter um preenchimento de imagem, mas podem ter outros preenchimentos de outros tipos, como gradientes.
    • Há suporte apenas para o gradiente linear. As versões futuras vão oferecer suporte adicional aos tipos de gradiente restantes: radial, diamante e angular.
    • No plug-in do Figma, não há como especificar que um parâmetro pode aceitar vários preenchimentos. Se você quiser parametrizar uma cor de preenchimento, atualmente, os parâmetros oferecem suporte apenas a cores sólidas.
  • Sombras projetadas:
    • No momento, as sombras projetadas não funcionam nas seguintes camadas:
      • Vetores não retangulares
      • Vetor retangular girado
    • Não é possível usar várias sombras projetadas por camada
    • Os modos de combinação de sombra projetada que não sejam "Normal" estão disponíveis apenas na versão 10 ou mais recente do Android (caso contrário, são ignorados).
    • As sombras projetadas em camadas só estão disponíveis no Android 9 ou versões mais recentes, exceto texto, que está disponível em todas as versões do Android compatíveis com o Compose.
    • As sombras sempre aparecem atrás das camadas transparentes no Compose.
  • Posicionamento absoluto no layout automático:
    • Objetos posicionados de maneira absoluta precisam estar atrás ou na frente de todos os elementos de layout automático no frame. Todos os objetos posicionados de maneira absoluta em camadas entre objetos de layout automático serão movidos para a frente desses objetos.
    • Aninhar frames de layout automático junto com objetos posicionados de maneira absoluta dentro de outros frames de layout automático pode resultar em erros de layout, já que a caixa delimitadora do frame aninhado é afetada pelos itens posicionados naquele frame.

Vários estilos vão ser descartados se forem transmitidos para o parâmetro de texto com um estilo

Se um componente pai tentar transmitir texto com vários estilos a um parâmetro de texto de componente aninhado com apenas um estilo, os vários estilos vão ser perdidos no código do Compose gerado. Apenas o estilo original do parâmetro de texto é mantido.

Essa degradação é necessária para evitar incompatibilidades de tipo que impedem a compilação do código gerado. Se o texto em um componente tiver vários estilos, o elemento combinável gerado vai ter um parâmetro AnnotatedText. Se o texto em um componente tiver apenas um estilo, o elemento combinável gerado vai ter um parâmetro String simples. No cenário acima, precisamos converter o rich text do componente pai de AnnotatedText em String, descartando os vários estilos, para que ele possa ser transmitido para a instância do componente aninhado.

Os componentes aninhados com as mesmas propriedades de variante que o componente pai falham durante a compilação

Se dois componentes tiverem uma [variante de design]{:.external} com o mesmo nome de propriedade, e um deles aninhar o outro, no código gerado, as enumerações criadas para as duas variantes vão ter o mesmo nome, e vai ocorrer um erro de compilação:

Conflicting import, imported name '(variant property)' is ambiguous

Para contornar esse problema, mude o nome da propriedade da variante de um dos componentes.

Suporte a fontes

No momento, só aceitamos fontes do Google Fonts.

Solução de problemas do Android Studio

Recebi um erro sobre a conversão de recursos SVG no Windows

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > Converting SVG files: Exception Converting SVG resources for my_packaged_component
        The syntax of the command is incorrect

O nome do projeto do Android Studio pode ser muito longo. No Windows, o caminho completo o projeto do Android Studio não pode ter mais de 70 caracteres. Estamos trabalhando para aumentar esse tamanho em uma versão futura.

As atualizações não são importadas para o Android Studio

O plug-in só vai extrair a versão nomeada mais recente do arquivo do Figma. Verifique se você criou uma nova versão nomeada do arquivo do Figma com as mudanças.

Recebo uma mensagem de erro sobre SVG e Java Runtime durante o build

Converting SVG Files: Exception running shell command 'cd /path-to/relay/bin; path/to/relay/bin/vd-tool -c -in path/to/hello_card -out /var/folders/...'.
The operation couldn't be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

Instale o Java Runtime e crie novamente.

Recebo um erro de fonte durante o build

Pode ocorrer um erro semelhante a este:

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> Multiple task action failures occurred:
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf

Isso é causado por uma disputa: vários componentes tentam copiar a mesma fonte para o mesmo diretório. Estamos trabalhando para corrigir esse problema. Enquanto isso, só tente criar novamente.

No Android Studio, a ação de desfazer uma pasta de pacote de IU excluída pode falhar

Se você excluir uma pasta de pacote de IU na pasta ui-packages no Android Studio e desfizer a exclusão, qualquer arquivo nessa pasta que não tenha sido aberto antes da exclusão talvez não seja restaurado corretamente.

Alternativa: importe novamente a versão do arquivo do Figma que você precisa usando File > New > Import UI Packages…. Também é possível clicar em cada arquivo na pasta do pacote de IU após a importação para garantir que eles sejam restaurados corretamente.

A atualização de recursos fora de ui-packages não força um novo build

A atualização de uma dependência localizada fora do diretório ui-packages (como um arquivo de mapeamento de tema ou arquivo de componente de referência) não força o código a ser gerado novamente quando o projeto é criado.

Alternativa: para forçar uma atualização do código gerado, limpe o projeto (acesse Build > Clean Project) ou exclua a pasta do código gerado associada ao pacote de IU que precisa ser atualizado. Depois, crie novamente.

O código gerado ou ui-packages pastas não foram encontrados no navegador do projeto Android

Em alguns casos, as pastas geradas pelo plug-in do Relay para o Android Studio não aparecem no navegador do projeto Android.

Alternativa: para recarregar pastas do projeto, clique com o botão direito do mouse em uma pasta de nível superior e selecione "Atualizar do disco".

Os temas de apps para componentes filhos não são atualizados

Quando um componente pai é reimportado com um novo tema de app, os componentes filhos (listados em DEPS.txt) não coletam o novo tema.

Alternativa: copie o tema de visualização do arquivo config.json e substitua os componentes filhos visualizar temas com ele em cada em config.json. Após a recriação, os temas do pacote o código gerado será corrigido.

O nome do pacote de IU precisa começar com uma letra

Se o nome de um pacote de IU não começar com uma letra, o Relay vai gerar um código do Compose que não vai ser compilado, com uma mensagem de erro que diz The resource name must start with a letter.

Alternativa: no Figma, renomeie o pacote de IU para que comece com uma letra.

O padding da fonte no Compose não corresponde ao Figma

O Figma e o Compose exibem o texto na caixa delimitadora de maneira diferente. O Compose adiciona mais padding ao longo da parte superior da caixa delimitadora.

Alternativa: você precisa mover o local do texto no Figma alguns pixels para cima para que ele seja alinhado corretamente no Compose. Estamos trabalhando em uma correção permanente.