Przyporządkowywanie stylów do motywu tworzenia

Mapowanie ze stylów w aplikacji Figma na motyw w usłudze Compose

Figma umożliwia projektantom zastosowanie stylu do elementu projektu. Styl to zbiór właściwości, np. kolorów lub typografii, którego można używać wielokrotnie. Ponieważ jest on centralnie zdefiniowany, zespół może definiować i aktualizować właściwości wszystkich projektów podczas aktualizowania pojedynczego elementu projektu. Możesz skonfigurować usługę Relay tak, aby tłumaczyła style Figma na motywy Jetpack Compose.

Mapowanie między stylami Figma a motywami Compose określa się w pliku konfiguracji.

Plik konfiguracji mapuje style Figma i motywy tworzenia

Na przykład widoczny poniżej projekt Figma wykorzystuje style z zestawu do projektowania od Google Material 3. W przypadku tekstu Główny – Tytuł duży czcionka to M3/title/large, a kolor to M3/sys/light/primary.

Style Material 3 w Figmie

Jeśli zaimportujemy projekt z włączonym tłumaczeniem stylów pakietu M3 Design Kit, zostanie wygenerowany ten kod dla tekstu Główny – Duży tytuł:

@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
    )
}

Aby korzystać z tej funkcji, używaj stylów w taki sam sposób jak w aplikacji Figma. Następnie w Android Studio wybierz Plik > Nowy > Importuj pakiety interfejsu i zaznacz Przetłumacz style Figma na motyw tworzenia.

Na tym etapie musisz wybrać konfigurację przetłumaczenia stylów projektu:

  • Jeśli pochodzą bezpośrednio z zestawu Material 3 Design Kit Google dla aplikacji Figma (w formacie M3/body/medium or M3/sys/light/primary), wybierz opcję Konfiguracja Material 3 Design Kit.
  • Jeśli pochodzą bezpośrednio z zestawu Material 2 Design Kit Google for Figma (w formacie 01. Primary/500 or Subtitle 1), wybierz opcję Konfiguracja Material 2 Design Kit.

  • Jeśli masz własne definicje stylów, wybierz opcję Konfiguracja niestandardowa i wybierz plik zawierający mapowania między stylami Figma a motywami tworzenia (opisane w tej sekcji).

    Okno importowania pakietu UI

Jeśli w projekcie Figma są style, których nie ma w wybranej konfiguracji, w oknie importowania pojawi się ostrzeżenie dla każdego niezmapowanego stylu. Każdy niezmapowany styl jest zamiast tego przekładany na swoją dosłowną wartość. Ostrzeżenia są początkowo zwinięte. Kliknij baner z ostrzeżeniami, aby je rozwinąć. Każde ostrzeżenie zawiera link do określonej warstwy w pliku Figma, która powoduje ostrzeżenie.

Ostrzeżenia w oknie importowania

Po zaimportowaniu konfiguracja stylu jest zapisywana w projekcie Android Studio. Poszukaj ich w katalogu ui-package-resources/style-mappings.

Pliki konfiguracji tłumaczeń niestandardowych

Tłumaczenie stylów Figma na motywy tworzenia składa się z 2 etapów:

  1. Styl Figma w pakiecie UI jest przekładany na token projektowania w pliku JSON z definicją pakietu UI w folderze pakietu UI w projekcie Android Studio.
  2. Token projektowania w pliku definicji pakietu UI jest przetłumaczony na fragment kodu motywu w projekcie Android Studio.

Format pliku niestandardowej konfiguracji (w formacie JSON) odzwierciedla te 2 kroki. Oto przykład prostego pliku niestandardowego, który obsługuje tylko style kolorów:

{
  "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"
      }
    }
  }
}

Istnieją 2 sekcje najwyższego poziomu: figma (który określa krok 1) i compose (oznaczający krok 2). Oba zawierają sekcję colors:

  • Sekcja colors w figma określa styl Figma i odpowiadający mu token projektu, który powinien być zapisany w pliku definicji pakietu UI.
  • Sekcja colors w compose określa token projektu w pliku definicji pakietu UI oraz odpowiedni fragment kodu, który należy wpisać w kodzie tworzenia.

W powyższej przykładowej konfiguracji każdy kolor my-app-theme/sys/light/primary na Figmie ma swój kolor zapisany jako myapp.sys.color.primary w pliku definicji pakietu UI. Następnie podczas generowania kodu kolor ten jest zapisywany jako MaterialTheme.colorScheme.primary w funkcji Compose.

Sekcja compose zawiera też sekcję options, która wskazuje pakiet, w którym znajduje się dany symbol kodu. W przykładzie powyżej wskazano, że element MaterialTheme znajduje się w pakiecie androidx.compose.material3, który należy zaimportować w każdym wygenerowanym kodzie.

Mapowanie stylów typografii jest nieco bardziej skomplikowane niż style kolorów. Oto ten sam przykład co powyżej, ale z dodanymi stylami typograficznymi:

{
  "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"
      }
    }
  }
}

Struktura sekcji typograficznej odzwierciedla fakt, że styl typograficzny składa się z wielu usług podrzędnych. W programach Figma i Compose styl typograficzny obejmuje m.in. nazwę kroju, jego grubość, rozmiar, odstępy między literami i wysokość wiersza. Nie musimy stale mapować poszczególnych usług podrzędnych każdego stylu, ponieważ mapujemy ogólne style na tokeny i motywy, a potem osobno mapujemy każdą usługę podrzędną.

Powyższy przykład wskazuje, że gdy element tekstowy Figma o stylu my-app-theme/headline/large zostanie zapisany w pliku definicji pakietu UI, czcionka tekstu będzie miała wartość myapp.sys.typescale.headline-large.font, rozmiar tekstu będzie miał wartość myapp.sys.typescale.headline-large.size itd. Podczas generowania kodu tworzenia tworzone są następnie funkcje kompozycyjne RelayText (zawijające element Text kompozycyjny w komponencie tworzenia materiału), gdzie parametr font to MaterialTheme.typography.headlineLarge.fontFamily, parametr size ma wartość MaterialTheme.typography.headlineLarge.fontSize itd.

Przykłady plików konfiguracji możesz zobaczyć we wbudowanych konfiguracjach Material 3 i Material 2 Design Kit, które mają dokładnie ten sam format. Pliki możesz pobrać tutaj:

Ograniczenia

Obecnie jest kilka sytuacji, w których style nie są przekładane na motywy:

  • Style tekstu stosowane tylko do części elementu tekstowego (zgodnie z opisem w sekcji Wiele stylów w tekście)
  • Jeśli do różnych wariantów komponentu zastosowano różne style, przetłumaczony jest tylko jeden z nich.