Installer Relay

Relay se compose de trois parties, chacune devant être installée séparément :

1. Plug-in Relay for Figma
2. Plug-in Relay for Android Studio
3. 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.

Remarque :Cette documentation est basée sur Flamingo et la version 8.0 de Plug-in Android Gradle. Les détails peuvent être légèrement différents pour les versions ultérieures.

Remarque :Nous supposons que vous disposez d'un professionnel Figma ou d'une organisation Figma. licence. Certaines de nos fonctionnalités utilisent l'historique des versions et des bibliothèques d'équipe, qui peuvent ne pas être disponibles dans la licence Starter.

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 :

1. Accédez à la page du plug-in Relay for Figma sur le site Web de Figma.

2. En haut à droite de la page, cliquez sur Try it out (Essayer).

   

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

   

4. 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 :

Remarque : Si vous utilisez Android Studio pour la première fois et que vous n'avez pas installé de SDK Android, ou si vous voyez un écran de bienvenue pour configurer un SDK Android, procédez comme suit pour configurer votre SDK Android.

1. Ouvrez Android Studio.
2. Dans le menu principal :
   • Sous macOS, sélectionnez Android Studio > Préférences.
   • Sous Windows et Linux, sélectionnez Fichier > Paramètres.
3. Sélectionnez Plug-ins.

4. Accédez à l'onglet "Place de marché", recherchez Relay for Android Studio, puis sélectionnez le plug-in publié par Google :

   

5. Cliquez sur Installer.

6. Une fois l'installation terminée, cliquez sur Redémarrer l'IDE.

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

Remarque :Utilisez la dernière version du plug-in Relay Gradle pour accéder à toutes les les dernières fonctionnalités.

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 :

1. Ouvrez Figma et connectez-vous à Figma.
2. Accédez à l'explorateur de fichiers.

3. Cliquez sur l'icône de votre compte, puis sélectionnez Settings (Paramètres).

   

4. Faites défiler la page jusqu'à la section Personal access tokens (Jetons d'accès personnels).

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

   

6. Dans le menu principal d'Android Studio, sélectionnez Outils > Paramètres Relay.

   

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

   

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

   

9. Cliquez sur OK.

Télécharger et configurer le projet préconfiguré

Remarque : Les étapes décrites dans cette section sont facultatives, mais vivement recommandées si vous souhaitez suivre nos tutoriels. Si vous souhaitez savoir comment créer manuellement un projet Relay pour Android Studio plutôt que d'utiliser le projet préconfiguré, consultez l'article Configuration d'un projet Android.

Pour télécharger et configurer un projet préconfiguré :

1. Téléchargez le fichier ZIP du projet.
2. Double-cliquez sur le fichier pour le décompresser. Le dossier HelloFigma est alors créé. Déplacez-le dans votre dossier d'accueil.
3. Retournez dans Android Studio. Accédez à Fichier > Ouvrir, accédez au dossier d'accueil, sélectionnez HelloFigma, puis cliquez sur Ouvrir.
4. Lorsque vous ouvrez le projet, Android Studio peut vous demander si vous faites confiance au projet. Cliquez sur Projet de confiance.

Remarque :Ce projet préconfiguré nécessite Android Studio Flamingo ou version ultérieure, et Plug-in Android Gradle 8.0. Il suppose également l'utilisation de Compose Material. Si vous voulez pour utiliser Compose Material 3, suivez ces instructions pour ajouter les les dépendances à votre projet.

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.

Tutoriel de base