O que é relé?

O Relay é uma ferramenta que agiliza o processo de criação e implementação de componentes de interface do usuário do Android. Os designers podem usar o plug-in Relay for Figma para anotar e empacotar elementos da interface do usuário, incluindo informações sobre layout, estilo, conteúdo dinâmico e comportamento de interação. Esses pacotes podem ser importados para o Android Studio por desenvolvedores, que usam o plug-in Relay for Android Studio para gerar código Jetpack Compose com pixels perfeitos. Esse código é estilizado e organizado automaticamente de acordo com as especificações do designer, o que acelera o processo de vinculação de dados. Com o Relay, não há necessidade de especificações de projeto detalhadas ou comunicação entre designers e desenvolvedores. Além disso, à medida que o produto evolui, os pacotes de interface do usuário podem ser atualizados e estendidos de forma incremental em toda a base de código.

O Relay suporta alguns recursos do Figma, como nós de texto e imagem. No entanto, pode não suportar todos os recursos do Figma, portanto, esteja ciente disso e, para qualquer conteúdo não suportado, você pode acessá-lo através do sitehttps://developer.android.com/jetpack/compose/tooling/relay/limitations-and-troubleshooting

Vamos fazer um exemplo.

Baixar um arquivo Figma

Faça o download do HelloFigma.fig e abra-o.

Adicionar plug-in de retransmissão ao Figma

Ao abrir o Figma, você verá um projeto como este.

Criar pacote de IU

Selecione o projeto que você criou e marque-o como um componente, depois abra o plug-in Relay que adicionamos. Ele mostrará automaticamente o botão "Criar pacote de interface do usuário".

Depois de pressionar o botão "Criar pacote de interface do usuário", uma página como a seguinte será aberta. Também atualmente, não estaremos discutindo os parâmetros, mas tenho outra série de artigos onde gostaria de explicá-los.

Por enquanto, depois de inserir apenas a descrição, vamos clicar no botão “Arquivo” -> “Salvar no histórico de versões”.

Instale o Relay no Android Studio

Criamos nosso projeto, agora vamos abrir o Android Studio e adicionar o plug-in de retransmissão. Além disso, se nosso projeto for selecionado no sistema de design de materiais, não haverá problemas de construção. Baixe o plug-in Relay e reinicie o IDE.

Depois de reabrir o IDE, precisamos adicionar um recurso ao nosso arquivo build.gradle. Com esse recurso, poderemos obter as saídas de relé por meio da função composable.

Importar pasta Figma para AS

Indo em File-New-> Import UI Packages, podemos importar os designs que criamos no Figma para o Android Studio.

A janela aparecerá como tal.

Após clicar no botão correspondente, aparecerá uma tela como a abaixo. Nesta etapa, o Figma pode solicitar um token de acesso pessoal, caso sim, crie um PAT. Então, em vez da URL do projeto que vemos na tela, colamos o link que aparece quando compartilhamos o projeto no Figma.

Se tudo estiver no caminho certo, seremos recebidos por uma página como esta. Pressione o botão criar na janela relevante.

Depois disso, os arquivos gerados aparecerão nos arquivos do seu projeto. Se não abrir, clique com o botão direito do mouse no aplicativo na visualização do projeto e clique no botão recarregar do disco. Nosso design aparecerá como um UI Package, conforme mostrado na imagem. A partir de agora, precisamos da saída como uma composição, então pressionaremos o botão criar projeto. Dessa forma, os arquivos de design no arquivo gerado serão convertidos em uma única função que pode ser composta.

Resultados

Se tudo correr bem, a função que pode ser composta deve ser adicionada aos seus arquivos. Às vezes, as etapas de projeto limpo e projeto de reconstrução podem ser necessárias nessas etapas.

É assim que o arquivo kotlin se parece.

Conclusão

Alguns valores podem ser inseridos especificamente ou a estrutura pode parecer simples em geral, mas acredito que esse plug-in pode economizar uma quantidade significativa de tempo dos desenvolvedores.

Até mais..