Relay installieren

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

1. Relay for 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.
• Sie haben 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 in der Version 8.0 oder höher.

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

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

Plug-in „Relay for Figma“ installieren

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

Das Plug-in „Relay for Figma“ wird auf dem Community-Plug-in-Marktplatz von Figma veröffentlicht. So installieren Sie das Plug-in:

1. Rufen Sie die Plug-in-Seite "Relay for Figma" im Website.

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. Im Ihre Organisation aus. In seltenen Fällen kann Ihre Organisation deaktivieren Sie öffentliche Plug-ins. Falls ja, wählen Sie die Option Externe Teams aus.

   

   Dadurch 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 sich das ausgeführte Plug-in im Figma-Canvas ansehen:

   

Relay for Android Studio-Plug-in installieren

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

Hinweis: Wenn Sie Android Studio zum ersten Mal verwenden und noch nicht installiert haben ein Android-SDK haben oder einen Begrüßungsbildschirm zur Einrichtung eines Android-SDK sehen, folgen Sie Anleitung zum Einrichten des Android SDK

1. Öffnen Sie Android Studio.
2. Über das Hauptmenü: <ph type="x-smartling-placeholder">
   </ph>
   • Unter macOS wählen Sie Android Studio > Einstellungen.
   • Wählen Sie unter Windows und Linux Datei > Einstellungen.
3. Wählen Sie Plugins aus.

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

   

5. Klicken Sie auf Installieren.

6. Klicken Sie nach Abschluss der Installation auf Neustart der IDE.

7. Um zu überprüfen, ob die Installation erfolgreich war, öffnen Sie Einstellungen oder Settings (Einstellungen) und dann zu Plugins (Plug-ins). Nun sollte Relay für Android angezeigt werden. Studio unter „Installiert“.

Relay-Gradle-Plug-in installieren

Das Relay Gradle-Plug-in sorgt dafür, dass Designs in Figma Intent-Informationen mit dem Relay for Figma-Plug-in korrekt in während eines Build-Prozesses.

Das Relay-Gradle-Plug-in wird in Google Maven veröffentlicht, einem Server mit viele Gradle-Plug-ins. In Android Studio werden Gradle-Vorgänge standardmäßig aufgerufen. umfassen diese Vorgänge das Herunterladen und Installieren aller Abhängigkeiten, Projektreferenzen.

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

Oben in der Datei app/build.gradle befindet sich ein Abschnitt mit allen verwendeten Plug-ins. Fügen Sie dieser Liste das Relay-Gradle-Plug-in und die Gradle-Handles hinzu. herunterladen und installieren. Beispiel:

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

Die Datei settings.gradle muss außerdem folgenden Abschnitt enthalten:

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

Hinweis :Verwenden Sie die neueste Version des Relay-Gradle-Plug-ins, um Zugriff auf alle neuen Funktionen.

Sie können auch ein vorkonfiguriertes Projekt verwenden, das die Konfiguration oben beschrieben.

Zugriff auf Figma einrichten

Relay benötigt ein persönliches Figma-Zugriffstoken, um Ihr Figma-Designs zu erstellen und sie in Code zu konvertieren. Falls Sie noch keines haben:

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

3. Klicke auf dein 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 ist generiert. Klicken Sie auf Dieses Token kopieren.

   

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

   

7. Wenn Sie bereits ein Figma-Zugriffstoken unter macOS eingerichtet haben, wird möglicherweise das Symbol nächsten Dialogfeld. In diesem Dialogfeld werden Sie darüber informiert, dass Android Studio Ihr bestehendes Figma-Zugriffstoken. Geben Sie Ihr Passwort ein und klicken Sie auf Immer Zulassen.

   

8. Fügen Sie Ihr Figma-Zugriffstoken in den Eingabefeld Figma Access Token (Figma Access Token) ein. (Wenn die Einrichtung eines Figma-Zugriffstokens bereits erfolgt ist, Vorhandenes Figma Access Token-Eingabe)

   

9. Klicken Sie auf OK.

Vorkonfiguriertes Projekt herunterladen und einrichten

Hinweis: Die Schritte in diesem Abschnitt sind optional, werden aber dringend empfohlen, unsere Anleitungen durch. Wenn Sie wissen möchten, wie Sie einen Relay-Dienst manuell erstellen für Android Studio erstellen, anstatt das vorkonfigurierte Projekt zu verwenden, siehe Android-Projekteinrichtung

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, wodurch ein Ordner namens HelloFigma Verschiebe sie in den Basisordner...
3. Kehren Sie zu Android Studio zurück. Wählen Sie Datei > Öffnen, zeigen Sie mir den Weg nach Hause. Wählen Sie HelloFigma aus und klicken Sie auf Open (Öffnen).
4. Wenn Sie das Projekt öffnen, werden Sie möglicherweise von Android Studio gefragt, ob Sie dem Projekt arbeiten. Klicken Sie auf Trust Project (Projekt vertrauen).

Hinweis: Dieses vorkonfigurierte Projekt erfordert Android Studio Flamingo oder höher und Android-Gradle-Plug-in 8.0. Außerdem wird davon ausgegangen, dass Sie Material verfassen. Bei Bedarf Wenn Sie "Compose Material 3" verwenden möchten, folgen Sie dieser Anleitung, um die entsprechenden zu Ihrem Projekt hinzufügen.

Vorkonfiguriertes Projekt ausführen

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

Nächster Schritt

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

Einfache Anleitung