Nesta seção, você vai aprender a mudar um componente no Figma (neste caso, mudar a formatação do texto) e ver as mudanças propagadas para a base de código no Android Studio, com base no projeto anterior.
Mudanças no Figma
Vamos atualizar o componente do Figma. De volta ao arquivo do Figma:
Selecione a camada de texto Title. Na seção Texto, mude o estilo para Negrito.
Salvar versão nomeada
Agora, integre o componente atualizado à sua base de código. Para garantir que os desenvolvedores usem a nova versão do componente, repita as etapas para salvar uma versão.
Abra o plug-in do Figma Relay, se ele ainda não estiver aberto.
Clique em Compartilhar com o desenvolvedor.
Na tela Compartilhar com o desenvolvedor, é possível inserir o nome e a descrição da nova versão na seção Salvar histórico de versões.
Digite CMD-L em um Mac ou CTRL-L no Windows no teclado para copiar o novo link para a área de transferência.
Atualizar o código do componente
Agora vamos importar o componente novamente:
No Android Studio, verifique se a janela de ferramentas do Project está na visualização Android. Em seguida, clique com o botão direito do mouse em
app/ui-packages/hello_card/
e selecione Update UI Package.Aguarde a barra de carregamento no canto inferior direito terminar:
Clique em para criar seu projeto e ver o componente atualizado na visualização de
app/java/com/example/hellofigma/MainActivity.kt
. O texto agora está em negrito.Execute o app para ver as mesmas atualizações no emulador.
Próxima etapa
Agora que atualizamos um design e vimos como o código resultante também é atualizado, podemos voltar nossa atenção para a anotação do design com parâmetros de conteúdo que permitam dados variáveis nos componentes.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Parâmetros de conteúdo
- Converter os designs em código no Android Studio