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.
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.
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).
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.
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:
- 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.
- 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
wfigma
określa styl Figma i odpowiadający mu token projektu, który powinien być zapisany w pliku definicji pakietu UI. - Sekcja
colors
wcompose
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.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Inne uwagi
- Kotlin dla Jetpack Compose
- Dane o zakresie lokalnym w CompositionLocal