Android Studio में डिज़ाइन को कोड में बदलना

Figma से डिज़ाइन इंपोर्ट करें

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

1. पहले से कॉन्फ़िगर की गई Android Studio प्रोजेक्ट ZIP फ़ाइल डाउनलोड करें (यह इंस्टॉल रिले पेज के प्रोजेक्ट जैसा ही है).

2. फ़ाइल को अनज़िप करने के लिए उस पर दो बार क्लिक करें. इससे एक फ़ोल्डर बन जाता है, जिसे नमस्तेFigma. इसे अपने होम फ़ोल्डर में ले जाएं.

3. Android Studio पर वापस जाएं. फ़ाइल > खोलें, अपने होम पर जाएं फ़ोल्डर में, HeyFigma चुनें. इसके बाद, खोलें पर क्लिक करें.

4. प्रोजेक्ट खोलने पर, Android Studio आपसे पूछ सकता है कि क्या आपको प्रोजेक्ट. Trust Project पर क्लिक करें.

5. Android Studio में, फ़ाइल > नया > यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें....

   

6. यूज़र इंटरफ़ेस (यूआई) पैकेज इंपोर्ट करें डायलॉग में, अपनी Figma फ़ाइल का यूआरएल चिपकाएं और आगे बढ़ें पर टैप करें.

   

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

   

   ध्यान दें: अगर आपको Figma ऐक्सेस टोकन के बारे में कोई डायलॉग दिखता है, तो आगे बढ़ें Figma ऐक्सेस टोकन को सेट अप करने के लिए, के निर्देशों या निर्देशों को दोहराएं.

7. फ़ाइल डाउनलोड होने तक इंतज़ार करें. डाउनलोड होने के बाद, कॉम्पोनेंट किताब की झलक दिखेगी. बनाएं पर क्लिक करें.

   ध्यान दें: ऊपर दिए गए बटन पर, Android Studio के जिस वर्शन का इस्तेमाल किया जा रहा है उसके हिसाब से, ऊपर दिए गए बटन पर बनाएं के बजाय पूरा करें लिखा हो सकता है.

   

   ध्यान दें कि आपके प्रोजेक्ट में नई फ़ाइलें जोड़ी गई हैं — ये ऐसी होनी चाहिए आपके प्रोजेक्ट के हिस्से के तौर पर, सोर्स कंट्रोल पर भरोसा करते हैं. इसके Android व्यू में तो आपको यह जानकारी दिखेगी:

   

   • 
     app/ui-packages/hello_card/* कोड में कॉम्पोनेंट की जानकारी देने के लिए, सभी सोर्स ऐसेट का होना ज़रूरी है. ये फ़ाइलों का इस्तेमाल बिल्ड स्टेप में कोड जनरेशन के लिए किया जाता है.

   • 
     app/ui-packages/hello_card/hello_card.json वह JSON फ़ाइल जिसमें कॉम्पोनेंट की परिभाषा शामिल है (इसमें ये शामिल हैं लेआउट और अन्य प्रॉपर्टी).

   • 
     app/ui-packages/hello_card/fonts/* Jetpack Compose में कॉम्पोनेंट के साथ काम करने के लिए ज़रूरी फ़ॉन्ट फ़ाइलें.

   • app/ui-packages/hello_card/*.png या *.jpeg
     कॉम्पोनेंट को दिखाने के लिए ज़रूरी कोई भी इमेज ऐसेट.

   • 
     app/ui-packages/hello_card/VERSION.txt यूज़र इंटरफ़ेस (यूआई) इंपोर्ट करने के लिए इस्तेमाल किए गए Android Studio प्लगिन के लिए Relay का वर्शन पैकेज.

   • 
     app/ui-packages/hello_card/config.json झलक के लिए इस्तेमाल की जाने वाली थीम.

बिल्ड और कोड जनरेट करें

1. क्लिक करें अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है उसका इस्तेमाल कैसे करें.

   

2. बिल्ड का नतीजा देखने के लिए, बिल्ड टैब पर क्लिक करें.

   

   ध्यान दें: बिल्ड से जुड़ी समस्याओं के बारे में जानने के लिए, समस्या हल करने के सामान्य तरीकों के बारे में जानने के लिए यह पेज देखें.

3. जनरेट किया गया कोड अब आपके प्रोजेक्ट में जोड़ दिया गया है. यह जनरेट किया गया कोड है, इसलिए यह आपके प्रोजेक्ट के हिस्से के तौर पर, सोर्स कंट्रोल के लिए नहीं होना चाहिए. इस आपके प्रोजेक्ट के Android व्यू में, ये चीज़ें देखी जा सकती हैं:

   

   • 
     app/java (generated)/com/example/hellofigma/hellocard Jetpack Compose कोड और फ़ॉन्ट जनरेट किया गया है.

   • 
     app/java (generated)/com/google/relay/compose शेयर किया गया रनटाइम कोड, जिसका इस्तेमाल सभी यूज़र इंटरफ़ेस (यूआई) पैकेज में किया जाता है.

4. app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt खोलें. यह Figma कॉम्पोनेंट के लिए जनरेट किया गया Jetpack Compose फ़ंक्शन है. आपने लोगों तक पहुंचाया मुफ़्त में कॉम्पोनेंट की झलक भी देख सकता है.

   लेआउट, एसेट, और शैली की जानकारी को अब Figma से ट्रांसफ़र कर दिया गया है कोड करने के लिए.

   

   इस कोड में, Figma में जोड़े गए जवाब को अब ऊपर दी गई टिप्पणी में बदल दिया गया है और जनरेट किया गया कंपोज़ेबल.

    /**
    * Hello Card component used to display the image and the title content
    *
    * This composable was generated from the UI package ‘ hello_card’
    * Generated code; do not edit directly
    */
   @Composable
   fun HelloCard(modifier: Modifier = Modifier) {...
   

कॉम्पोनेंट और इंटीग्रेट करना ऐप्लिकेशन को चलाओ

आइए, अब कॉम्पोनेंट को मुख्य गतिविधि से इंटिग्रेट करते हैं.

1. app/java/com/example/hellofigma/MainActivity.kt में, इंपोर्ट में जोड़ें सेक्शन पर जाएं:

   import com.example.hellofigma.hellocard.HelloCard
   

2. उसी फ़ाइल में और नीचे, नीचे दिए गए कोड को 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) {
                       // Greeting("Android") // Delete this line
                       HelloCard()  // Add this line
                   }
               }
           }
       }
   }
   

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

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard() // Change this line
       }
   }
   

4. पक्का करें कि टूलबार में कोई डिवाइस चुना गया हो.

5. टूलबार में ▶ पर क्लिक करके प्रोजेक्ट चलाएं.

   

   एम्युलेटर चालू हो जाएगा, प्रोजेक्ट बन जाएगा, और आपका ऐप्लिकेशन चालू हो जाएगा.

   

   बधाई हो! आपने अपनी पहली Figma को सफलतापूर्वक शामिल कर लिया है कॉम्पोनेंट को Jetpack Compose ऐप्लिकेशन में जोड़ दिया जाएगा!

अगला चरण

डिज़ाइन को अपडेट करना और लागू करना

अब जब आपके पास पूरी तरह से काम करने का उदाहरण है, तो आइए जानते हैं कि Google Ads की डिज़ाइन करने और अपना कोड फिर से जनरेट करने में मदद मिलती है.