![Mapowanie ze stylów w Figmie do motywu w sekcji Compose](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/mapping-styles-to-compose-theme/mappding-from-styles-in-figma.png?authuser=9&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/mapping-styles-to-compose-theme/config-file.png?authuser=9&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/mapping-styles-to-compose-theme/m3-styles-in-Figma.png?authuser=9&hl=pl)
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).
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](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/mapping-styles-to-compose-theme/warning-in-dialog.png?authuser=9&hl=pl)
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:
- 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.
- 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
wfigma
określa styl Figma i odpowiadający mu styl token projektu, który powinien być zapisany w pliku definicji pakietu UI. - Sekcja
colors
interfejsucompose
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.
Polecane dla Ciebie
- Uwaga: tekst linku wyświetla się, gdy JavaScript jest wyłączony
- Inne uwagi
- Kotlin w Jetpack Compose
- Dane o ograniczonym zakresie lokalnym za pomocą funkcji CompositionLocal