Relay se compose de trois parties, chacune devant être installée séparément :
- Plug-in Relay for Figma
- Plug-in Relay for Android Studio
- Plug-in Relay Gradle
Conditions préalables
- Vous devez être connecté à un compte Figma.
- Vous avez installé Android Studio 2022.2.1 Flamingo ou une version ultérieure.
- Vous avez installé l'environnement d'exécution Java.
- Vous utilisez Jetpack Compose version 1.2 ou ultérieure.
- Vous utilisez le plug-in Gradle 8.0 ou version ultérieure.
Installer le plug-in Relay for Figma
Le plug-in Relay for Figma permet à tous les utilisateurs de Figma d'annoter leurs conceptions et de les partager avec les développeurs qui utilisent Android Studio et Jetpack Compose.
Le plug-in Relay for Figma est publié sur la place de marché de plug-ins de la communauté Figma. Pour installer le plug-in :
- Accédez à la page du plug-in Relay for Figma sur le site Web de Figma.
En haut à droite de la page, cliquez sur Try it out (Essayer).
Une boîte de dialogue vous demandant si vous souhaitez utiliser le plug-in peut s'afficher. Dans la boîte de dialogue, sélectionnez votre organisation. Dans de rares cas, votre organisation peut désactiver les plug-ins publics. Si tel est le cas, sélectionnez l'option External teams (Équipes externes).
Un fichier Figma s'ouvre, affichant la page d'informations sur le plug-in. Cliquez sur ... et sélectionnez Enregistrer pour vous assurer de pouvoir réutiliser facilement le plug-in.
Cliquez à présent sur Run (Exécuter).
Vous pouvez voir le plug-in s'exécuter dans le canevas Figma :
Installer le plug-in Relay for Android Studio
Le plug-in Relay for Android Studio permet aux développeurs travaillant dans Android Studio d'importer des conceptions qui ont été annotées avec des informations d'intent de conception en utilisant le plug-in Relay for Figma. Le plug-in est publié sur le Marketplace de plug-ins Android Studio. Pour l'installer :
- Ouvrez Android Studio.
- Dans le menu principal :
- Sous macOS, sélectionnez Android Studio > Préférences.
- Sous Windows et Linux, sélectionnez Fichier > Paramètres.
- Sélectionnez Plug-ins.
Accédez à l'onglet "Place de marché", recherchez Relay for Android Studio, puis sélectionnez le plug-in publié par Google :
Cliquez sur Installer.
Une fois l'installation terminée, cliquez sur Redémarrer l'IDE.
Pour vérifier que l'installation a réussi, ouvrez Préférences ou Paramètres, puis accédez à Plug-ins. Relay for Android Studio devrait apparaître dans la section "Installé".
Installer le plug-in Relay Gradle
Le plug-in Relay Gradle permet de s'assurer que les conceptions dans Figma annotées avec des informations d'intent de conception en utilisant le plug-in Relay for Figma sont correctement converties en code lors d'une compilation.
Le plug-in Relay Gradle est publié sur Google Maven, un serveur contenant de nombreux plug-ins Gradle. Par défaut, Android Studio appelle les opérations Gradle. Ces opérations incluent le téléchargement et l'installation de toutes les dépendances référencées par votre projet.
Pour vous assurer qu'Android Studio, et par extension Gradle, télécharge et installe le plug-in Relay Gradle, vous devez spécifier le plug-in en tant que dépendance dans votre projet, plus précisément dans le fichier build.gradle contenu dans le répertoire de votre module. Il se trouve généralement dans app/build.gradle.
En haut du fichier app/build.gradle se trouve une section répertoriant tous les plug-ins utilisés. Ajoutez le plug-in Relay Gradle à cette liste. Gradle gère le téléchargement et l'installation. Exemple :
plugins {
id 'com.android.application'
id 'kotlin-android'
id 'com.google.relay' version '0.3.12'
}
Assurez-vous également que votre fichier settings.gradle comporte la section suivante :
pluginManagement {
repositories {
gradlePluginPortal()
google()
mavenCentral()
}
}
Vous pouvez également utiliser un projet préconfiguré, qui inclut la configuration comme indiqué ci-dessus.
Configurer l'accès à Figma
Relay nécessite un jeton d'accès personnel Figma pour télécharger vos conceptions Figma et les convertir en code. Si vous n'en avez pas encore un :
- Ouvrez Figma et connectez-vous à Figma.
- Accédez à l'explorateur de fichiers.
Cliquez sur l'icône de votre compte, puis sélectionnez Settings (Paramètres).
Faites défiler la page jusqu'à la section Personal access tokens (Jetons d'accès personnels).
Saisissez une description pour le jeton, par exemple "Relay", puis sélectionnez "Return" (Retour). Un jeton est généré. Cliquez sur Copy this token (Copier ce jeton).
Dans le menu principal d'Android Studio, sélectionnez Outils > Paramètres Relay.
Si vous avez déjà configuré un jeton d'accès Figma sur macOS, la boîte de dialogue suivante peut s'afficher. Cette boîte de dialogue vous indique qu'Android Studio utilise votre jeton d'accès Figma existant. Saisissez votre mot de passe, puis cliquez sur Toujours Autoriser.
Collez votre jeton d'accès Figma dans le champ Figma Access Token (Jeton d'accès Figma). Si ce n'est pas la première fois que vous configurez un jeton d'accès Figma, l'entrée Existing Figma Access Token (Jeton d'accès Figma existant) peut s'afficher.
Cliquez sur OK.
Télécharger et configurer le projet préconfiguré
Pour télécharger et configurer un projet préconfiguré :
- Téléchargez le fichier ZIP du projet.
- Double-cliquez sur le fichier pour le décompresser. Le dossier HelloFigma est alors créé. Déplacez-le dans votre dossier d'accueil.
- Retournez dans Android Studio. Accédez à Fichier > Ouvrir, accédez au dossier d'accueil, sélectionnez HelloFigma, puis cliquez sur Ouvrir.
- Lorsque vous ouvrez le projet, Android Studio peut vous demander si vous faites confiance au projet. Cliquez sur Projet de confiance.
Exécuter le projet préconfiguré
Exécutez l'application dans un émulateur ou sur un appareil. Le message "Hello, Android!" s'affiche dans un écran vide.
Étape suivante
Vous êtes maintenant prêts à créer vos premières conceptions avec Relay.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Configurer votre projet Android
- Tester votre mise en page Compose
- Où hisser l'état