डिज़ाइन के वैरिएंट मैनेज करना

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

शुरुआत की जगह

पेड़ के वैरिएंट वाला न्यूज़ कार्ड

हम एक Figma फ़ाइल से शुरुआत करेंगे, जिसमें समाचार कार्ड कॉम्पोनेंट तीन वैरिएंट:

  • हीरो-आइटम सबसे अहम समाचार लेख के लिए है
  • लेख-आइटम किसी सामान्य लेख के लिए है
  • ऑडियो-आइटम उस लेख के लिए है जिसे पढ़ने के बजाय सुना जाता है

Figma का उदाहरण कॉपी करें

इस ट्यूटोरियल के लिए, हम उदाहरण के तौर पर मौजूदा Figma फ़ाइल का इस्तेमाल करेंगे. पक्का करें कि आपने अपने Figma खाते में लॉग इन किया है.

  1. अपने कंप्यूटर पर HeyNews.fig डाउनलोड करें.

  2. Figma में, फ़ाइल ब्राउज़र पर जाएं. बाईं ओर के साथ, ड्राफ़्ट. आपको एक + आइकॉन दिखेगा — + आइकॉन पर क्लिक करें. इसके बाद, इंपोर्ट करें पर क्लिक करें. अभी-अभी डाउनलोड की गई helloNews.fig फ़ाइल चुनें. इसमें लग सकता है 10 सेकंड से लेकर एक मिनट तक कहीं भी.

  3. इंपोर्ट की गई फ़ाइल को Figma में खोलें.

यूज़र इंटरफ़ेस (यूआई) पैकेज बनाएं

Figma प्लगिन के लिए रिले हमारे कॉम्पोनेंट में ज़्यादा जानकारी जोड़ता है, ताकि हम जो हमारे कॉम्पोनेंट का इस्तेमाल अपने कोड में करेंगे.

  1. अपनी फ़ाइल में Figma प्लगिन के लिए रिले खोलें (मेन्यू बार में: प्लगिन > रिले Figma के लिए). शुरू करें पर क्लिक करें.

  2. कॉम्पोनेंट चुनें और यूज़र इंटरफ़ेस (यूआई) पैकेज बनाएं पर क्लिक करें.

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

  3. यूज़र इंटरफ़ेस (यूआई) पैकेज चुनने के बाद, खास जानकारी वाले बॉक्स में जानकारी जोड़ें. इसके लिए उदाहरण के लिए: “समाचार कार्ड का कॉम्पोनेंट, जिसे किसी सूची में खबरों से जुड़े आइटम दिखाने के लिए बनाया गया हो”.

    प्लगिन के लिए खास जानकारी वाला बॉक्स

नाम वाला वर्शन सेव करें

अब आपने यूज़र इंटरफ़ेस (यूआई) पैकेज बना लिया है, तो अपने कॉम्पोनेंट को तैयार करें, ताकि उसे डेवलपमेंट टीम के साथ शेयर किया जा सके.

  1. अगर Figma Relay प्लगिन नहीं खुला है, तो उसे खोलें.
  2. डेवलपर के साथ शेयर करें पर क्लिक करें.
  3. डेवलपर के साथ शेयर करें स्क्रीन से, वर्शन इतिहास सेव करें सेक्शन में नए वर्शन का नाम और जानकारी डाली जा सकती है.

  4. सेव करें पर क्लिक करें.

    उदाहरण का टाइटल: शुरुआती नया कार्ड

    उदाहरण के तौर पर दी गई जानकारी: पहली बार खबरों वाले लेख में दिए गए आइटम को दोहराना

Android Studio प्रोजेक्ट डाउनलोड करें

इस ट्यूटोरियल के Android Studio वाले हिस्से के लिए, हम पहले से कॉन्फ़िगर Android Studio प्रोजेक्ट. इस प्रोजेक्ट में ऐसा ऐप्लिकेशन है जो समाचार रिपोर्ट दिखाता है लेख पढ़ें.

  1. नमस्तेNews.zip फ़ाइल का सैंपल डाउनलोड करें.
  2. फ़ाइल को अनज़िप करने के लिए उस पर दो बार क्लिक करें, जिससे एक फ़ोल्डर बन जाएगा नमस्तेNews. इसे अपने होम फ़ोल्डर में ले जाएं.
  3. Android Studio पर वापस जाएं. फ़ाइल > खोलें, अपने होम पर जाएं फ़ोल्डर में, HeyNews चुनें. इसके बाद, खोलें पर क्लिक करें.
  4. प्रोजेक्ट खोलने पर, Android Studio आपसे पूछेगा कि क्या आपको प्रोजेक्ट. Trust Project पर क्लिक करें.

