Fazer e propagar atualizações de design

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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:

1. 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.

1. Abra o plug-in do Figma Relay, se ele ainda não estiver aberto.

2. Clique em Compartilhar com o desenvolvedor.

   

3. 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.

   

4. 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:

1. 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:

   

2. 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.

   

   

3. 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.