Android Studio-Workflow

UI-Paket importieren

Nachdem Sie ein UI-Paket in Figma erstellt haben, können Sie es in Ihr Android Studio-Projekt importieren. Wenn das Projekt erstellt ist, generiert Relay Jetpack Compose-Code.

So importieren Sie ein UI-Paket in ein Android Studio-Projekt:

1. Wählen Sie File > New > Import UI Packages... (Datei > Neu > UI-Pakete importieren...) aus.

   

2. Geben Sie die URL für eine Figma-Datei ein, die ein UI-Paket enthält.

   

3. Klicke auf Weiter.

4. Wählen Sie die UI-Pakete aus, die Sie importieren möchten. Welche Komponenten angezeigt werden, hängt davon ab, ob Sie eine Komponente, eine Seite oder einen Dateilink eingefügt haben. Wenn ein UI-Paket bereits importiert wurde, wird es mit „UPDATED“ (AKTUALISIERT) gekennzeichnet. Andernfalls wird es als „NEU“ angezeigt.

   

   Hinweis: Unter einem anderen UI-Paket verschachtelte UI-Pakete werden automatisch importiert, wenn das übergeordnete Paket ausgewählt wird.

5. Klicken Sie auf Fertigstellen, um die ausgewählten Pakete und ihre Abhängigkeiten in den Ordner ui-packages zu importieren.

Bildschirm UI-Paketimport

Der Importbildschirm enthält die folgenden Informationen:

• Ein Vorschaubild der Komponente und ihrer Varianten.
• Titel und Beschreibung
• Eine Liste der Varianten und ihrer Eigenschaften.
• Eine Liste der Inhaltsparameter und ihrer Typen.
• Eine Liste der Interaktions-Handler und ihrer Typen.

Fenster „UI Package Tool“

Das Android Studio-Plug-in fügt ein Toolfenster namens UI Package hinzu. Es wird geöffnet, wenn Sie eine Datei in einem UI-Paketordner auswählen (z.B. app/src/main/ui-packages/mycomponent/). Im Toolfenster wird eine Zusammenfassung des UI-Pakets und seines Inhalts angezeigt.

Android-Projekt erstellen

Wenn Sie ein Android Studio-Projekt erstellen, das ein UI-Paket enthält, generiert das Relay-Gradle-Plug-in Code aus dem UI-Paket und kompiliert ihn. Schriftarten-Assets werden ebenfalls heruntergeladen und in Ihr Projekt kopiert.

Wenn Sie nur die importierten UI-Pakete und nicht Ihr gesamtes Projekt erstellen möchten, können Sie diese spezifischen Gradle-Aufgaben ausführen:

• generateDebugRelayCode oder generateReleaseRelayCode generiert Debug- oder Release-Versionen von Code, der aus dem UI-Paket abgeleitet wurde.
• generateRelayRuntimeCode erstellt die vom generierten Code verwendete Laufzeitbibliothek.

Während des Build-Prozesses:

1. Code wird aus dem UI-Paket generiert und in separaten Ordnern gespeichert.
2. Bilder und Schriftarten werden in einen gemeinsam erstellten Ressourcenordner kopiert.

Der Speicherort der Ordner ist unter Informationen zu UI-Paket und generiertem Code dokumentiert.

Warnung: In der Regel wird Code beim Build neu generiert, wenn das UI-Paket seit dem letzten Build aktualisiert wurde. Das Aktualisieren einer Abhängigkeit außerhalb des Verzeichnisses ui-packages erzwingt jedoch nicht, dass Code beim Erstellen des Projekts neu generiert wird. Dies kann vorkommen, wenn es sich um eine Datei für die Themenzuordnung oder eine Referenzkomponentendatei handelt.

Problemumgehung: Um eine Aktualisierung des generierten Codes zu erzwingen, bereinigen Sie das Projekt (Gehen Sie zu Build > Clean Project) oder löschen Sie den Ordner mit generiertem Code, der mit dem zu aktualisierenden UI-Paket verknüpft ist. Erstellen Sie dann noch einmal.

UI-Paket aktualisieren

Wenn eine neue Version eines Designs fertig ist, sollte der Designer eine neue benannte Version der Figma-Datei erstellen.

Achten Sie in Android Studio darauf, dass sich das Fenster „Project Tool“ in der Android-Ansicht befindet.

1. Klicken Sie im Ordner ui-packages in Ihrem Modul mit der rechten Maustaste auf den Ordner der UI-Pakete, die Sie aktualisieren möchten, und wählen Sie dann UI-Pakete aktualisieren aus. Im folgenden Beispiel haben wir fünf UI-Pakete ausgewählt, die aktualisiert werden sollen.

   

2. Sie können auch mit der rechten Maustaste auf den Ordner ui-packages klicken, um alle UI-Pakete zu aktualisieren.

   

Hinweis :Wenn der Ordner ui-packages in der Android-Ansicht nicht angezeigt wird, rufen Sie die Projektansicht und dann im Modul src/main/ui-packages auf. Es kann auch hilfreich sein, mit der rechten Maustaste auf den Ordner auf oberster Ebene zu klicken und „Vom Datenträger neu laden“ auszuwählen.