जैसा कि हम सभी जानते हैं, उत्पाद डेवलपर के काम का एक हिस्सा फिगमा से डिजाइन को पसंद के ढांचे के साथ कोड में बदलना है, और यदि परियोजना महत्वपूर्ण है तो यह जटिल हो सकता है। डिज़ाइनर-टू-डेवलपर हैंडऑफ़ का सार यह है कि डेवलपर डिज़ाइन से स्क्रीन को सटीक और पिक्सेल-परफेक्ट घटकों में लागू करता है।  इस लेख में, हम Figma से एक एप्लिकेशन बनाने और घटकों को रिएक्ट में आयात करने के लिए AWS एम्पलीफाई स्टूडियो की कार्यक्षमता का विस्तार करेंगे। एम्पलीफाई की मदद से फिगमा और रिएक्ट के बीच का कनेक्शन पुन: प्रयोज्य रिएक्ट घटकों को बनाता है जो आपको समय और कोड की लंबी लाइन लिखने से बचाते हैं। फिगमा से कोड में रूपांतरण प्रक्रिया निर्बाध है और डेवलपर्स के लिए तेजी से निर्माण करने के लिए इसे कुशल बनाती है (शायद यही वजह है कि     )। एबोड ने अरबों के लिए फिगमा का अधिग्रहण किया  आवश्यक शर्तें  इस गाइड को समझने और पूरा करने के लिए, निम्नलिखित की आवश्यकता है:  एक फिगमा खाता। साइन-अप   है मुफ़्त    पैकेज स्थापना के लिए हमारी स्थानीय मशीन पर स्थापित नोड>= 14.0.0 और npm>= 5.6  एक कोड संपादक  हमारे टर्मिनल पर एडब्ल्यूएस एम्पलीफाई सीएलआई स्थापित करें। यह आदेश चलाएँ:    npm install -g @aws-amplify/cli  जावास्क्रिप्ट और प्रतिक्रिया का ज्ञान  एडब्ल्यूएस खाता है। यहां एक खाते के लिए पंजीकरण  करें  Figma पर टेम्प्लेट UI किट बनाना  UI किट से रिएक्ट घटक बनाने से पहले, हमें Figma प्रोजेक्ट सेट करना होगा। एक बार Figma पर, खाता बनाने के बाद   में जाएँ और   ।  AWS समुदाय AWS Amplify UI किट Figma फ़ाइल खोजें  UI किट की एक प्रति को डुप्लिकेट या क्लोन करने के लिए "एक प्रति प्राप्त करें" पर क्लिक करें।   Amplify UI किट कुछ पूर्व-निर्मित पृष्ठों के साथ स्थापित होती है, जो इस प्रकार हैं:    : यह पेज एडब्ल्यूएस एम्पलीफाई स्टूडियो से जुड़ता है, जिसमें पूर्व-निर्मित घटकों के लिए सभी शैलियाँ शामिल हैं। इस पृष्ठ की सामग्री को बदलने से Figma घटकों से रिएक्ट UI लाइब्रेरी का स्वरूप प्रभावित होगा। प्रिमिटिव्स पेज    : यह पृष्ठ आपको घटकों को संपादित करने, बदलने और बनाने का नियंत्रण देता है, और यह पूर्व-निर्मित घटकों के साथ आता है। मेरे घटक पृष्ठ    : यह पृष्ठ मेरे घटक पृष्ठ से कुछ कस्टम घटकों के उदाहरण डिज़ाइन दिखाता है। उदाहरण पृष्ठ  यह ट्यूटोरियल माई कंपोनेंट्स पेज से दो घटकों का उपयोग करेगा:     ।  नवबार और फॉर्मचेकआउट यूआई  एम्पलीफाई प्रोजेक्ट बनाना  Figma में सेटअप पूर्ण होने के साथ, एक नया Amplify प्रोजेक्ट बनाने के लिए AWS कंसोल पर जाएं। अपने   में लॉग इन करें, और AWS Amplify खोजें।  खाते  सेवाओं की सूची से AWS Amplify का चयन करें। एक बार   डैशबोर्ड में,   बटन पर क्लिक करें और ड्रॉपडाउन से   चुनें।  ऑल ऐप्स न्यू ऐप एक ऐप बनाएं  ऐप को एक नाम दें और ऐप बनाने के लिए कन्फर्म डिप्लॉयमेंट पर क्लिक करें।   एम्प्लीफाई प्रोजेक्ट के परिनियोजन के साथ, आइए एक नया रिएक्ट ऐप बनाएं।  एक प्रतिक्रिया ऐप बनाना  एक नया रिएक्ट ऐप बनाने के लिए, अपने टर्मिनल पर जाएँ और निम्नलिखित कमांड में पेस्ट करें:    npx create-react-app no-code  यह कमांड एक सुंदर और स्केलेबल वेब एप्लिकेशन बनाने के लिए आवश्यक सभी फाइलों और फ़ोल्डरों को अनपैक करता है।  एम्पलीफाई स्टूडियो लॉन्च करें  हमारे रिएक्ट ऐप को इंस्टॉल करने के बाद, अब प्रोजेक्ट लॉन्च करने का समय आ गया है। नो कोड की स्टेजिंग प्रदर्शित करने के लिए लॉन्च स्टूडियो पर क्लिक करें।   लॉन्च स्टूडियो बटन पर क्लिक करें क्योंकि यह आपको   के स्टेजिंग वातावरण दिखाने वाले पेज पर ले जाता है।  बिना कोड  यहां, हम बहुत सारे काम करने में सक्षम होंगे जैसे डेटा मॉडल बनाना, प्रमाणीकरण, आदि। लेकिन हमारा फोकस डिजाइन टैब के तहत यूआई लाइब्रेरी पर होगा।  प्रारंभ करें बटन पर क्लिक करें।   Figma के साथ सिंक करें। यह डायलॉग बॉक्स आपको   से Figma फ़ाइल लिंक पेस्ट करने की अनुमति देगा।  My Components पेज  यदि आप पहली बार यह कदम उठा रहे हैं, तो इसे आपके Figma खाते तक पहुँचने के लिए प्रमाणीकरण की आवश्यकता हो सकती है।  Figma से घटक ला रहा है  Figma से खींचे गए घटकों के सभी परिवर्तनों को स्वीकार करें।   हम एम्पलीफाई स्टूडियो में Figma फ़ाइल से सभी UI घटकों को देखने में सक्षम होंगे।     के आयातित घटकों से FormCheckout वही है जो Amplify Studio में प्रदर्शित होता है। Figma  प्रतिक्रिया में लाए गए घटकों के साथ कार्य करना  अब जब हमारे पास एम्प्लीफाई स्टूडियो में यूआई घटक हैं, तो हमारे पास हमारे रिएक्ट एप्लिकेशन में सभी यूआई घटक होने चाहिए।  अपने ऐप को एम्पलीफाई स्टूडियो से जोड़ने के लिए, हमें स्थानीय सेटअप निर्देश लिंक का उपयोग करके घटकों को हमारे स्रोत कोड में खींचने और प्रोजेक्ट रूट फ़ोल्डर से कमांड चलाने की आवश्यकता है।   याद रखें कि इस कमांड को काम करने के लिए, विश्व स्तर पर एडब्ल्यूएस एम्पलीफाई सीएलआई स्थापित करें, जैसा कि पूर्वापेक्षाएँ अनुभाग में बताया गया है।  कमांड चलाने से हमारे प्रोग्राम को एक प्राधिकरण संदेश के साथ संकेत मिलेगा।   रिएक्ट ऐप को अनुमति देने के लिए हाँ पर क्लिक करें। इसके बाद, घटकों को खींचते समय संकेतों की एक श्रृंखला दिखाई देती है। प्रश्नों के लिए डिफ़ॉल्ट स्वीकार करें।  यदि आप टर्मिनल में चुनौतियों या किसी त्रुटि लॉग संदेशों का सामना करते हैं, तो संभवतः यह होगा कि आपने AWS को कॉन्फ़िगर नहीं किया है।  यदि आप इस चुनौती का सामना करते हैं तो   को देखें। इस गाइड  संस्थापन   निर्देशिका में एक नया फ़ोल्डर   बनाता है, जिसमें Amplify Studio से सभी खींचे गए UI घटक शामिल हैं।  src ui-घटक  एम्पलीफाई यूआई लाइब्रेरी के साथ शुरुआत करना  एम्पलीफाई यूआई रिएक्ट लाइब्रेरी हमारे ऐप के स्टाइलिंग उद्देश्यों के लिए आवश्यक है, जो हर दूसरे सीएसएस यूटिलिटी लाइब्रेरी के समान है।  यह आदेश चलाएँ:    npm install @aws-amplify/ui-react aws-amplify   शैलियों  एप्लिकेशन के प्रवेश बिंदु में, index.js फ़ाइल, CSS फ़ाइल आयात करें। इस कोड के साथ index.js फ़ाइल को कॉपी और अपडेट करें जो ऐप के रंगरूप के लिए ज़िम्मेदार है:                                   root.render(           ); // src/index.js 
 import  React from   'react' ; import  ReactDOM from   'react-dom/client' ; import  App from   './App' ; import   '@aws-amplify/ui-react/styles.css' ; // add this 
 const  root = ReactDOM.createRoot( document .getElementById( 'root' ));    < React.StrictMode > 
      < App  /> 
    </ React.StrictMode > 
   फोंट्स  एम्पलीफाई यूआई डिपेंडेंसी के इंस्टालेशन के दौरान डिफॉल्ट फोंट,   के साथ यूआई जहाजों को बढ़ाएं। में  निम्नलिखित Google फोंट सीडीएन लिंक को फाइल, कॉपी और पेस्ट करें  तत्व:  इंटर   public/index.html   <head>   ... <head>                                 </head> ... // public/index.html 
 < link   rel = "preconnect"   href = "https://fonts.googleapis.com"  /> 
 < link   rel = "preconnect"   href = "https://fonts.gstatic.com"   crossorigin  /> 
 < link 
    href = "https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap" 
    rel = "stylesheet" 
 /> 
  अवयव प्रदर्शित करना    और   घटकों को प्रदर्शित करने के लिए, पर नेविगेट करें  फ़ाइल और सभी कोड हटा दें। फॉर्मचेकआउट नवबार   src/App.js  इसके बाद, इस कोड के साथ फ़ाइल को अपडेट करें:                     ); }   // src/App.js 
 import  { FormCheckout, NavBar } from   './ui-components' ; const  App = () =>  {    return  (      <> 
        < NavBar  /> 
        < FormCheckout   marginTop = '5em'  /> 
      </> 
 export   default  App;  मार्जिन-टॉप प्रॉपर्टी नेवबार और चेकआउट फॉर्म के बीच एक टॉप मार्जिन देती है। CSS मान हमारे घटकों में Amplify UI से शैलियों का उपयोग करने का तरीका है।  विकास सर्वर शुरू करें  रिएक्ट एक हॉट-रीलोड फीचर के साथ आता है जो हर बार फाइल पर अपडेट होने पर खुद को रिफ्रेश करता है।  यह आदेश चलाएँ:    npm start  विकास सर्वर पर चलता है  .    http://localhost:3000  इस रिएक्ट ऐप को वेब पर तैनात करना चाहते हैं?   की जाँच करें जो AWS Amplify का उपयोग करके चरण दर चरण आपका मार्गदर्शन करता है। इस संसाधन  निष्कर्ष  एम्पलीफाई स्टूडियो द्वारा प्रदान किए जाने वाले शून्य या बिना किसी कोड वाले निम्न-कोड उपकरण हैं। यह उपकरण एक डेवलपर के रूप में काम करना रोमांचक बनाता है, क्योंकि हमारे काम का एक हिस्सा खरोंच से घटकों के निर्माण के बिना या बेहतर अभी भी, डिजाइनर से स्क्रीन को लागू किए बिना हमारे लिए किया गया है।  हम साहसपूर्वक कह सकते हैं कि डिज़ाइनर से डेवलपर तक का हैंडऑफ़ निर्बाध है।  इस लेख ने हमें सिखाया कि एम्प्लीफाई स्टूडियो की मदद से अपने फिगमा घटकों को कैसे बनाया और एकीकृत किया जाए और घटकों को रिएक्ट घटकों से जोड़ा जाए जो एक कार्यशील ऐप के रूप में कार्य करते हैं।  इस   में पूरा स्रोत कोड है। GitHub रेपो

This story contains new, firsthand information uncovered by the writer.

Amazon

Google

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Get Free Unlimited IP Geo Data With IPinfo Lite

डिज़ाइनर टू डेवलपर हैंडऑफ़: फ़िग्मा डिज़ाइन फ़ाइल से रिएक्ट कंपोनेंट का निर्माण कैसे करें

डिज़ाइनर टू डेवलपर हैंडऑफ़: फ़िग्मा डिज़ाइन फ़ाइल से रिएक्ट कंपोनेंट का निर्माण कैसे करें

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

Paint us Red and Call us Santa! Our Devs Just Gifted You a Sleigh of New Features!

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

Paint us Red and Call us Santa! Our Devs Just Gifted You a Sleigh of New Features!

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps