Instalar retransmisión

Relay consta de tres partes, cada una de las cuales debe instalarse por separado:

  1. Complemento Relay for Figma
  2. Complemento Relay for Android Studio
  3. Complemento de Gradle para Relay

Requisitos previos

  • Acceder a una cuenta de Figma
  • Tener instalado Android Studio 2022.2.1 Flamingo o una versión posterior
  • Tener instalado Java Runtime
  • Usas Jetpack Compose 1.2 o una versión posterior.
  • Usas la versión 8.0 o una posterior del complemento de Gradle.

Cómo instalar el complemento Relay for Figma

El complemento Relay for Figma permite que cualquier persona que trabaje en Figma anote sus diseños y lo comparta con los desarrolladores que usan Android Studio y Jetpack Compose.

El complemento Relay for Figma se publica en el mercado de complementos de la comunidad de Figma. Para instalar el complemento, haz lo siguiente:

  1. Ve a la página del complemento Relay for Figma en el sitio web de Figma.
  2. En la parte superior derecha de la página, haz clic en Try it out.

    Botón Try it out en la página del complemento de Figma
  3. Es posible que aparezca un cuadro de diálogo en el que se te pregunte si deseas usar el complemento. En el cuadro de diálogo, selecciona tu organización. En casos excepcionales, tu organización puede inhabilitar los complementos públicos. Si es así, selecciona la opción External teams.

    Opción External teams en el cuadro de diálogo

    Se abrirá un archivo de Figma donde se mostrará la página de información del complemento. Haz clic en ... y selecciona Save para asegurarte de que puedas volver a usar el complemento con facilidad.

    Opción Save en la página de información del complemento
  4. Ahora haz clic en Run:

    Puedes ver el complemento que se ejecuta en el lienzo de Figma:

    Relay for Figma

Cómo instalar el complemento Relay for Android Studio

El complemento Relay for Android Studio permite a los desarrolladores que trabajan en Android Studio importar diseños anotados con información de intents de diseño usando el complemento Relay for Figma. El complemento se publica en el mercado de complementos de Android Studio. Para instalarlo, haz lo siguiente:

  1. Abre Android Studio.
  2. En el menú principal, haz lo siguiente:
    • En macOS, selecciona Android Studio > Preferences.
    • En Windows y Linux, selecciona File > Settings.
  3. Selecciona Plugins.
  4. Selecciona la pestaña Marketplace, busca "Relay for Android Studio" y selecciona el complemento publicado por Google:

    Relay for Android Studio en Marketplace
  5. Haz clic en Install.

  6. Cuando finalice la instalación, haz clic en Restart IDE.

  7. Para confirmar que la instalación se realizó correctamente, abre Preferences o Settings y, luego, ve a Plugins. Deberías ver Relay for Android Studio en la sección Installed.

Cómo instalar el complemento de Gradle para Relay

El complemento de Gradle para Relay garantiza que los diseños en Figma anotados con información de intents de diseño que usan el complemento Relay for Figma se conviertan correctamente en código durante una compilación.

El complemento de Gradle para Relay se publica en Google Maven, un servidor que contiene muchos complementos de Gradle. Android Studio invoca las operaciones de Gradle de forma predeterminada, que incluyen la descarga y la instalación de dependencias a las que haga referencia tu proyecto.

Para asegurarte de que Android Studio, y por extensión Gradle, descargue e instale el complemento de Gradle para Relay, debes indicar que el complemento es una dependencia en tu proyecto, específicamente en el archivo build.gradle del directorio del módulo. Por lo general, está en app/build.gradle.

En la parte superior del archivo app/build.gradle, hay una sección que enumera todos los complementos en uso. Agrega el complemento de Gradle para Relay a esta lista, y Gradle se encargará de descargarlo e instalarlo. Por ejemplo:

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

Además, asegúrate de que tu archivo settings.gradle tenga la siguiente sección:

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

También puedes usar un proyecto preconfigurado, que incluya la configuración que se mencionaron anteriormente.

Cómo configurar el acceso a Figma

Relay requiere un token de acceso personal a Figma para poder descargar tus diseños de Figma y convertirlos en código. Si aún no tienes uno, haz lo siguiente:

  1. Abre Figma y accede a tu cuenta.
  2. Ve al navegador de archivos.
  3. Haz clic en tu ícono de cuenta y selecciona Settings.

    Menú Settings debajo del ícono de cuenta
  4. Desplázate hacia abajo hasta la sección Personal access tokens.

  5. Ingresa una descripción del token, por ejemplo "Relay", y escribe Return. Se generará un token. Haz clic en Copy this token.

    Sección Personal access tokens en la configuración
  6. En Android Studio, desde el menú principal, selecciona Tools > Relay Settings.

    Opción de menú Relay settings en Tools para configurar el token de acceso a Figma
  7. Si ya configuraste un token de acceso a Figma en macOS, es posible que veas el siguiente cuadro de diálogo. Este diálogo te permite saber que Android Studio está usando tu token de acceso a Figma existente. Ingresa tu contraseña y haz clic en Siempre Permitir.

    Cuadro de diálogo del sistema de acceso al llavero
  8. Pega el token de acceso a Figma en la entrada Figma Access Token (en caso de que esta no sea la primera vez que configuras un token de acceso a Figma, es posible que veas una entrada existente en Figma Access Token).

    Entrada Figma Access Token
  9. Haz clic en OK.

Cómo descargar y configurar el proyecto preconfigurado

Para descargar y configurar un proyecto preconfigurado, haz lo siguiente:

  1. Descarga el archivo ZIP del proyecto.
  2. Haz doble clic en el archivo para descomprimirlo, lo que creará una carpeta llamada HelloFigma. Muévela a tu carpeta principal.
  3. Vuelve a Android Studio. Ve a File > Open, navega a tu carpeta principal, selecciona HelloFigma y haz clic en Open.
  4. Cuando abras el proyecto, es posible que Android Studio te pregunte si confías en él. Haz clic en Trust Project.

Ejecuta el proyecto preconfigurado

Ejecuta la app en un emulador o dispositivo. Deberías ver el mensaje "Hello, Android!" en una pantalla en blanco.

El estado inicial en el emulador

Próximo paso

Ahora está todo listo para crear nuestros primeros diseños con Relay.

Instructivo básico