Vorkonfigurierte Figma-Datei herunterladen
Beginnen wir mit dem Erstellen einer Komponente in Figma. In diesem Tutorial verwenden wir eine vorhandene Figma-Datei als Beispiel. Diese Datei enthält einen Auto-Layout-Frame mit Bild und Titel. Melden Sie sich in Ihrem Figma-Konto an.
- Laden Sie diese Figma-Datei auf Ihren Computer herunter: HelloFigma.fig.
Bewegen Sie den Mauszeiger im Dateibrowser von Figma über Drafts (Entwürfe). Ein +-Symbol wird angezeigt. Klicken Sie auf +, dann auf Importieren... und wählen Sie die Datei HelloFigma.fig aus, die Sie gerade heruntergeladen haben.
Öffnen Sie die importierte Datei in Figma.
Komponente erstellen
Um das importierte Design mit dem Relay for Figma-Plug-in zu verwenden, müssen wir es zunächst in eine Komponente konvertieren. Wählen Sie den Frame Hello Card aus und klicken Sie in der Symbolleiste auf Create Component (Komponente erstellen).
UI-Paket erstellen
Das Relay for Figma-Plug-in fügt der Komponente zusätzliche Informationen hinzu, damit Sie mit Ihren Entwicklern zusammenarbeiten können, die die Komponente in ihrem Code verwenden können.
Öffnen Sie das Relay for Figma-Plug-in in Ihrer Datei (im Figma-Menü: Plugins > Relay for Figma). Klicken Sie auf Jetzt starten.
Wählen Sie die Komponente aus und klicken Sie auf Create UI Package (UI-Paket erstellen).
Wählen Sie das UI-Paket aus und fügen Sie unter Zusammenfassung eine Beschreibung hinzu. Beispiel: „Komponente „Hello Card“, die zur Anzeige des Bild- und Titelinhalts verwendet wird“
Klicken Sie rechts unten im Dialogfeld auf Für Entwickler freigeben, um zum nächsten Bildschirm zu gelangen.
Ablauf „Für Entwickler freigeben“
Nachdem Sie nun ein UI-Paket erstellt haben, bereiten Sie Ihre Komponente vor, um sie für das Entwicklungsteam freizugeben.
Erstellen Sie eine neue benannte Version der Komponentendatei. Die Verwendung benannter Versionen der Komponente verhindert, dass unerwünschte Änderungen die Produktionskomponenten beeinträchtigen.
Geben Sie einen Namen und eine Beschreibung für die erste Version der Komponente ein und klicken Sie dann auf Speichern.
Erstellen Sie als Nächstes einen Link zu einer Komponente, die freigegeben werden kann, und kopieren Sie ihn in die Zwischenablage, indem Sie auf einem Mac CMD-L oder auf Windows-Geräten Strg + L drücken.
Nächster Schritt
Jetzt können Sie Ihre UI-Komponente an Android Studio übergeben.
Öffnen Sie Android Studio, um den nächsten Teil dieser Anleitung abzuschließen.
Designs in Android Studio in Code konvertieren