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

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

कॉन्टेंट पैरामीटर जोड़ें

1. अपनी Figma फ़ाइल में, कॉम्पोनेंट चुनें और Figma प्लगिन के लिए रिले खोलें (प्लगिन > Figma के लिए रिले).

   

2. Figma की मुख्य विंडो में, ⌘ + क्लिक करके टाइटल लेयर चुनें Mac पर या Windows और Linux पर Ctrl + click करें. फिर, प्लग इन में आगे + पर क्लिक करें “पैरामीटर” में जाएं और लेयर के लिए पैरामीटर जोड़ने के लिए, टेक्स्ट-कॉन्टेंट चुनें.

   

3. टाइटल टेक्स्ट कॉन्टेंट पैरामीटर का नाम बदलने के लिए, इसे नाम में डालें. इस ट्यूटोरियल के लिए टाइटल डालें.

   

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

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

आइए अब इस वर्शन को कोड में आयात किए जाने के लिए तैयार के रूप में चिह्नित करते हैं.

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

3. डेवलपर के साथ शेयर करें स्क्रीन पर, वर्शन का नाम और जानकारी डालें.

   उदाहरण के लिए टाइटल: नमस्ते वर्ल्ड कार्ड V3

   ब्यौरा का उदाहरण: जोड़े गए पैरामीटर

Android Studio में कॉम्पोनेंट को अपडेट करें

चलिए, Android Studio में कॉम्पोनेंट को अपडेट करते हैं.

1. Android Studio में, पक्का करें कि प्रोजेक्ट टूल विंडो Android व्यू में हो. इसके बाद, app/ui-packages/hello_card/ पर राइट क्लिक करें और यूज़र इंटरफ़ेस अपडेट करें पर क्लिक करें पैकेज.

   

2. अपना प्रोजेक्ट फिर से बनाने के लिए, पर क्लिक करें.

   

   app/java/com/example/hellofigma/hellocard/HelloCard.kt खोलने पर, आपको ध्यान दें कि पैरामीटर जोड़ा गया है: title. पैरामीटर का नाम है उस कॉन्टेंट पैरामीटर का नाम जिसे हमने Figma में बताया है:

   

3. app/java/com/example/hellofigma/MainActivity.kt खोलें.

4. title में कोई वैल्यू जोड़ने के लिए, MainActivity क्लास की एक लाइन बदलें पैरामीटर:

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               HelloFigmaTheme {
                   // A surface container using the 'background' color from the theme
                   Surface(color = MaterialTheme.colors.background) {
                       HelloCard(title="Balloon World!") // Change this line
                   }
               }
           }
       }
   }
   

5. उसी फ़ाइल में नीचे जाकर, कंपोज़ेबल की झलक में, एक लाइन में बदलाव करें:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard(title="Balloon World!") // Change this line
       }
   }
   

6. अपना प्रोजेक्ट फिर से बनाएं और झलक में अपडेट किया गया कॉम्पोनेंट देखें! नोट जोड़ें कि अब नई पैरामीटर वैल्यू दिख रही है.

   

7. एम्युलेटर में वही अपडेट देखने के लिए ऐप्लिकेशन चलाएं.

   हुर्रे! आपने रिले वर्कफ़्लो की बुनियादी बातें जान ली हैं.

अगला चरण

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