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.

    Option „Import UI Packages...“ (UI-Pakete importieren...) im Menü „File“ (Datei)

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

    Dialogfeld „UI-Pakete importieren“

  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.

    Vorschau der Komponenten

  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:

Bildschirm UI-Paketimport
  • 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“

Seitenleiste für UI-Paket

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.

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.

    Option „5 UI-Pakete aktualisieren“ im Kontextmenü

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

    Option „Alle UI-Pakete aktualisieren“ im Kontextmenü