Relay consta de tres partes, cada una de las cuales debe instalarse por separado:
- Complemento Relay for Figma
- Complemento Relay for Android Studio
- 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:
- Ve a la página del complemento Relay for Figma en el sitio web de Figma.
En la parte superior derecha de la página, haz clic en Try it out.
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.
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:
- Abre Android Studio.
- En el menú principal, haz lo siguiente:
- En macOS, selecciona Android Studio > Preferences.
- En Windows y Linux, selecciona File > Settings.
- Selecciona Plugins.
Selecciona la pestaña Marketplace, busca "Relay for Android Studio" y selecciona el complemento publicado por Google:
Haz clic en Install.
Cuando finalice la instalación, haz clic en Restart IDE.
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:
- Abre Figma y accede a tu cuenta.
- Ve al navegador de archivos.
Haz clic en tu ícono de cuenta y selecciona Settings.
Desplázate hacia abajo hasta la sección Personal access tokens.
Ingresa una descripción del token, por ejemplo "Relay", y escribe Return. Se generará un token. Haz clic en Copy this token.
En Android Studio, desde el menú principal, selecciona Tools > Relay Settings.
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.
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).
Haz clic en OK.
Cómo descargar y configurar el proyecto preconfigurado
Para descargar y configurar un proyecto preconfigurado, haz lo siguiente:
- Descarga el archivo ZIP del proyecto.
- Haz doble clic en el archivo para descomprimirlo, lo que creará una carpeta llamada HelloFigma. Muévela a tu carpeta principal.
- Vuelve a Android Studio. Ve a File > Open, navega a tu carpeta principal, selecciona HelloFigma y haz clic en Open.
- 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.
Próximo paso
Ahora está todo listo para crear nuestros primeros diseños con Relay.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Configura tu proyecto de Android
- Cómo probar tu diseño de Compose
- Dónde elevar el estado