Fluxo de trabalho do Android Studio

Importar um pacote de IU

Depois de criar um pacote de IU no Figma, você pode importá-lo para o projeto do Android Studio. Quando o projeto é criado, o Relay gera o código do Jetpack Compose.

Para importar um pacote de IU para um projeto do Android Studio:

1. Selecione File > New > Import UI Packages….

   

2. Digite o URL de um arquivo do Figma que contenha um pacote de IU.

   

3. Clique em Next.

4. Selecione os pacotes de IU que você quer importar. Os componentes exibidos dependem de você ter colado um componente, uma página ou um link de arquivo. Se um pacote de IU já estiver importado, ele vai ter o rótulo "UPDATED". Caso contrário, ele vai ser exibido como "NEW".

   

5. Clique em Finish para importar os pacotes selecionados e as dependências deles para a pasta ui-packages.

Tela de importação de pacotes de IU

A tela de importação inclui estas informações:

• Uma imagem de visualização do componente e das variantes dele.
• Um título e uma descrição.
• Uma lista de variantes e as respectivas propriedades.
• Uma lista dos parâmetros de conteúdo e os respectivos tipos.
• Uma lista de gerenciadores de interação e os respectivos tipos.

Janela de ferramentas UI Package

O plug-in do Android Studio adiciona uma janela de ferramentas chamada UI Package. Ela é aberta sempre que você seleciona um arquivo em uma pasta de pacote de IU (por exemplo, app/src/main/ui-packages/mycomponent/). A janela de ferramentas exibe um resumo do pacote de IU e o respectivo conteúdo.

Criar seu projeto do Android

Quando você cria um projeto do Android Studio com um pacote de IU, o plug-in Relay do Gradle gera um código do pacote de IU e o compila. Os recursos de fonte também são baixados e copiados em seu projeto.

Se quiser criar apenas os pacotes de IU importados, e não todo o projeto, realize as seguintes tarefas específicas do Gradle:

• generateDebugRelayCode ou generateReleaseRelayCode gera versões de depuração ou de lançamento de código derivadas do pacote de IU.
• generateRelayRuntimeCode cria a biblioteca de tempo de execução usada pelo código gerado.

Durante o processo de compilação:

1. O código é gerado no pacote de IU e armazenado em pastas separadas.
2. As imagens e fontes são copiadas em uma pasta de recursos gerada comum.

O local das pastas está documentado em Entender o pacote de interface e o código gerado.

Atualizar um pacote de IU

Quando uma nova versão de um design estiver pronta, o designer precisa criar uma nova versão nomeada do arquivo do Figma.

No Android Studio, verifique se a janela de ferramentas Project está na visualização do Android.

1. Na pasta ui-packages do módulo, clique com o botão direito do mouse na pasta dos pacotes de IU que você quer atualizar e selecione Update UI Package(s). No exemplo abaixo, selecionamos cinco pacotes de interface para atualizar.

   

2. Você também pode clicar com o botão direito do mouse na pasta ui-packages para atualizar todos os pacotes de IU.

   

Recomendados para você

• Observação: o texto do link aparece quando o JavaScript está desativado.
• Entender o pacote da IU e o código gerado
• Limitações e solução de problemas
• Como mapear componentes para códigos existentes