Stile dem Design „Compose“ zuordnen

Zuordnung von Stilen in Figma zum Thema „Design“ in Compose

Mit Figma können Designschaffende einen Stil auf ein Designelement anwenden. Ein Stil ist eine wiederverwendbare Sammlung von Eigenschaften wie Farben oder Typografie. Da sie zentral definiert ist, kann ein Team Eigenschaften für alle Designs definieren und aktualisieren, wenn ein einzelnes Designelement aktualisiert wird. Relay lässt sich so einrichten, dass Figma-Stile in Jetpack Compose-Designs übersetzt werden.

Die Zuordnung zwischen Figma-Stilen und Compose-Designs erfolgt über eine Konfigurationsdatei.

Konfigurationsdateizuordnungen Figma-Stile und Erstellungsdesigns

Das unten gezeigte Figma-Design verwendet beispielhaft Stile aus dem Material 3-Design-Kit von Google. Für den Text Primär – Titel groß ist die Schriftart M3/title/large und die Farbe M3/sys/light/primary.

Material 3-Stile in Figma

Wenn das Design mit aktivierter Übersetzung der M3 Design Kit-Stile importiert wird, wird der folgende Code für den Text Primary – Title Large generiert:

@Composable
fun PrimaryTitleLarge(modifier: Modifier = Modifier) {
    Text(
        content = "Primary - Title large",
        fontSize = MaterialTheme.typography.titleLarge.fontSize,
        fontFamily = MaterialTheme.typography.titleLarge.fontFamily,
        color = MaterialTheme.colorScheme.primary,
        height = MaterialTheme.typography.titleLarge.lineHeight,
        letterSpacing = MaterialTheme.typography.titleLarge.letterSpacing,
        textAlign = TextAlign.Left,
        fontWeight = MaterialTheme.typography.titleLarge.fontWeight,
        modifier = modifier
    )
}

Um diese Funktion zu nutzen, verwenden Sie Stile wie gewohnt in Figma. Gehen Sie dann in Android Studio zu File > New > Import UI Packages... und klicken Sie auf Übersetze Figma-Stile in Compose-Design.

An dieser Stelle müssen Sie eine Konfiguration zum Übersetzen der Stile Ihres Designs auswählen:

  • Wenn sie direkt aus dem Material 3 Design Kit für Figma von Google stammen (im Format M3/body/medium or M3/sys/light/primary), wählen Sie die Option Material 3 Design Kit-Konfiguration aus.
  • Wenn sie direkt aus dem Material 2 Design Kit von Google für Figma (mit dem Format 01. Primary/500 or Subtitle 1) stammen, wählen Sie die Option Material 2 Design Kit-Konfiguration aus.

  • Wenn Sie eigene Stildefinitionen haben, wählen Sie die Option Benutzerdefinierte Konfiguration und dann die Datei aus, die die Zuordnungen zwischen den Figma-Stilen und dem Design „Compose“ enthält (in diesem Abschnitt beschrieben).

    Dialogfeld „UI-Paket importieren“

Wenn das Figma-Design Stile enthält, die nicht in der ausgewählten Konfiguration enthalten sind, wird im Dialogfeld „Importieren“ für jeden nicht zugeordneten Stil eine Warnung angezeigt. Jeder nicht zugeordnete Stil wird in seinen Literalwert übersetzt. Die Warnungen werden zunächst minimiert. Klicken Sie auf das Warnbanner, um sie zu maximieren. Jede Warnung enthält einen Link zu dem spezifischen Layer in der Figma-Datei, der die Warnung auslöst.

Warnungen im Dialogfeld für den Import

Nach dem Import befindet sich die Stilkonfiguration im Android Studio-Projekt. Sie finden sie im Verzeichnis ui-package-resources/style-mappings.

Konfigurationsdateien für benutzerdefinierte Übersetzungen

Das Übersetzen von Figma-Stilen in Designs „Compose“ erfolgt in zwei Schritten:

  1. Ein Figma-Stil in einem UI-Paket wird in der JSON-Datei für die UI-Paketdefinition im Ordner „UI Package“ in Ihrem Android Studio-Projekt in ein Designtoken übersetzt.
  2. Ein Designtoken in einer Definitionsdatei für das UI-Paket wird in ein Snippet des Codes des Composer-Designs in Ihrem Android Studio-Projekt übersetzt.

Diese beiden Schritte werden aus dem Format der benutzerdefinierten Konfigurationsdatei (im JSON-Format) abgeleitet. Hier ist ein Beispiel für eine einfache benutzerdefinierte Konfigurationsdatei, die nur Farbstile verarbeitet:

