थीम लिखने के लिए स्टाइल को मैप करना

Figma की स्टाइल से Compose की थीम तक मैप करना

Figma की मदद से, डिज़ाइनर किसी डिज़ाइन के एलिमेंट पर स्टाइल लागू कर सकते हैं. स्टाइल को फिर से इस्तेमाल किया जा सकता है प्रॉपर्टी का कलेक्शन, जैसे कि रंग या टाइपोग्राफ़ी. क्योंकि यह एक ही जगह से परिभाषित किया गया है, तब एक टीम सभी डिज़ाइन में प्रॉपर्टी को परिभाषित और अपडेट कर सकती है, सिंगल डिज़ाइन एलिमेंट को अपडेट करने के बारे में ज़्यादा जानें. रिले को सेट अप किया जा सकता है, ताकि यह Figma का अनुवाद कर सके Jetpack Compose की थीम के मुताबिक स्टाइल.

Figma स्टाइल और Compose थीम के बीच की मैपिंग का इस्तेमाल करके, कॉन्फ़िगरेशन फ़ाइल है.

कॉन्फ़िगरेशन फ़ाइल, Figma के स्टाइल और कंपोज़ थीम को मैप करती है

उदाहरण के लिए, नीचे दिखाई गई Figma के डिज़ाइन में, Google के Material 3 वाले प्रॉडक्ट की स्टाइल का इस्तेमाल किया गया है डिज़ाइन किट. प्राइमरी - टाइटल बड़ा है टेक्स्ट के लिए, यह फ़ॉन्ट M3/title/large और इसका रंग M3/sys/light/primary है.

Figma में 3 स्टाइल का मटीरियल

अगर हम M3 डिज़ाइन किट स्टाइल ट्रांसलेशन को चालू करके डिज़ाइन इंपोर्ट करते हैं, तो यह कोड प्राइमरी - टाइटल बड़ा टेक्स्ट के लिए जनरेट किया जाता है:

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

इस सुविधा का इस्तेमाल करने के लिए, स्टाइल का इस्तेमाल ठीक उसी तरह करें जैसे आप आम तौर पर Figma में करते हैं. इसके बाद, Android में स्टूडियो के लिए, फ़ाइल > नया > यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें.... इसके बाद, देखें 'लिखें' थीम में Figma के स्टाइल का अनुवाद करें.

अब आपको अपने डिज़ाइन के अनुवाद के लिए एक कॉन्फ़िगरेशन चुनना होगा शैलियां:

  • अगर वे सीधे Google की Material 3 डिज़ाइन किट से मिलती हैं Figma के लिए (जिसका फ़ॉर्मैट M3/body/medium or M3/sys/light/primary है), इसके बाद, मटीरियल 3 डिज़ाइन किट कॉन्फ़िगरेशन विकल्प चुनें.
  • अगर वे सीधे Google की Material 2 डिज़ाइन किट से मिलती हैं Figma (जिसका फ़ॉर्मैट 01. Primary/500 or Subtitle 1 है) के लिए, फिर उसे चुनें मटीरियल 2 डिज़ाइन किट कॉन्फ़िगरेशन का विकल्प.

  • अगर आपकी अपनी स्टाइल परिभाषाएं हैं, तो पसंद के मुताबिक कॉन्फ़िगरेशन विकल्प पर जाकर वह फ़ाइल चुनें जिसमें मैपिंग Figma स्टाइल और कंपोज़ थीम के बीच में बदलाव करें (इनके बारे में इस सेक्शन में बताया गया है).

    यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करने का डायलॉग बॉक्स

अगर Figma के डिज़ाइन में ऐसे स्टाइल हैं जो चुने गए टेक्स्ट में नहीं हैं कॉन्फ़िगरेशन के लिए, इंपोर्ट डायलॉग बॉक्स, मैप नहीं की गई हर स्टाइल के लिए चेतावनी दिखाता है. हर मैप नहीं की गई स्टाइल को इसके लिटरल वैल्यू में बदला जाता है. चेतावनियां ये हैं शुरुआत में इसे छोटा किया गया था; बड़ा करने के लिए चेतावनियों वाले बैनर पर क्लिक करें. हर चेतावनी में Figma फ़ाइल की उस लेयर से लिंक करें जिसकी वजह से चेतावनी दिखती है.

इंपोर्ट डायलॉग में चेतावनियां

इंपोर्ट करने के बाद, स्टाइल कॉन्फ़िगरेशन Android Studio में दिखेगा प्रोजेक्ट. इन्हें ui-package-resources/style-mappings में देखें डायरेक्ट्री.

कस्टम अनुवादों के लिए कॉन्फ़िगरेशन फ़ाइलें

Figma स्टाइल के टेक्स्ट को 'Compose' थीम में अनुवाद करने के दो चरण हैं:

  1. यूज़र इंटरफ़ेस (यूआई) पैकेज में, Figma स्टाइल को यूज़र इंटरफ़ेस (यूआई) में डिज़ाइन टोकन में बदला गया आपके Android डिवाइस के यूज़र इंटरफ़ेस (यूआई) पैकेज फ़ोल्डर में पैकेज डेफ़िनिशन JSON फ़ाइल Studio प्रोजेक्ट पर जाएं.
  2. यूज़र इंटरफ़ेस (यूआई) पैकेज परिभाषा फ़ाइल में मौजूद डिज़ाइन टोकन को अपने Android Studio प्रोजेक्ट में थीम कोड लिखें.

