Relay installieren

Das Relais besteht aus drei Teilen, die jeweils separat installiert werden müssen:

1. Relay für Figma-Plug-in
2. Relay für Android Studio-Plug-in
3. Relay-Gradle-Plug-in

Voraussetzungen

• Sie müssen in einem Figma-Konto angemeldet sein.
• Du hast Android Studio 2022.2.1 Flamingo oder höher installiert.
• Sie haben die Java-Laufzeit installiert.
• Sie verwenden Jetpack Compose Version 1.2 oder höher.
• Sie verwenden das Gradle-Plug-in Version 8.0 oder höher.

Hinweis :Diese Dokumentation basiert auf Flamingo und der Version 8.0 des Android-Gradle-Plug-ins. Die Details können in späteren Versionen leicht abweichen.

Hinweis: Wir gehen davon aus, dass Sie eine Lizenz für Figma Professional oder Figma-Organisationen haben. Einige unserer Funktionen nutzen den Versionsverlauf und Teambibliotheken, die in der Starter-Lizenz möglicherweise nicht verfügbar sind.

Relay for Figma-Plug-in installieren

Mit dem Relay for Figma-Plug-in können alle, die in Figma arbeiten, ihre Designs mit Anmerkungen versehen und sie mit Entwicklern teilen, die Android Studio und Jetpack Compose verwenden.

Das Relay for Figma-Plug-in wurde im Community-Plug-in-Marktplatz von Figma veröffentlicht. So installieren Sie das Plug-in:

1. Rufen Sie auf der Figma-Website die Plug-in-Seite „Relay for Figma“ auf.

2. Klicken Sie rechts oben auf der Seite auf Jetzt ausprobieren.

   

3. Möglicherweise werden Sie in einem Dialogfeld gefragt, ob Sie das Plug-in verwenden möchten. Wählen Sie im Dialogfeld Ihre Organisation aus. In seltenen Fällen kann Ihre Organisation öffentliche Plug-ins deaktivieren. Wählen Sie in diesem Fall die Option Externe Teams aus.

   

   Daraufhin wird eine Figma-Datei mit der angezeigten Plug-in-Informationsseite geöffnet. Klicken Sie auf ... und wählen Sie Speichern aus, damit Sie das Plug-in einfach wiederverwenden können.

   

4. Klicken Sie nun auf Ausführen:

   Sie können das im Figma-Canvas ausgeführte Plug-in anzeigen:

   

Relay for Android Studio-Plug-in installieren

Mit dem Relay for Android Studio-Plug-in können Entwickler, die in Android Studio arbeiten, mit dem Relay for Figma-Plug-in Designs importieren, die mit Design-Intent-Informationen annotiert wurden. Das Plug-in wurde im Android Studio Plugin Marketplace veröffentlicht. Installation:

Hinweis :Wenn du Android Studio zum ersten Mal verwendest und noch kein Android SDK installiert hast oder ein Begrüßungsbildschirm zur Einrichtung eines Android SDK angezeigt wird, folge dieser Anleitung, um dein Android SDK einzurichten.

1. Öffnen Sie Android Studio.
2. Im Hauptmenü:
   • Unter macOS wählen Sie Android Studio > Einstellungen aus.
   • Unter Windows und Linux wählen Sie File > Settings (Datei > Einstellungen) aus.
3. Wählen Sie Plug-ins aus.

4. Wählen Sie den Tab „Marketplace“ aus, suchen Sie nach Relay for Android Studio und wählen Sie das von Google veröffentlichte Plug-in aus:

   

5. Klicken Sie auf Installieren.

6. Klicken Sie nach Abschluss der Installation auf IDE neu starten.

7. Öffnen Sie Einstellungen oder Einstellungen und rufen Sie Plug-ins auf, um zu prüfen, ob die Installation erfolgreich war. Im Abschnitt „Installiert“ sollte Relay for Android Studio angezeigt werden.

Relay-Gradle-Plug-in installieren

Das Relay Gradle-Plug-in sorgt dafür, dass Designs in Figma, die mit dem Relay for Figma-Plug-in mit Design-Intent-Informationen versehen sind, während eines Builds korrekt in Code konvertiert werden.

Das Relay Gradle-Plug-in wird auf Google Maven veröffentlicht, einem Server, der viele Gradle-Plug-ins enthält. Android Studio ruft standardmäßig Gradle-Vorgänge auf. Dabei werden alle Abhängigkeiten heruntergeladen und installiert, auf die Ihr Projekt verweist.

