4,223 रीडिंग

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

द्वारा Teri5m2022/09/23

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

AWS Amplify आपको Figma से एक एप्लिकेशन बनाने और घटकों को रिएक्ट में आयात करने की अनुमति देता है। Amplify की मदद से, टूल पुन: प्रयोज्य रिएक्ट घटक बनाता है जो आपको समय बचाता है और कोड की लंबी लाइनें लिखने से बचाता है। यह ट्यूटोरियल Figma UI किट से दो घटकों का उपयोग करेगा: NavBar और FormCheckout UI। हम एम्पलीफाई यूआई किट का उपयोग करके रिएक्ट में सभी यूआई घटकों को देखने में सक्षम होंगे। हमारे ऐप के साथ काम करने के लिए हमारे पास एम्प्लीफाई स्टूडियो के साथ हमारे ऐप में सभी घटक होने चाहिए।

Companies Mentioned

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

जैसा कि हम सभी जानते हैं, उत्पाद डेवलपर के काम का एक हिस्सा फिगमा से डिजाइन को पसंद के ढांचे के साथ कोड में बदलना है, और यदि परियोजना महत्वपूर्ण है तो यह जटिल हो सकता है। डिज़ाइनर-टू-डेवलपर हैंडऑफ़ का सार यह है कि डेवलपर डिज़ाइन से स्क्रीन को सटीक और पिक्सेल-परफेक्ट घटकों में लागू करता है।

इस लेख में, हम 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 के साथ सिंक करें। यह डायलॉग बॉक्स आपको My Components पेज से Figma फ़ाइल लिंक पेस्ट करने की अनुमति देगा।

यदि आप पहली बार यह कदम उठा रहे हैं, तो इसे आपके Figma खाते तक पहुँचने के लिए प्रमाणीकरण की आवश्यकता हो सकती है।

Figma से घटक ला रहा है

Figma से खींचे गए घटकों के सभी परिवर्तनों को स्वीकार करें।

हम एम्पलीफाई स्टूडियो में Figma फ़ाइल से सभी UI घटकों को देखने में सक्षम होंगे।

Figma के आयातित घटकों से FormCheckout वही है जो Amplify Studio में प्रदर्शित होता है।

प्रतिक्रिया में लाए गए घटकों के साथ कार्य करना

अब जब हमारे पास एम्प्लीफाई स्टूडियो में यूआई घटक हैं, तो हमारे पास हमारे रिएक्ट एप्लिकेशन में सभी यूआई घटक होने चाहिए।

अपने ऐप को एम्पलीफाई स्टूडियो से जोड़ने के लिए, हमें स्थानीय सेटअप निर्देश लिंक का उपयोग करके घटकों को हमारे स्रोत कोड में खींचने और प्रोजेक्ट रूट फ़ोल्डर से कमांड चलाने की आवश्यकता है।

याद रखें कि इस कमांड को काम करने के लिए, विश्व स्तर पर एडब्ल्यूएस एम्पलीफाई सीएलआई स्थापित करें, जैसा कि पूर्वापेक्षाएँ अनुभाग में बताया गया है।

कमांड चलाने से हमारे प्रोग्राम को एक प्राधिकरण संदेश के साथ संकेत मिलेगा।

रिएक्ट ऐप को अनुमति देने के लिए हाँ पर क्लिक करें। इसके बाद, घटकों को खींचते समय संकेतों की एक श्रृंखला दिखाई देती है। प्रश्नों के लिए डिफ़ॉल्ट स्वीकार करें।

यदि आप टर्मिनल में चुनौतियों या किसी त्रुटि लॉग संदेशों का सामना करते हैं, तो संभवतः यह होगा कि आपने AWS को कॉन्फ़िगर नहीं किया है।

यदि आप इस चुनौती का सामना करते हैं तो इस गाइड को देखें।

संस्थापन src निर्देशिका में एक नया फ़ोल्डर ui-घटक बनाता है, जिसमें Amplify Studio से सभी खींचे गए UI घटक शामिल हैं।

एम्पलीफाई यूआई लाइब्रेरी के साथ शुरुआत करना

एम्पलीफाई यूआई रिएक्ट लाइब्रेरी हमारे ऐप के स्टाइलिंग उद्देश्यों के लिए आवश्यक है, जो हर दूसरे सीएसएस यूटिलिटी लाइब्रेरी के समान है।

यह आदेश चलाएँ:

 npm install @aws-amplify/ui-react aws-amplify

शैलियों

एप्लिकेशन के प्रवेश बिंदु में, index.js फ़ाइल, CSS फ़ाइल आयात करें। इस कोड के साथ index.js फ़ाइल को कॉपी और अपडेट करें जो ऐप के रंगरूप के लिए ज़िम्मेदार है:

 // 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' )); root.render(  < React.StrictMode >
    < App />
  </ React.StrictMode >
);

फोंट्स

एम्पलीफाई यूआई डिपेंडेंसी के इंस्टालेशन के दौरान डिफॉल्ट फोंट, इंटर के साथ यूआई जहाजों को बढ़ाएं। में

 public/index.html

निम्नलिखित Google फोंट सीडीएन लिंक को फाइल, कॉपी और पेस्ट करें

 <head>

तत्व:

 // public/index.html
... <head> < 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,[email protected],100..900&display=swap"
  rel = "stylesheet"
/>
</head> ...

अवयव प्रदर्शित करना

फॉर्मचेकआउट और नवबार घटकों को प्रदर्शित करने के लिए, पर नेविगेट करें

 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 रेपो में पूरा स्रोत कोड है।