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.

Nota: Esta documentación está escrita en función de Flamingo y la versión 8.0 de Complemento de Android para Gradle. Los detalles pueden ser un poco diferentes en las versiones posteriores.

Nota: Suponemos que tienes una organización de Figma Professional o Figma licencia. Algunas de nuestras funciones usan el historial de versiones y las bibliotecas de equipo, que pueden no estar disponibles en la licencia de inicio.

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.

   

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.

   

   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.

   

4. Ahora haz clic en Run:

   Puedes ver el complemento que se ejecuta en el lienzo de 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:

Nota: Si es la primera vez que usas Android Studio y no instalaste un SDK de Android, o ves una pantalla de bienvenida para configurar un SDK de Android, sigue estos pasos para configurarlo.

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:

   

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()
    }
}

Nota: Usa la versión más reciente del complemento de Gradle para Relay para obtener acceso a todos los las funciones más recientes.

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.

   

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.

   

6. En Android Studio, desde el menú principal, selecciona Tools > Relay Settings.

   

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.

   

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

   

9. Haz clic en OK.

Cómo descargar y configurar el proyecto preconfigurado

Nota: Los pasos en esta sección son opcionales, pero muy recomendables si deseas revisar nuestros instructivos. Si quieres saber cómo crear manualmente un proyecto de Relay para Android Studio en lugar de usar el preconfigurado, consulta Configura tu proyecto de Android.

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.

Nota: Este proyecto preconfigurado requiere Android Studio Flamingo o una versión posterior. Complemento de Android para Gradle 8.0. También se asume que usas Compose Material. Si quieres para usar Compose Material 3, sigue las instrucciones que aparecen aquí para agregar las versiones dependencias a tu proyecto.

Ejecuta el proyecto preconfigurado

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

Próximo paso

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

Instructivo básico