Überblick

Kartenkomponente mit Bild und Titel

Diese einfache Anleitung zeigt Ihnen sowohl den Designer- als auch den Entwickler-Workflow für Relay und bietet einen umfassenden Einstieg. Nach der Einrichtung des Relay-Plug-ins gelangen Sie schnell zu dem Bereich, in dem Sie die Benutzeroberfläche in Android Studio sehen können. Bleiben Sie dran!

Im Tutorial wird eine grundlegende Kartenkomponente in Figma erstellt und in Android Studio importiert, wo Sie sich den generierten Code ansehen können. Sie werden Folgendes lernen:

In Figma:

  1. Entwerfen Sie eine UI-Komponente in Figma.
  2. Erstellen Sie mit dem Figma-Plug-in ein UI-Paket.
  3. Speichern Sie eine benannte Version des Designs.
  4. Teilen Sie die Figma-URL mit den Entwicklern.

In Android Studio:

  1. Importieren Sie das UI-Paket mithilfe der Figma-URL in ein Projekt.
  2. Generieren Sie Jetpack Compose-Code durch Erstellen des Projekts.
  3. Fügen Sie der generierten zusammensetzbaren Funktion im UI-Code des Projekts einen Verweis hinzu.
  4. Führen Sie das Projekt aus.

Nächster Schritt

Lassen Sie uns zuerst unser Design erstellen und ein UI-Paket in Figma erstellen.