{
  "figma": {
    "colors": {
      "my-app-theme/sys/light/primary": "myapp.sys.color.primary",
      "my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
      "my-app-theme/sys/light/background": "myapp.sys.color.background",
      "my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
      "my-app-theme/sys/dark/background": "myapp.sys.color.background",
      "my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
    }
  },
  "compose": {
    "colors": {
      "myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "myapp.sys.color.background": "MaterialTheme.colorScheme.background",
      "myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

Es gibt zwei Abschnitte auf oberster Ebene: figma (mit Schritt 1) und compose (mit Schritt 2). Beide enthalten einen colors-Abschnitt:

  • Im Abschnitt colors von figma werden ein Figma-Stil und das entsprechende Designtoken angegeben, das in die Definitionsdatei des UI-Pakets geschrieben werden sollte.
  • Im Abschnitt colors von compose werden ein Designtoken in der Definitionsdatei des UI-Pakets und das entsprechende Code-Snippet angegeben, das in den Compose-Code geschrieben werden soll.

In der obigen Beispielkonfiguration ist für alle Elemente, in denen die Farbe my-app-theme/sys/light/primary in Figma verwendet wird, in der Definitionsdatei des UI-Pakets als myapp.sys.color.primary angegeben. Während der Codegenerierung wird diese Farbe dann in Composer als MaterialTheme.colorScheme.primary geschrieben.

Der Abschnitt compose enthält auch einen options-Abschnitt, der angibt, in welchem Paket sich ein bestimmtes Codesymbol befindet. Im obigen Beispiel ist MaterialTheme im Paket androidx.compose.material3 enthalten und sollte daher in jeden generierten Code importiert werden.

Die Zuordnung von Typografiestilen ist etwas komplizierter als Farbstile. Hier ist das gleiche Beispiel wie oben, aber mit zusätzlichen Typografiestilen:

{
  "figma": {
    "colors": {
      "my-app-theme/sys/light/primary": "myapp.sys.color.primary",
      "my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
      "my-app-theme/sys/light/background": "myapp.sys.color.background",
      "my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
      "my-app-theme/sys/dark/background": "myapp.sys.color.background",
      "my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
    },
    "typography": {
      "symbols": {
        "my-app-theme/headline/large": "myapp.sys.typescale.headline-large",
        "my-app-theme/body/medium": "myapp.sys.typescale.body-medium"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "myapp.sys.color.background": "MaterialTheme.colorScheme.background",
      "myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
    },
    "typography": {
      "symbols": {
        "myapp.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "myapp.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

Die Struktur der Typografieabschnitte spiegelt die Tatsache wider, dass ein Typografiestil aus vielen untergeordneten Eigenschaften besteht. In Figma und Compose umfasst ein Typografiestil unter anderem den Namen der Schriftart, die Schriftstärke, die Schriftgröße, den Buchstabenabstand und die Zeilenhöhe. Anstatt die einzelnen untergeordneten Eigenschaften jedes Stils immer wieder neu zuordnen zu müssen, ordnen wir die gesamten Stile Tokens und Designs zu und ordnen dann jede einzelne untergeordnete Property separat zu.

Wenn ein Figma-Textelement mit dem Stil my-app-theme/headline/large in die Definitionsdatei des UI-Pakets geschrieben wird, hat der Text im obigen Beispiel die Schriftart myapp.sys.typescale.headline-large.font, die Größe myapp.sys.typescale.headline-large.size usw. Wenn dann Code generiert wird, wird eine zusammensetzbare Funktion RelayText erstellt, die die zusammensetzbare Funktion Text in Composer-Material umschließt. Dabei ist der Parameter font auf MaterialTheme.typography.headlineLarge.fontFamily, der Parameter size auf MaterialTheme.typography.headlineLarge.fontSize usw.

Beispiele für Konfigurationsdateien finden Sie in den integrierten Material 3- und Material 2 Design Kit-Konfigurationen, die genau dasselbe Format haben. Sie können die Dateien hier herunterladen:

Einschränkungen

Derzeit gibt es mehrere Situationen, in denen Stile nicht in Designs übersetzt werden:

  • Textstile, die nur auf einen Teil eines Textelements angewendet werden (wie unter Mehrere Textstile beschrieben)
  • Wenn verschiedene Stile auf verschiedene Varianten einer Komponente angewendet werden, wird nur ein Stil übersetzt.