Umgang mit Designvarianten

In Figma werden Varianten verwendet, um verschiedene Varianten derselben Komponente zu gruppieren, z. B. unterschiedliche Status oder Größen. Relay behält die Varianten einer Komponente bei, wenn sie in Code übersetzt wird. In diesem Abschnitt sehen wir uns an, wie Relay Varianten in Designs handhabt.

Start

Wir beginnen mit einer Figma-Datei, die eine Komponente News Card mit drei Varianten enthält:

• hero-item ist für den wichtigsten Nachrichtenartikel bestimmt.
• article-item steht für einen typischen Artikel.
• audio-item steht für einen Artikel, den Sie anhören, anstatt ihn zu lesen.

Figma-Beispiel kopieren

Wir verwenden für dieses Tutorial eine vorhandene Figma-Datei als Beispiel. Achten Sie darauf, dass Sie bei Ihrem Figma-Konto angemeldet sind.

1. Laden Sie HelloNews.fig auf Ihren Computer herunter.

2. Gehen Sie in Figma zum Dateibrowser. Bewegen Sie den Mauszeiger links auf „Entwürfe“. Ein +-Symbol wird eingeblendet. Klicken Sie auf das +-Symbol und dann auf Importieren. Wählen Sie die Datei HelloNews.fig aus, die Sie gerade heruntergeladen haben. Dies kann zwischen 10 Sekunden und einer Minute dauern.

   

3. Öffnen Sie die importierte Datei in Figma.

UI-Paket erstellen

Mit dem Plug-in „Relay for Figma“ werden zusätzliche Informationen zu unserer Komponente hinzugefügt.

1. Öffnen Sie das Relay for Figma-Plug-in in Ihrer Datei (in der Menüleiste: Plugins > Relay for Figma). Klicken Sie auf Jetzt starten.

2. Wählen Sie die Komponente aus und klicken Sie auf Create UI Package (UI-Paket erstellen).

   

3. Fügen Sie bei ausgewähltem UI-Paket eine Beschreibung zum Zusammenfassungsfeld hinzu. Beispiel: „Nachrichtenkartenkomponente zur Anzeige von Nachrichtenelementen für eine Liste“.

   

Benannte Version speichern

Nachdem Sie nun ein UI-Paket erstellt haben, bereiten Sie Ihre Komponente vor, um sie für das Entwicklungsteam freizugeben.

1. Öffnen Sie das Figma Relay-Plug-in, falls es noch nicht geöffnet ist.
2. Klicken Sie auf Mit Entwickler teilen.
3. Auf dem Bildschirm Mit Entwickler teilen können Sie im Bereich Versionsverlauf speichern einen neuen Versionsnamen und eine neue Beschreibung eingeben.

4. Klicken Sie auf Speichern.

   Beispieltitel: Ursprüngliche neue Karte

   Beispielbeschreibung: Erste Iteration der Elemente eines Nachrichtenartikels

Android Studio-Projekt herunterladen

Für den Android Studio-Teil dieser Anleitung verwenden wir ein vorkonfiguriertes Android Studio-Projekt. Dieses Projekt enthält eine App, die Nachrichtenartikel im Nur-Text-Format anzeigt.

1. Laden Sie die Beispieldatei HelloNews.zip herunter.
2. Doppelklicken Sie auf die Datei, um sie zu entpacken. Dadurch wird ein Ordner mit dem Namen HelloNews erstellt. Verschieben Sie es in Ihren Basisordner.
3. Kehren Sie zu Android Studio zurück. Gehen Sie zu File > Open (Datei > Öffnen), zu Ihrem Basisordner, wählen Sie HelloNews aus und klicken Sie auf Open (Öffnen).
4. Wenn Sie das Projekt öffnen, werden Sie von Android Studio gefragt, ob Sie dem Projekt vertrauen. Klicken Sie auf Projekt vertrauen.

In Android Studio importieren

Importieren wir unsere Figma-Komponente in das Projekt.

1. Kopieren Sie in Figma die URL der Figma-Datei mit der News Card Tutorial-Anleitung. Mit dieser URL importieren wir unsere Komponenten. Klicken Sie oben rechts in Figma auf die Schaltfläche Share (Teilen). Klicken Sie im daraufhin angezeigten Dialogfeld auf Link kopieren.

   

2. Wechseln Sie in Android Studio zum HelloNews-Projekt. Gehen Sie in der Menüleiste von Android Studio zu File > New > Import UI Packages... (Datei > Neu > UI-Pakete importieren...).

   

3. Fügen Sie die URL Ihrer Figma-Datei ein und klicken Sie auf Next (Weiter).

   

   

   1. Der Abruf der Datei kann einige Zeit dauern. Klicken Sie dann auf Fertigstellen.

   

4. Klicken Sie auf , um Ihr Projekt zu erstellen. Dies kann etwa eine Minute dauern.

   

Vorschau der App und Komponente

1. Öffnen Sie in der Android-Ansicht app/java/com/example/hellonews/ui/home/HomeScreen.kt. Sie sehen dann eine Vorschau der App, in der mehrere Nachrichtenartikel im Nur-Text-Format angezeigt werden, wobei Meldungen über den Audiobeiträgen gedruckt werden.

   

2. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt öffnen. Dies ist der generierte Jetpack Compose-Code für unsere Figma-Komponente. In der Vorschau sehen Sie, dass drei Varianten der Komponente NewsCard von Figma in Code übersetzt wurden. Sehen wir uns den Code genauer an.

   

3. Mit der Aufzählung View können wir auswählen, welche Variante für diese Komponente verwendet werden soll. Der Name der Aufzählung und ihre Werte wurden aus den Varianten unserer Figma-Komponente abgeleitet. Sie wird im Parameter view in unserer zusammensetzbaren Funktion NewsCard verwendet.

   

4. Die zusammensetzbare Funktion NewsCard wurde aus dem UI-Paket generiert. Sie enthält einen Parameter vom Typ View, mit dem die Variante der Nachrichtenkarte auf „Instant“ festgelegt wird.

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * This composable was generated from the UI Package 'news_card'.
   * Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem
   ) {...}
   
   

Nächstes Video

NewsCard kann noch nicht verwendet werden. Die Komponente weiß nicht, wie sie verschiedene Nachrichtenmeldungen anzeigt, sondern dieselbe hartcodierte Meldung in Figma. Wenn wir die Komponente jetzt hinzufügen, erhalten wir nur noch eine wiederholte Meldung. Wir brauchen eine Möglichkeit, um anzugeben, welche Teile von NewsCard mit dynamischen Daten gefüllt werden sollen.

Inhaltsparameter

In diesem Abschnitt fügen wir der NewsCard-Komponente Inhaltsparameter hinzu.

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Inhaltsparameter
• Scrollen
• „Schreiben“ in Ansichten verwenden