Instalar o Relay

O Relay consiste em três partes. Cada uma delas precisa ser instalada separadamente:

1. Plug-in Relay para Figma
2. Plug-in do Relay para o Android Studio
3. Plug-in do Relay para o Gradle

Pré-requisitos

• É necessário fazer login em uma conta do Figma.
• Ter instalado o Android Studio 2022.2.1 Flamingo ou mais recente.
• Ter instalado o Java Runtime.
• Você está usando a versão 1.2 ou mais recente do Jetpack Compose.
• Você está usando o plug-in do Gradle versão 8.0 ou mais recente.

.

Observação: esta documentação foi escrita com base no Flamingo e na versão 8.0 do Plug-in do Android para Gradle. Os detalhes podem ser um pouco diferentes nas versões mais recentes.

Observação: presumimos que você tenha um profissional ou uma organização do Figma. licença. Alguns dos nossos recursos usam o histórico de versões e as bibliotecas de equipe, que podem não estar disponíveis na licença Starter.

Instalar o plug-in do Relay para o Figma

O plug-in do Relay para o Figma permite que qualquer pessoa que trabalhe no Figma anote os designs e os compartilhe com desenvolvedores que usam o Android Studio e o Jetpack Compose.

O plug-in Relay para Figma é publicado no mercado de plug-ins da comunidade do Figma. Para instalar o plug-in:

1. Acesse a página do plug-in do Relay para o Figma no site da Figma.

2. No canto superior direito da página, clique em Try it out.

   

3. Talvez você veja uma caixa de diálogo perguntando se quer usar o plug-in. Na caixa de diálogo, selecione sua organização. Em casos raros, sua organização pode e desativar plug-ins públicos. Se for o caso, selecione a opção External teams.

   

   Isso abre um arquivo do Figma com a página de informações do plug-in exibida. Clique em ... e selecione Salvar para reutilizar o plug-in com facilidade.

   

4. Clique em Run:

   Veja o plug-in em execução na tela do Figma:

   

Instalar o plug-in do Relay para o Android Studio

O plug-in do Relay para o Android Studio permite que os desenvolvedores que trabalham no Android Studio importem designs anotados com informações de intents de design usando o plug-in do Relay para o Figma. O plug-in é publicado no Android Studio Plug-in Marketplace. Para instalar:

Observação: se esta é a primeira vez que você usa o Android Studio e você não instalou um SDK do Android ou se há uma tela de boas-vindas pedindo para configurar um SDK do Android, siga estas etapas de configuração.

1. Abra o Android Studio.
2. No menu principal:
   • No macOS, selecione Android Studio > Preferences.
   • Para Windows e Linux, selecione File > Settings.
3. Selecione Plugins.

4. Selecione a guia "Marketplace", pesquise Relay for Android Studio e selecione o plug-in publicado pelo Google:

   

5. Clique em Install.

6. Quando a instalação estiver concluída, clique em Restart IDE.

7. Para confirmar que a instalação terminou, abra Preferences ou Settings e acesse Plugins. Você vai ver a mensagem Relay for Android Studio listada na seção "Installed".

Instalar o plug-in do Relay para o Gradle

O plug-in do Relay para o Gradle garante que os designs no Figma anotados com informações de intent de design usando o plug-in do Relay para o Figma sejam convertidos corretamente em código durante uma compilação.

O plug-in do Relay para o Gradle é publicado no Google Maven, um servidor que contém muitos plug-ins do Gradle. O Android Studio invoca as operações do Gradle por padrão, e essas operações incluem o download e a instalação de qualquer dependência à qual o projeto faça referência.

Para garantir que o Android Studio e, por extensão, o próprio Gradle, faça o download e instale o plug-in do Relay para o Gradle, é necessário especificar o plug-in como uma dependência no projeto, especificamente no arquivo build.gradle no diretório do módulo. Normalmente, ele fica em app/build.gradle.

Na parte superior do arquivo app/build.gradle, há uma seção listando todos os plug-ins em uso. Adicione o plug-in do Relay do Gradle a essa lista, e o Gradle vai processar o download e a instalação dele. Exemplo:

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.relay' version '0.3.12'
}

Além disso, verifique se o arquivo settings.gradle tem a seguinte seção:

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}

Observação: use a versão mais recente do plug-in do Relay para o Gradle para ter acesso a todos os os recursos mais recentes.

Você também pode usar um projeto pré-configurado, que inclui a configuração comentado acima.

Configurar o acesso do Figma

O Relay requer um token de acesso pessoal do Figma para poder fazer o download e converter seus designs do Figma em código. Se você ainda não tiver um:

1. Abra o Figma e faça login.
2. Acesse o navegador de arquivos.

3. Clique no ícone da sua conta e selecione Settings.

   

4. Role para baixo até a seção Personal access tokens.

5. Insira uma descrição do token, por exemplo, "Relay" e digite Return. Um token é gerado. Clique em Copy this token.

   

6. No menu principal do Android Studio, selecione Tools > Relay Settings.

   

7. Se você já tiver configurado um token de acesso do Figma no macOS, talvez a caixa de diálogo a seguir seja exibida. Essa caixa de diálogo informa que o Android Studio está usando seu token de acesso atual do Figma. Insira sua senha e clique em Sempre Permitir.

   

8. Cole seu token de acesso do Figma na entrada Figma Access Token. Se esta não for sua primeira configuração de token de acesso do Figma, talvez você veja uma entrada Existing Figma Access Token.

   

9. Clique em OK.

Fazer o download e configurar o projeto pré-configurado

Observação: as etapas nesta seção são opcionais, mas altamente recomendadas caso você queira conferir nossos tutoriais. Se você quiser saber como criar manualmente um projeto do Relay para o Android Studio em vez de usar o projeto pré-configurado, consulte Configuração do projeto do Android.

Para fazer o download de um projeto pré-configurado e configurá-lo:

1. Faça o download do arquivo ZIP do projeto.
2. Clique duas vezes para descompactar o arquivo, o que cria uma pasta chamada HelloFigma. Mova-a para a pasta inicial.
3. Volte para o Android Studio. Acesse File > Open, navegue até a pasta inicial, selecione HelloFigma e clique em Open.
4. Ao abrir o projeto, o Android Studio pode perguntar se você confia nele. Clique em Trust Project.

.

Observação: este projeto pré-configurado exige o Android Studio Flamingo ou mais recente e Plug-in do Android para Gradle 8.0. Ele também pressupõe o uso do Compose Material. Se você quiser para usar o Compose Material 3, siga estas instruções para adicionar as dependências ao seu projeto.

Como executar o projeto pré-configurado

Execute o app em um emulador ou dispositivo. Você vai ver a mensagem "Hello, Android!" em uma tela em branco.

Próxima etapa

Agora estamos prontos para criar nossos primeiros designs usando o Relay.

Tutorial básico