Damit Android Studio und damit auch Gradle selbst das Relay-Gradle-Plug-in herunterlädt und installiert, müssen Sie das Plug-in in Ihrem Projekt als Abhängigkeit angeben, insbesondere in der Datei build.gradle im Verzeichnis Ihres Moduls. Das ist normalerweise in app/build.gradle.

Der Anfang der Datei app/build.gradle befindet sich in einem Abschnitt, in dem alle verwendeten Plug-ins aufgeführt sind. Wenn Sie das Relay Gradle-Plug-in in diese Liste aufnehmen, übernimmt Gradle den Download und die Installation. Beispiele:

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

Achten Sie außerdem darauf, dass die Datei settings.gradle den folgenden Abschnitt enthält:

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

Hinweis :Verwenden Sie die neueste Version des Relay-Gradle-Plug-ins, um alle neuen Funktionen nutzen zu können.

Sie können auch ein vorkonfiguriertes Projekt verwenden, das die oben genannte Konfiguration enthält.

Figma-Zugriff einrichten

Relay benötigt ein persönliches Zugriffstoken für Figma, damit es Ihre Figma-Designs herunterladen und in Code umwandeln kann. Falls Sie noch keines haben, gehen Sie so vor:

1. Öffnen Sie Figma und melden Sie sich bei Figma an.
2. Öffnen Sie den Dateibrowser .

3. Klicke auf das Kontosymbol und wähle Einstellungen aus.

   

4. Scrollen Sie nach unten zum Abschnitt Persönliche Zugriffstokens.

5. Geben Sie eine Tokenbeschreibung ein, z. B. „Relay“, und geben Sie „Return“ ein. Ein Token wird generiert. Klicken Sie auf Dieses Token kopieren.

   

6. Wählen Sie in Android Studio im Hauptmenü Tools > Relay Settings (Tools > Relay-Einstellungen) aus.

   

7. Wenn Sie bereits ein Figma-Zugriffstoken unter macOS eingerichtet haben, wird möglicherweise das folgende Dialogfeld angezeigt. In diesem Dialogfeld sehen Sie, dass Android Studio Ihr bestehendes Figma-Zugriffstoken verwendet. Geben Sie Ihr Passwort ein und klicken Sie auf Immer zulassen.

   

8. Fügen Sie Ihr Figma-Zugriffstoken in die Eingabe Figma Access Token ein. (Wenn Sie nicht zum ersten Mal ein Figma-Zugriffstoken einrichten, wird möglicherweise die Eingabe Vorhandenes Figma-Zugriffstoken angezeigt.)

   

9. Klicke auf OK.

Vorkonfiguriertes Projekt herunterladen und einrichten

Hinweis: Die Schritte in diesem Abschnitt sind optional, werden aber dringend empfohlen, wenn Sie unsere Anleitungen durchgehen möchten. Informationen zum manuellen Erstellen eines Relay-Projekts für Android Studio, statt das vorkonfigurierte Projekt zu verwenden, finden Sie unter Android-Projekt einrichten.

So laden Sie ein vorkonfiguriertes Projekt herunter und richten es ein:

1. Laden Sie die Projekt-ZIP-Datei herunter.
2. Doppelklicken Sie auf die Datei, um sie zu entpacken. Dadurch wird ein Ordner mit dem Namen HelloFigma erstellt. Verschieben Sie es in Ihren Basisordner.
3. Kehren Sie zu Android Studio zurück. Gehen Sie zu File > Open (Datei > Öffnen), gehen Sie zu Ihrem Basisordner, wählen Sie HelloFigma aus und klicken Sie auf Open (Öffnen).
4. Wenn Sie das Projekt öffnen, werden Sie von Android Studio möglicherweise gefragt, ob Sie dem Projekt vertrauen. Klicken Sie auf Projekt vertrauen.

Hinweis :Für dieses vorkonfigurierte Projekt sind Android Studio Flamingo oder höher und das Android Gradle-Plug-in 8.0 erforderlich. Sie setzt auch die Verwendung von Compose-Material voraus. Wenn Sie Compose Material 3 verwenden möchten, folgen Sie dieser Anleitung, um Ihrem Projekt die entsprechenden Abhängigkeiten hinzuzufügen.

Vorkonfiguriertes Projekt ausführen

Führen Sie die App in einem Emulator oder auf einem Gerät aus. Sie sollten „Hello, Android!“ auf einem leeren Bildschirm sehen.

Nächster Schritt

Jetzt können wir unsere ersten Designs mit Relay erstellen.

Erste Schritte