Esta página foi traduzida pela API Cloud Translation.

Instalar o Relay

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

Plug-in Relay para Figma
Plug-in do Relay para o Android Studio
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.

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:

Acesse a página do plug-in do Relay para o Figma no site da Figma.
No canto superior direito da página, clique em Try it out.
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 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 Save para garantir que você possa reutilizar o plug-in facilmente.
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:

Abra o Android Studio.
No menu principal:
- No macOS, selecione Android Studio > Preferences.
- Para Windows e Linux, selecione File > Settings.
Selecione Plugins.
Selecione a guia "Marketplace", pesquise Relay for Android Studio e selecione o plug-in publicado pelo Google:
Clique em Install.
Quando a instalação estiver concluída, clique em Restart IDE.
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. Por exemplo:

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

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

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

Você também pode usar um projeto pré-configurado, que inclui a configuração indicada 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:

Abra o Figma e faça login.
Acesse o navegador de arquivos.
Clique no ícone da sua conta e selecione Settings.
Role para baixo até a seção Personal access tokens.
Insira uma descrição do token, por exemplo, "Relay" e digite Return. Um token é gerado. Clique em Copy this token.
No menu principal do Android Studio, selecione Tools > Relay Settings.
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 o token de acesso atual do Figma. Digite sua senha e clique em Sempre permitir.
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.
Clique em OK.

Fazer o download e configurar o projeto pré-configurado

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

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

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