Das Relais besteht aus drei Teilen, die jeweils separat installiert werden müssen:
- Relay for Figma-Plug-in
- Relay für Android Studio-Plug-in
- 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.
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:
- Rufen Sie die Plug-in-Seite "Relay for Figma" im Website.
Klicken Sie rechts oben auf der Seite auf Jetzt ausprobieren.
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.
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:
- Öffnen Sie Android Studio.
- Ü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.
- Wählen Sie Plugins aus.
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:
Klicken Sie auf Installieren.
Klicken Sie nach Abschluss der Installation auf Neustart der IDE.
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()
}
}
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:
- Öffnen Sie Figma und melden Sie sich bei Figma an.
- Wechseln Sie zum Dateibrowser .
Klicke auf dein Kontosymbol und wähle Einstellungen aus.
Scrollen Sie nach unten zum Abschnitt Persönliche Zugriffstokens.
Geben Sie eine Tokenbeschreibung ein, z. B. „Relay“, und geben Sie „Return“ ein. Ein Token ist generiert. Klicken Sie auf Dieses Token kopieren.
Wählen Sie in Android Studio im Hauptmenü Tools > Relay-Einstellungen.
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.
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)
Klicken Sie auf OK.
Vorkonfiguriertes Projekt herunterladen und einrichten
So laden Sie ein vorkonfiguriertes Projekt herunter und richten es ein:
- Laden Sie die Projekt-ZIP-Datei herunter.
- Doppelklicken Sie auf die Datei, um sie zu entpacken, wodurch ein Ordner namens HelloFigma Verschiebe sie in den Basisordner...
- 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).
- 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).
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.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Android-Projekt einrichten
- Layout von „Compose“ testen
- Wo soll der Windenstatus hergestellt werden?