Przyporządkowywanie stylów do motywu tworzenia

Mapowanie ze stylów w Figmie do motywu w sekcji Compose

Figma pozwala projektantom na zastosowanie stylu do elementu projektu. Styl jest przeznaczony do wielokrotnego użytku zbiór właściwości, takich jak kolory lub typografia. Jako że jest centralnie zespół może określać i aktualizować właściwości we wszystkich projektach, jednego elementu projektu. Możesz skonfigurować usługę Relay tak, aby tłumaczyła tekst Figma do motywów w Jetpack Compose.

Mapowanie między stylami Figma a motywami tworzenia wiadomości jest określane za pomocą .

Plik konfiguracji mapuje style Figma i motywy tworzenia wiadomości

Przykład poniżej grafiki Figma korzysta ze stylów z Material 3 Google Zestaw do projektowania Czcionka w tekście Główny – tytuł duży to M3/title/large i kolor to M3/sys/light/primary.

Style Material 3 w Figmie

Jeśli zaimportujemy projekt z włączonym tłumaczeniem stylów w narzędziu M3 Design Kit, funkcja dla tekstu Główny – duży tytuł generowany jest ten kod:

@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 zwykły sposób w aplikacji Figma. Potem w Androidzie w Studio, przejdź do menu Plik > Nowe > Importuj pakiety interfejsu..., a następnie sprawdź, Przetłumacz style aplikacji Figma na motyw Utwórz

Na tym etapie musisz wybrać konfigurację tłumaczenia style:

  • Jeśli pochodzą bezpośrednio z zestawu Material 3 Design Kit Google w przypadku kodu Figma (mającego format M3/body/medium or M3/sys/light/primary), a następnie wybierz opcję Material 3 Design Kit (Konfiguracja pakietu Material 3 Design Kit).
  • Jeśli pochodzą bezpośrednio z zestawu Material 2 Design Kit Google w przypadku kodu Figma (mającego format 01. Primary/500 or Subtitle 1), to Wybierz Opcja Material 2 Design Kit (Konfiguracja pakietu Material 2).

  • Jeśli masz własne definicje stylu, wybierz opcję Niestandardowe konfiguracja i wybierz plik zawierający mapowania między stylami Figma i motywami tworzenia wiadomości (opisane w tej sekcji).

    Okno importowania pakietu UI

Jeśli w projekcie Figma występują style, których nie ma w wybranych jeśli w oknie importowania pojawi się ostrzeżenie o każdym niezmapowanym stylu. Każdy styl niezmapowany jest przekładany na jego wartość literałową. Ostrzeżenia są początkowo zwinięte; kliknij baner z ostrzeżeniami, aby go rozwinąć. Każde ostrzeżenie ma do konkretnej warstwy w pliku Figma, która powoduje ostrzeżenie.

Ostrzeżenia w oknie importowania

Po zaimportowaniu konfiguracja stylu będzie dostępna w Android Studio. w projektach AI. Szukaj ich w środku ui-package-resources/style-mappings katalogu.

Pliki konfiguracji do niestandardowych tłumaczeń

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

  1. Styl Figma w pakiecie UI jest przekształcany na token projektu w interfejsie Plik JSON definicji pakietu w folderze pakietu UI na Androidzie Projekt Studio.
  2. Token projektu w pliku definicji pakietu UI jest przekształcany na fragment kodu Utwórz kod motywu w projekcie Android Studio.

Format niestandardowego pliku konfiguracji (w formacie JSON) odzwierciedla te 2 kroki. Oto przykład prostego niestandardowego pliku konfiguracji, 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"
      }
    }
  }
}

Występują 2 główne sekcje: figma (wskazująca krok 1) i compose (który określa krok 2). Oba zawierają sekcję colors:

  • Sekcja colors w figma określa styl Figma i odpowiadający mu styl token projektu, który powinien być zapisany w pliku definicji pakietu UI.
  • Sekcja colors interfejsu compose określa token projektu w pakiecie UI definicji i odpowiedniego fragmentu kodu, który należy zapisać w swojego kodu tworzenia wiadomości.

W powyższej przykładowej konfiguracji wszystkie elementy korzystające z koloru Kolor my-app-theme/sys/light/primary na Figmie jest zapisany jako myapp.sys.color.primary w pliku definicji pakietu UI. Potem, w trakcie kodowania generacji, ten kolor jest zapisany jako MaterialTheme.colorScheme.primary w języku Utwórz.

Sekcja compose zawiera też sekcję options, w której określono, pakietu, w którym znajduje się dany symbol kodu. W powyższym przykładzie stwierdzono, że MaterialTheme znajduje się w pakiecie androidx.compose.material3, dlatego należy zaimportować w wygenerowanym kodzie.

Mapowanie stylów typograficznych ma większe znaczenie niż style kolorów. Oto ten sam przykład, 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 typograficznych odzwierciedla to, że dany styl z kilku usług podrzędnych. Typograficzna typografia w Figmie i Kompozycji zawiera nazwę kroju czcionki, jej grubość, rozmiar, odstępy między literami i wiersze; wysokość i wiele innych. Zamiast mapować poszczególne style usług podrzędnych, zamiast tego mapujemy ogólne style na tokeny. i motywy, a następnie zmapuj każdą usługę podrzędną.

W przykładzie powyżej stwierdzono, że gdy element tekstowy Figma ze stylem my-app-theme/headline/large jest zapisywany w pliku definicji pakietu UI, czcionka tekstu to myapp.sys.typescale.headline-large.font, a jego rozmiar to myapp.sys.typescale.headline-large.size itd. Następnie, gdy kod tworzenia wiadomości funkcja kompozycyjna RelayText (która obejmuje kompozycję Text w Compose Material), gdzie parametr font to MaterialTheme.typography.headlineLarge.fontFamily, parametr size ma wartość MaterialTheme.typography.headlineLarge.fontSize itp.

Przykładowe pliki konfiguracji znajdziesz w wbudowanych interfejsach Material 3 Konfiguracje pakietu Material 2 Design Kit, które mają dokładnie ten sam format. Dostępne opcje pobierz pliki tutaj:

Ograniczenia

Obecnie jest kilka sytuacji, w których style nie są tłumaczone tematy:

  • Style tekstu zastosowane 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 styl.
. .