कस्टम कॉन्फ़िगरेशन फ़ाइल का फ़ॉर्मैट (जो JSON फ़ॉर्मैट में होता है) ये दो चरण हैं. यहां एक सामान्य कस्टम कॉन्फ़िगरेशन फ़ाइल का उदाहरण दिया गया है, जो सिर्फ़ रंग स्टाइल हैंडल करता है:

{
  "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 (जिसमें पहले चरण के बारे में बताया गया है) और compose (जो दूसरे चरण के बारे में बताता है). इन दोनों में एक colors सेक्शन शामिल होता है:

  • figma के colors सेक्शन में, फ़िग्मा स्टाइल और इससे जुड़ी डिज़ाइन टोकन, जिसे यूज़र इंटरफ़ेस (यूआई) पैकेज डेफ़िनिशन फ़ाइल में लिखा जाना चाहिए.
  • compose का colors सेक्शन, यूज़र इंटरफ़ेस (यूआई) पैकेज में डिज़ाइन टोकन के बारे में बताता है परिभाषा फ़ाइल और संबंधित कोड स्निपेट होना चाहिए, जिसे आपका लिखें कोड.

ऊपर दिए गए उदाहरण कॉन्फ़िगरेशन में, रंग का इस्तेमाल करने वाली किसी भी चीज़ Figma में my-app-theme/sys/light/primary के रंग को इस तरह लिखा गया है यूज़र इंटरफ़ेस (यूआई) पैकेज परिभाषा फ़ाइल में myapp.sys.color.primary. फिर, कोड के दौरान जेनरेशन, वह रंग MaterialTheme.colorScheme.primary के रूप में लिखा गया है लिखें.

compose सेक्शन में एक options सेक्शन भी होता है. इसमें यह बताया जाता है कि वह पैकेज जिसमें कोई विशेष कोड प्रतीक मौजूद हो. ऊपर दिए गए उदाहरण में बताया गया है कि MaterialTheme, androidx.compose.material3 पैकेज में शामिल है. इसलिए, किसी भी जनरेट किए गए कोड में इंपोर्ट किया जाना चाहिए.

मैप में कलर स्टाइल की तुलना में टाइपोग्राफ़ी के अलग-अलग स्टाइल को मैप करना ज़्यादा आसान होता है. यहां है जैसा ऊपर दिया गया है, लेकिन इसमें टाइपोग्राफ़ी की स्टाइल जोड़ी गई हैं:

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

टाइपोग्राफ़ी सेक्शन की बनावट से यह पता चलता है कि टाइपोग्राफ़ी की स्टाइल इसमें कई सब-प्रॉपर्टी शामिल होती हैं. 'फ़िग्मा' और 'लिखें' बॉक्स में, टाइपोग्राफ़ी की एक स्टाइल इसमें टाइपफ़ेस का नाम, फ़ॉन्ट की मोटाई, साइज़, अक्षरों के बीच की दूरी, और लाइन शामिल है ऊंचाई, कई अन्य चीज़ें शामिल हैं. हर स्टाइल के लिए मैप बनाने की ज़रूरत नहीं है सब-प्रॉपर्टी बार-बार बदलती रहती हैं. इसके बजाय, हम सभी स्टाइल को टोकन के हिसाब से मैप करते हैं और फिर हर सब-प्रॉपर्टी को अलग-अलग मैप करते हैं.

ऊपर दिए गए उदाहरण में बताया गया है कि अगर स्टाइल के साथ Figma वाला टेक्स्ट आइटम मौजूद है, तो my-app-theme/headline/large को यूज़र इंटरफ़ेस (यूआई) पैकेज डेफ़िनिशन फ़ाइल में लिखा गया है, टेक्स्ट का फ़ॉन्ट myapp.sys.typescale.headline-large.font है, इसका साइज़ myapp.sys.typescale.headline-large.size वगैरह. इसके बाद, जब कंपोज़ कोड यह होता है जनरेट हुआ, एक RelayText कंपोज़ेबल (जो Text कंपोज़ेबल को रैप करता है कॉन्टेंट कंपोज़ करें) बनाया गया है, जिसमें font पैरामीटर MaterialTheme.typography.headlineLarge.fontFamily, size पैरामीटर है MaterialTheme.typography.headlineLarge.fontSize और इसी तरह के अन्य विकल्प.

कॉन्फ़िगरेशन फ़ाइलों के उदाहरण देखने के लिए, पहले से मौजूद Material 3 को देखें और मटीरियल 2 डिज़ाइन किट कॉन्फ़िगरेशन, जो बिलकुल एक जैसे फ़ॉर्मैट का इस्तेमाल करता है. आप फ़ाइलें यहां से डाउनलोड करें:

सीमाएं

फ़िलहाल, ऐसी कई स्थितियां हैं जिनमें शैलियों का अनुवाद थीम:

  • टेक्स्ट स्टाइल, जो टेक्स्ट एलिमेंट के सिर्फ़ किसी हिस्से पर लागू होते हैं (जैसा कि बताया गया है) टेक्स्ट में कई स्टाइल में
  • अगर किसी कॉम्पोनेंट के अलग-अलग वैरिएंट पर अलग-अलग स्टाइल लागू किए गए हैं, तो सिर्फ़ एक शैली का अनुवाद किया जाता है.