Stilleri Oluşturma temasıyla eşleme

Figma'daki Stiller'den Compose'daki Temaya Eşleme

Figma, tasarımcıların bir tasarım öğesine stil uygulamasını sağlar. Stil, yeniden kullanılabilir özellikleri (ör. renkler veya tipografi) toplama. Paydaşların ihtiyaçlarını bir ekip, bir kullanıcı kullandığında tüm tasarımlardaki özellikleri tek bir tasarım öğesini güncellemek. Relay'i, Figma’yı çevirecek şekilde ayarlayabilirsiniz stil özelliklerini Jetpack Compose temalarına uyarlayın.

Figma stilleri ve Oluştur temaları arasındaki eşleme yapılandırma dosyası.

Yapılandırma dosyası, Figma stilleri ile Temaları oluştur'u eşler

Örnek olarak, aşağıda gösterilen Figma tasarımında Google'ın Material 3 tasarımındaki stiller kullanılıyor. Tasarım Kiti Birincil - Büyük başlık için yazı tipi M3/başlık/büyük ve rengi M3/sys/ışık/birincil'dir.

Figma'da 3. malzeme stilleri

M3 Tasarım Kiti stil çevirisi etkinken tasarımı içe aktarırsak Birincil - Büyük başlı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 Figma'da olduğu gibi kullanın. Sonra Android'de Studio'da, Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar... seçeneğini tıklayıp Figma stillerini Compose temasına çevirin.

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

  • Doğrudan Google'ın Material 3 Design Kit'ten geliyorlarsa Figma için (M3/body/medium or M3/sys/light/primary biçimindedir) ardından Material 3 Design Kit yapılandırması seçeneğini belirleyin.
  • Doğrudan Google'ın Material 2 Design Kit'ten geliyorlarsa Figma için (01. Primary/500 or Subtitle 1 biçimindedir) açılır menüden Material 2 Design Kit yapılandırması seçeneği.

  • Kendi stil tanımlarınız varsa Özel yapılandırma seçeneğini belirleyin ve 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 stillerde olmayan stiller varsa içe aktarma iletişim kutusunda, eşlenmemiş her stil için bir uyarı görüntülenir. Her biri eşlenmemiş stil, gerçek değerine çevrilir. Uyarılar başlangıçta daraltıldı; uyarılar banner'ını tıklayarak genişletin. Her uyarıda Figma dosyasında, uyarıya neden olan katmana bağlantı eklemeniz gerekir.

İçe aktarma iletişim kutusundaki uyarılar

İçe aktarma işleminden sonra, stil yapılandırması Android Studio'da bulunur. belirler. ui-package-resources/style-mappings içinde arayın dizin.

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

Figma stillerini Tema oluştur'a dönüştürme işlemi iki adımdan oluşur:

  1. Kullanıcı Arayüzü Paketindeki Figma stili, kullanıcı arayüzünde bir tasarım jetonuna dönüştürülür Android cihazınızdaki UI Package klasöründe paket tanımı JSON dosyası Studio projesi.
  2. Bir Kullanıcı Arayüzü Paketi tanım dosyasındaki tasarım jetonu, Android Studio projenizde tema kodu oluşturun.

Özel yapılandırma dosyasının biçimi (JSON biçimindedir) bu adımlardan bahsedeceğim. Basit bir özel yapılandırma dosyası örneği: yalnızca renk stillerini işler:

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

figma (1. adımı belirtir) ve compose olmak üzere iki üst düzey bölüm vardır (2. adımı belirtir). Her ikisinde de colors bölümü vardır:

  • figma öğesinin colors bölümü bir Figma stilini ve buna karşılık gelen kullanıcı arayüzü paketi tanım dosyasına yazılması gereken tasarım jetonu.
  • compose öğesinin colors bölümü, Kullanıcı Arayüzü Paketi'ndeki bir tasarım jetonunu belirtiyor ve ilgili kod snippet'ini inceleyerek, yazmanız gerekir.

Yukarıdaki örnek yapılandırmada, rengi kullanan her şey Figma'daki my-app-theme/sys/light/primary öğesinin rengi şu şekilde yazılır: Kullanıcı Arayüzü Paketi tanım dosyasındaki myapp.sys.color.primary. Ardından, kod sırasında bu renk MaterialTheme.colorScheme.primary şeklinde yazılır. Oluştur'u tıklayın.

compose bölümünde options bölümü de bulunur. Bu bölümde pakete dahil edilir. Yukarıdaki örnekte, MaterialTheme, androidx.compose.material3 paketinde bulunduğundan oluşturulan herhangi bir koda içe aktarılmalıdır.

Tipografi stillerini eşlemek, renk stillerinden biraz daha fazla işlem gerektirir. İşte Yukarıdakiyle aynı örneği, ancak tipografi stilleri eklenmiş halde:

{
  "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 tarzının standartların birçok alt mülkten oluşur. Figma ve Oluşturma'da bir tipografi stili yazı tipinin adını, yazı tipi kalınlığını, boyutunu, harf aralığını ve satır aralığını içermelidir. başka birçok metrik bulunur. Her stilin tarzını tek tek eşlemek yerine tekrar tekrar alt mülklere eklemek yerine, genel stilleri oluşturup her bir alt mülkü ayrı ayrı eşlemeniz gerekir.

Yukarıdaki örnekte, my-app-theme/headline/large, Kullanıcı Arayüzü Paketi tanım dosyasına yazılır. metnin yazı tipi myapp.sys.typescale.headline-large.font, boyutu myapp.sys.typescale.headline-large.size vb. Bu durumda, Oluştur kodu bir RelayText composable (Text composable'ı Compose Material (Materyal Oluştur) oluşturulur. Burada font parametresi MaterialTheme.typography.headlineLarge.fontFamily, size parametresi MaterialTheme.typography.headlineLarge.fontSize vb.

Yapılandırma dosyası örnekleri için yerleşik Material 3 ve Tam olarak aynı biçimi kullanan Malzeme 2 Tasarım Kiti yapılandırmaları. Şunları yapabilirsiniz: dosyaları buradan indirin:

Sınırlamalar

Şu anda stillerin farklı dillere çevrilmediği temalar:

  • Metin öğesinin yalnızca bir bölümüne uygulanan metin stilleri (açıklandığı şekilde) Metinde birden çok stil bölümünde yer alan)
  • Bir bileşenin farklı varyantlarına farklı stiller uygulanmışsa yalnızca bir stil çevrilir.
ziyaret edin. ziyaret edin.