Android Studio में इंपोर्ट करें

अब प्रोजेक्ट में हमारा Figma कॉम्पोनेंट इंपोर्ट करें.

  1. Figma पर वापस जाकर, News कार्ड ट्यूटोरियल Figma फ़ाइल का यूआरएल कॉपी करें. हम हमारे कॉम्पोनेंट इंपोर्ट करने के लिए इस यूआरएल का इस्तेमाल करें. इसके सबसे ऊपर दाएं कोने में Figma के साथ, शेयर करें बटन पर क्लिक करें. इसके बाद, खुलने वाले डायलॉग बॉक्स में, लिंक कॉपी करें.

    फ़ाइल टैब पर लिंक विकल्प कॉपी करें

  2. Android Studio में, HelloNews प्रोजेक्ट पर स्विच करें. फ़ाइल > नया > इंपोर्ट करें यूज़र इंटरफ़ेस (यूआई) पैकेज... ऐक्सेस किया जा सकता है.

    फ़ाइल मेन्यू में यूआई पैकेज इंपोर्ट करें... विकल्प

  3. अपनी Figma फ़ाइल का यूआरएल चिपकाएं और आगे बढ़ें पर क्लिक करें.

    यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करने का डायलॉग बॉक्स
    कीचेन सिस्टम डायलॉग
    के निर्देश
    1. फ़ाइल को फ़ेच करने के बाद (इसमें कुछ समय लग सकता है), पूरा करें.
    कॉम्पोनेंट की झलक

  4. क्लिक करें 'प्रोजेक्ट बनाएं' बटन अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है उसका इस्तेमाल कैसे करें. इसमें एक मिनट या कुछ ज़्यादा समय लग सकता है.

    टूलबार में 'बनाएं' बटन

ऐप्लिकेशन और कॉम्पोनेंट

  1. Android व्यू में, खोलें app/java/com/example/hellonews/ui/home/HomeScreen.kt, आपको ऐप्लिकेशन की एक झलक दिखेगी, जिसमें सादा लेख प्रारूप, जिसमें ऑडियो कहानियों के ऊपर प्रिंट कहानियां शामिल हैं.

    ऐप्लिकेशन की झलक

  2. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt खोलें. यह यह हमारे Figma कॉम्पोनेंट के लिए जनरेट किया गया Jetpack Compose कोड है. झलक देखते हैं, तो हम देख सकते हैं कि Newscard कॉम्पोनेंट के तीन वैरिएंट में Figma से कोड में अनुवाद किया गया है. आइए, कोड के बारे में गहराई से जानते हैं.

    Newscard कॉम्पोनेंट की झलक

  3. View के ईनम की मदद से, हम यह चुन पाते हैं कि इस कॉम्पोनेंट के लिए कौनसा वैरिएंट इस्तेमाल करना है. ईनम का नाम और उसकी वैल्यू, हमारे Figma कॉम्पोनेंट. इसका इस्तेमाल हमारे Newscard में view पैरामीटर में किया जाता है कंपोज़ेबल.

    Figma और उससे जुड़े View enum के वैरिएंट

  4. Newscard कंपोज़ेबल को यूज़र इंटरफ़ेस (यूआई) पैकेज से जनरेट किया गया. इसमें View टाइप का पैरामीटर, जो समाचार कार्ड के वैरिएंट को इस पर सेट करता है: इंस्टैंशिएट करें.

    package com.example.myapplication.newscard

import ...

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
* News card component intended to display news items for a list.
*
* This composable was generated from the UI Package 'news_card'.
* Generated code; do not edit directly
*/
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem
) {...}

अगला

हम अभी Newscard का इस्तेमाल करने के लिए तैयार नहीं हैं. कॉम्पोनेंट को यह पता नहीं होता कि कैसे का इस्तेमाल करें. इसलिए, अगर हमें इस कॉम्पोनेंट को जोड़ना था, लेकिन अब हमें बस एक ही तरह की समाचार मिलनी चाहिए दोहराया गया. हमें यह बताने का एक तरीका चाहिए कि Newscard के कौनसे हिस्से भरे जाने चाहिए के साथ कैसे काम करता है.

कॉन्टेंट पैरामीटर

इस सेक्शन में, हम Newscard कॉम्पोनेंट में कॉन्टेंट पैरामीटर जोड़ेंगे.