Stilleri Oluşturma temasıyla eşleme

Figma'daki Stillerden Compose'da Temaya Eşleme

Figma, tasarımcıların bir stili tasarım öğesine uygulamasını sağlar. Stil, renkler veya tipografi gibi özelliklerin yeniden kullanılabilir bir koleksiyonudur. Merkezi olarak tanımlandığından, bir ekip tek bir tasarım öğesini güncellerken tüm tasarımların özelliklerini tanımlayabilir ve güncelleyebilir. Relay'i, Figma stillerini Jetpack Compose temalarına çevirecek şekilde ayarlayabilirsiniz.

Figma stilleri ile Oluştur temaları arasındaki eşleme, bir yapılandırma dosyasıyla belirtilir.

Figma stillerini ve Oluşturma temalarını eşleyen yapılandırma dosyası

Örnek olarak, aşağıda gösterilen Figma tasarımında Google'ın Material 3 Tasarım Kiti'nden stiller kullanılır. Birincil - Başlık büyük metni için yazı tipi M3/başlık/büyük ve rengi M3/sys/light/primary şeklindedir.

Figma'da Material 3 stilleri

Tasarımı, M3 Tasarım Kiti stil çevirisi etkin halde içe aktarırsak Birincil - Başlık büyük metni için aşağıdaki kod oluşturulur:

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

Bu özelliği kullanmak için stilleri, normalde Figma'da kullandığınız gibi kullanın. Ardından Android Studio'da Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar... seçeneğine gidin ve ardından Figma stillerini Compose temasına çevir'i işaretleyin.

Bu noktada, tasarımınızın stillerini çevirmek için bir yapılandırma seçmeniz gerekir:

  • Bunlar doğrudan Figma için Google'ın Material 3 Design Kit'inden (M3/body/medium or M3/sys/light/primary biçiminde) geliyorsa Material 3 Design Kit yapılandırması seçeneğini belirleyin.
  • Bunlar doğrudan Figma için Google'ın Material 2 Design Kit'inden (01. Primary/500 or Subtitle 1 biçiminde) geliyorsa Material 2 Design Kit yapılandırması seçeneğini belirleyin.

  • Kendi stil tanımlarınız varsa Özel yapılandırma seçeneğini belirleyin ve Figma stilleri ile Temalar arasındaki eşlemeleri içeren dosyayı seçin (bu bölümde açıklanmıştır).

    Kullanıcı Arayüzü Paketini İçe Aktarma iletişim kutusu

Figma tasarımında, seçilen yapılandırmada bulunmayan stiller varsa İçe aktarma iletişim kutusu, eşlenmemiş her stil için bir uyarı gösterir. Eşlenmemiş her stil bunun yerine gerçek değerine çevrilir. Uyarılar başlangıçta daraltılmıştır; genişletmek için uyarı banner'ını tıklayın. Her uyarının, Figma dosyasında uyarıya neden olan ilgili katmana bir bağlantısı vardır.

İçe aktarma iletişim kutusundaki uyarılar

İçe aktarma işleminden sonra, stil yapılandırması Android Studio projesinde bulunur. Bunları ui-package-resources/style-mappings dizininde arayın.

Özel çeviriler için yapılandırma dosyaları

Figma stillerini Temalar'a çevirme işlemi iki adımdan oluşur:

  1. Kullanıcı Arayüzü Paketindeki bir Figma stili, Android Studio projenizdeki Kullanıcı Arayüzü Paketi klasöründe bulunan Kullanıcı Arayüzü Paket tanımı JSON dosyasındaki bir tasarım jetonuna dönüştürülür.
  2. Kullanıcı Arayüzü Paketi tanım dosyasındaki bir tasarım jetonu, Android Studio projenizdeki Oluşturma tema kodu snippet'ine dönüştürülür.

Özel yapılandırma dosyasının biçimi (JSON biçimindedir) bu iki adımı yansıtır. Aşağıda, yalnızca renk stillerini işleyen basit bir özel yapılandırma dosyası örneği verilmiştir:

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

İki üst düzey bölüm vardır: figma (1. adımı belirtir) ve compose (2. adımı belirtir). Her ikisinde de bir colors bölümü bulunur:

  • figma uygulamasının colors bölümü, bir Figma stilini ve Kullanıcı Arayüzü Paketi tanım dosyasına yazılması gereken ilgili tasarım jetonunu belirtir.
  • compose uygulamasının colors bölümü, Kullanıcı Arayüzü Paketi tanım dosyasında bir tasarım jetonu ve Oluşturma kodunuza yazılması gereken ilgili kod snippet'ini belirtir.

Yukarıdaki örnek yapılandırmada, Figma'da my-app-theme/sys/light/primary rengini kullanan her şeyin rengi, kullanıcı arayüzü paketi tanım dosyasına myapp.sys.color.primary olarak yazılır. Daha sonra, kod oluşturma sırasında bu renk Oluşturma'ya MaterialTheme.colorScheme.primary olarak yazılır.

compose bölümü, belirli bir kod sembolünün hangi pakette bulunduğunu belirten bir options bölümü de içerir. Yukarıdaki örnekte MaterialTheme, androidx.compose.material3 paketinde olduğu için oluşturulan herhangi bir kodda içe aktarılmalıdır.

Tipografi stillerini eşleme, renk stillerinden biraz daha karmaşıktır. Burada, yukarıdakiyle aynı örneği, ancak tipografi stilleri eklenmiş olarak görebilirsiniz:

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

Tipografi bölümlerinin yapısı, tipografi stilinin birçok alt özellikten oluştuğu gerçeğini yansıtır. Figma ve Compose'da bir yazı tipi stili, diğer birçok özelliğin yanı sıra yazı tipinin adını, yazı tipi kalınlığını, boyutunu, harf aralığını ve satır yüksekliğini içerir. Her bir stilin alt özelliklerini tekrar tekrar eşlemek yerine, genel stilleri jetonlar ve temalarla eşleştirir ve daha sonra her bir alt mülkü ayrı ayrı eşleriz.

Yukarıdaki örnekte, my-app-theme/headline/large stiline sahip bir Figma metin öğesi, Kullanıcı Arayüzü Paketi tanım dosyasına yazıldığında, metnin yazı tipinin myapp.sys.typescale.headline-large.font, boyutunun myapp.sys.typescale.headline-large.size olduğu vb. gösterilmektedir. Ardından, Compose kodu oluşturulduğunda, bir RelayText composable (Compose Materyali'nde Text composable'ı sarmalar) oluşturulur. Burada font parametresi MaterialTheme.typography.headlineLarge.fontFamily, size parametresiMaterialTheme.typography.headlineLarge.fontSize ve diğer adlar kullanılır.

Yapılandırma dosyası örnekleri için, tam olarak aynı biçimi kullanan yerleşik Material 3 ve Material 2 Design Kit yapılandırmalarına bakabilirsiniz. Dosyaları şuradan indirebilirsiniz:

Sınırlamalar

Şu anda, stillerin temalara çevrilmediği birkaç durum bulunmaktadır:

  • Bir metin öğesinin yalnızca bir bölümüne uygulanan metin stilleri (Metinde birden fazla stil bölümünde açıklandığı gibi)
  • Bir bileşenin farklı varyantlarına uygulanan farklı stiller varsa yalnızca bir stil çevrilir.