इंटरएक्टिव फिगमा विजेट्स का निर्माण

Figma ने हमेशा डेवलपर्स और डिजाइनरों के बीच सहयोग को प्रोत्साहित किया है। यह समुदाय-निर्मित प्लगइन्स के अंतहीन खजाने पर प्रयास करता है। 3D तत्वों की आवश्यकता है? उसके लिए एक प्लगइन है। सार एसवीजी की आवश्यकता है? उसके लिए एक प्लगइन है, भी.

उस ने कहा, फिगमा का डिज़ाइन हिस्सा हमेशा अपेक्षाकृत स्थिर रहा है - हमेशा पूर्वनिर्धारित उपयोगकर्ता इंटरैक्शन के माध्यम से एक दूसरे से जुड़े अचूक आयतों के साथ काम करना। लेकिन क्या होगा अगर मैंने आपसे कहा कि आपके डिजाइन अचानक जीवन में आ सकते हैं - कि वे एनिमेटेड, इंटरैक्टिव और यहां तक ​​​​कि स्टेटफुल भी हो सकते हैं? फिर, कार्यान्वयन से अवधारणा को क्या अलग करेगा?

चित्र जून में घोषणा की कि यह जावास्क्रिप्ट-संचालित विजेट्स को तालिका में ला रहा है। अब, डिज़ाइनर सीधे Figma में तर्क-चालित घटकों को ब्राउज़ और कार्यान्वित कर सकते हैं!

हैलो बोलो विजेट एपीआई! आप जानना चाहते हैं कि यह क्या है और इसका उपयोग कैसे करना है? ठीक यही हम इस पोस्ट में एक साथ करने जा रहे हैं।

Figma विजेट कई संभावनाओं को खोलता है

कल्पना कीजिए कि आप एक बड़े रेस्तरां एप्लिकेशन को डिजाइन करने के लिए अपने साथी के साथ चौबीसों घंटे काम कर रहे हैं। आप दोनों पहले से ही एक ही Figma बोर्ड में सहयोग कर रहे हैं; आप दोनों एक ही दस्तावेज़ को तेज़ी से हो रहे परिवर्तनों के साथ साझा कर रहे हैं।

निश्चित रूप से, आप पहले से ही जानते हैं कि सहयोग में केवल डिजाइन प्रक्रिया के अलावा और भी बहुत कुछ शामिल है:

• परियोजना प्रबंधन,
• वोट बटोरने के लिए चुनावों की मेजबानी,
• नकली डेटा आयात और विज़ुअलाइज़ करना,
• और शायद कई घंटों के काम के बाद कूल-ऑफ करने के लिए मल्टीप्लेयर गेम भी खेल रहे हैं।

हमें बस एक व्यक्ति को सब कुछ प्रबंधित करने और समूह के अन्य सदस्यों को लिंक भेजने की आवश्यकता है। लेकिन ओह, यह बहुत कुशल नहीं है, है ना?

खैर, यहीं से विजेट्स चलन में आते हैं। फिग्मा को छोड़े बिना हम वह सब कर सकते हैं - हाँ, सब कुछ।

यहाँ कुछ तरीके दिए गए हैं जिनसे आप Figma में विजेट का उपयोग कर सकते हैं:

सूची जाती है हम और हम. जैसा कि आप बता सकते हैं, पहले से ही बहुत सारे विजेट हैं जिनका आप अपने दस्तावेज़ों में स्वतंत्र रूप से उपयोग कर सकते हैं। वास्तव में, आप विजेट मेनू से सीधे अपने बोर्ड में विजेट जोड़ सकते हैं (Shift+I).

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

यहाँ हमें क्या चाहिए

मुझे बुरी खबरों का वाहक बनना पसंद नहीं है, लेकिन विजेट विकसित करने के लिए, आपको विंडोज या मैक पर होना चाहिए। Linux उपयोगकर्ता, मुझे खेद है, लेकिन आप भाग्य से बाहर हैं। (आप अभी भी कर सकते हैं एक वीएम का प्रयोग करें यदि आप साथ चलना चाहते हैं।)

हम जाने वाले हैं फिगमा डेस्कटॉप डाउनलोड करें आवेदन पत्र। आरंभ करने का सबसे आसान तरीका सीधे ऐप से एक विजेट टेम्पलेट बनाना है।

आइए विजेट मेनू खोलकर एक नया बोर्ड बनाएं (Shift+ I), पर स्विच कर रहा है विकास टैब, और एक नया आइटम बनाना।

उसके बाद, Figma आपको नए विजेट का नाम देने और यह तय करने के लिए कहेगा कि क्या यह अधिक अनुकूलित है डिज़ाइन बोर्ड या FigJam बोर्ड बहुत। इस लेख के प्रयोजनों के लिए पूर्व विकल्प पर्याप्त है।

और अनुकूलन यहीं समाप्त नहीं होता है; Figma आपको एक पूर्व-निर्मित काउंटर विजेट या एक iFrame-सक्षम विकल्प के साथ शुरुआत करने का विकल्प भी देगा जो आपको कैनवास और Fetch API (साथ ही अन्य सभी ब्राउज़र API) तक पहुंच प्रदान करता है। हम सरल "खाली" विकल्प के साथ जाएंगे, लेकिन फ़ेच एपीआई का उपयोग करने के लिए हम अंततः इसे स्वयं संशोधित करेंगे।

फिर आपको अपने नए विजेट प्रोजेक्ट को अपने सिस्टम में एक विशेष निर्देशिका में सहेजने के लिए प्रेरित किया जाएगा। एक बार यह हो जाने के बाद, अपना टर्मिनल लॉन्च करें और इसे उस फ़ोल्डर में निर्देशित करें। अभी तक कोई आदेश न चलाएं — हम इसे बाद में करेंगे और उद्देश्यपूर्ण ढंग से विजेट्स एपीआई के बारे में अधिक जानने के लक्ष्य के साथ एक त्रुटि प्राप्त करेंगे।

विजेट डिजाइन करना

हम डिज़ाइन को सीधे से खींच रहे हैं क्रिस कोयियर का डिज़ाइन उद्धरण वेबसाइट. तो, चलिए वहाँ चलते हैं और DevTools को सक्रिय करके इसमें गोता लगाते हैं।

मैं यहां जिन दो प्रमुख शॉर्टकट का उपयोग कर रहा हूं वे हैं: Ctrl+Shift+C (या Cmd+Shift+C) "तत्व चुनें" टूल को टॉगल करने के लिए, और Shift+Click रंग प्रारूप को HEX कोड में बदलने के लिए। हम क्रिस की वेबसाइट में उपयोग किए गए रंगों, फोंट, फ़ॉन्ट वजन और फ़ॉन्ट आकार के बारे में जानने के लिए ऐसा कर रहे हैं। यह सारी जानकारी Figma में बारीकी से मिलते-जुलते विजेट के निर्माण के लिए महत्वपूर्ण है, जो हमारा अगला कदम होगा! तुम कर सकते हो डिज़ाइन किए गए घटक को पकड़ो और इसे अपने कैनवास में प्रयोग करें।

मैं यहाँ अधिक विस्तार में नहीं जाऊँगा क्योंकि इस लेख का मुख्य विषय कोड लिखकर विजेट बनाना है। लेकिन मैं इस बात पर जोर नहीं दे सकता कि आपकी अच्छी देखभाल करना कितना महत्वपूर्ण है विगेट्स की शैली… सीएसएस-ट्रिक्स में पहले से ही ढेर सारे हैं डिजाइन-उन्मुख फिग्मा ट्यूटोरियल; आपको उन्हें अपनी पठन सूची में जोड़ने पर पछतावा नहीं होगा।

हमारे विजेट के लिए लेआउट बनाना

डिजाइन से बाहर होने के साथ, यह हमारी प्रोग्रामिंग उंगलियों को बाहर निकालने और हमारे विजेट के गियर्स का निर्माण शुरू करने का समय है।

यह बहुत दिलचस्प है कि कैसे Figma अपने डिजाइन बिल्डिंग ब्लॉक्स को रिएक्ट-जैसे घटकों में अनुवादित करता है। उदाहरण के लिए, ऑटो-लेआउट सुविधा वाले फ़्रेम तत्वों को के रूप में दर्शाया जाता है <AutoLayout /> कोड में घटक। इसके अलावा, हम दो और घटकों का उपयोग करेंगे: <Text /> और <SVG />.

मेरे फिग्मा बोर्ड पर एक नज़र डालें... मैं आपको ऑब्जेक्ट ट्री पर ध्यान केंद्रित करने के लिए कह रहा हूं। हमें अपने विजेट डिज़ाइन को JSX कोड में अनुवाद करने में सक्षम होने की आवश्यकता है।

जैसा कि आप देख सकते हैं, हमारा डिज़ाइन उद्धरण विजेट आयात करने के लिए तीन घटकों की मांग करता है। यह देखते हुए कि घटकों की एक अच्छी संख्या है पूर्ण एपीआई केवल आठ परत-आधारित नोड्स होते हैं। लेकिन जैसा कि आप जल्द ही देखेंगे, ये मॉड्यूल सभी प्रकार के लेआउट को तैयार करने के लिए पर्याप्त से अधिक हैं।

// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;

और इसके साथ, हमारे पास आगे बढ़ने और हमारे विजेट के कंकाल का निर्माण करने की आवश्यकता है जैसे हम प्रतिक्रिया में करेंगे:

function QuotesWidget() {
  const quote = `...`;
  const author = `...`;

  return (
    <AutoLayout>
      <SVG />
      <AutoLayout>
        <Text>{quote}</Text>
        <Text>— {author}</Text>
      </AutoLayout>
      <SVG />
    </AutoLayout>
  );
}

widget.register(QuotesWidget);

कम से कम कहने के लिए यह कोड बहुत भ्रमित करने वाला है। अभी, हम डिज़ाइन की परतों को अलग नहीं बता सकते। शुक्र है, हम इस समस्या को आसानी से के उपयोग के माध्यम से हल करने में सक्षम हैं name संपत्ति।

<AutoLayout name={"Quote"}>
  <SVG name={"LeftQuotationMark"} />
  <AutoLayout name={"QuoteContent"}>
    <Text name={"QuoteText"}>{quote}</Text>
    <Text name={"QuoteAuthor"}>— {author}</Text>
  </AutoLayout>
  <SVG name={"RightQuotationMark"} />
</AutoLayout>;

और, ज़ाहिर है, हम अभी भी हमारे उद्धरण चिह्न एसवीजी नहीं देख सकते हैं, तो चलिए इसे ठीक करने पर काम करते हैं।  <SVG/> घटक स्वीकार ए srcसंपत्ति जो एक एसवीजी तत्व के लिए स्रोत कोड लेती है। इस पर कहने के लिए बहुत कुछ नहीं है, तो चलिए इसे सरल रखते हैं और सीधे कोड पर वापस जाते हैं:

const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
  // shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;

function QuotesWidget() {
  return (
    <SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
    <SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
  );
}

मुझे लगता है कि हम सभी सहमत हो सकते हैं कि अब सब कुछ बहुत स्पष्ट है! जब हम चीजों को नाम देते हैं, तो उनका उद्देश्य अचानक हमारे कोड के पाठकों के लिए और अधिक स्पष्ट हो जाता है।

रीयल-टाइम में हमारे विजेट का पूर्वावलोकन करना

विजेट बनाते समय Figma एक बेहतरीन डेवलपर अनुभव प्रदान करता है, जिसमें शामिल हैं (लेकिन इन्हीं तक सीमित नहीं है) हॉट-रीलोडिंग. इस सुविधा के साथ, हम रीयल-टाइम में अपने विजेट में परिवर्तनों को कोड और पूर्वावलोकन करने में सक्षम हैं।

विजेट मेनू खोलकर प्रारंभ करें (Shift+I), विकास टैब पर स्विच करना और अपने नए विजेट को बोर्ड पर क्लिक करना या खींचना। अपने विजेट का पता लगाने में असमर्थ? चिंता न करें, बस तीन-बिंदु वाले मेनू पर क्लिक करें और अपने विजेट का आयात करें manifest.json फ़ाइल। हाँ, बस इसे अस्तित्व में लाने के लिए बस इतना ही चाहिए!

रुको, क्या आपको अपनी स्क्रीन के नीचे एक त्रुटि संदेश मिला है?

अगर ऐसा है तो आइए जांच करते हैं। पर क्लिक करें "कंसोल खोलें"और पढ़ें कि उसे क्या कहना है। अगर कंसोल खोलें बटन चला गया है, डिबगिंग कंसोल खोलने का एक वैकल्पिक तरीका है। Figma लोगो पर क्लिक करें, विजेट श्रेणी पर जाएं और विकास मेनू प्रकट करें।

यह त्रुटि इस तथ्य के कारण होने की संभावना है कि हमने अभी तक अपनी टाइपस्क्रिप्ट को जावास्क्रिप्ट में संकलित नहीं किया है। हम इसे कमांड लाइन में चलाकर कर सकते हैं npm install और npm run watch. (या yarn और yarn watch ) इस बार कोई त्रुटि नहीं!

एक और बाधा जो आपको आ सकती है वह यह है कि विजेट किसी भी समय कोड बदलने पर फिर से प्रस्तुत करने में विफल रहता है। हम निम्नलिखित संदर्भ मेनू कमांड का उपयोग करके अपने विजेट को आसानी से अपडेट करने के लिए बाध्य कर सकते हैं: विजेट (Widgets)  → विजेट फिर से प्रस्तुत करें.

विजेट को स्टाइल करना

जैसा कि यह वर्तमान में खड़ा है, दिखता है हमारे विगेट्स अभी भी हमारे अंतिम लक्ष्य से काफी दूर हैं।

तो हम कोड से Figma घटकों को कैसे स्टाइल करते हैं? शायद सीएसएस के साथ जैसे हम एक रिएक्ट प्रोजेक्ट में करेंगे? नकारात्मक। Figma विजेट्स के साथ, सब स्टाइलिंग के एक सेट के माध्यम से होता है अच्छी तरह से प्रलेखित सहारा. हमारे लिए भाग्यशाली, इन वस्तुओं का नाम लगभग है हूबहू Figma में अपने समकक्षों के लिए।

हम अपने दो को कॉन्फ़िगर करके शुरू करेंगे <AutoLayout /> अवयव। जैसा कि आप ऊपर दिए गए इन्फोग्राफिक में देख सकते हैं, प्रोप नाम उनके उद्देश्य के बारे में काफी वर्णनात्मक हैं। इससे हमारे लिए सीधे कोड में कूदना और कुछ बदलाव करना शुरू करना आसान हो जाता है। मैं फिर से पूरा कोड नहीं दिखाऊंगा, इसलिए कृपया घटक नामों पर भरोसा करें ताकि आपको मार्गदर्शन मिल सके कि स्निपेट कहां हैं।

<AutoLayout
  name={"Quote"}
  direction={"horizontal"}
  verticalAlignItems={"start"}
  horizontalAlignItems={"center"}
  spacing={54}
  padding={{
    horizontal: 61,
    vertical: 47,
  }}
>
  <AutoLayout
    name={"QuoteContent"}
    direction={"vertical"}
    verticalAlignItems={"end"}
    horizontalAlignItems={"start"}
    spacing={10}
    padding={{
      horizontal: 0,
      vertical: 0,
    }}
  ></AutoLayout>
</AutoLayout>;

हमने अभी बहुत प्रगति की है! आइए सेव करें और फिगमा पर वापस जाएं यह देखने के लिए कि हमारा विजेट कैसा दिखता है। याद रखें कि नए परिवर्तनों पर Figma स्वचालित रूप से विजेट्स को कैसे पुनः लोड करता है?

लेकिन यह अभी काफी नहीं है। हमें मूल घटक में पृष्ठभूमि का रंग भी जोड़ना चाहिए:

<AutoLayout name={"Quote"} fill={"#ffffff"}>

फिर से, अपने Figma बोर्ड पर एक नज़र डालें और ध्यान दें कि कैसे परिवर्तन लगभग तुरंत वापस विजेट में दिखाई दे सकते हैं।

आइए इस गाइड के साथ चलते हैं और स्टाइल करते हैं <Text> घटकों.

पर एक नज़र लेने के बाद विजेट एपीआई प्रलेखन, यह फिर से स्पष्ट है कि संपत्ति के नाम लगभग Figma ऐप में उनके समकक्षों के समान हैं, जैसा कि ऊपर दिए गए इन्फोग्राफिक में देखा जा सकता है। हम पिछले खंड के मूल्यों का भी उपयोग करेंगे जहां हमने क्रिस की वेबसाइट का निरीक्षण किया था।

<Text name={'QuoteText'}
  fontFamily={'Lora'}
  fontSize={36}
  width={700}
  fill={'#545454'}
  fontWeight={'normal'}
>{quote}</Text>

<Text name={'QuoteAuthor'}
  fontFamily={'Raleway'}
  fontSize={26}
  width={700}
  fill={'#16B6DF'}
  fontWeight={'bold'}
  textCase={'upper'}
>— {author}</Text>

विजेट में राज्य जोड़ना

हमारा विजेट वर्तमान में एक ही उद्धरण प्रदर्शित करता है, लेकिन हम उद्धरणों के पूरे पूल से यादृच्छिक रूप से खींचना चाहते हैं। हमें जोड़ना होगा राज्य हमारे विजेट के लिए, जिसे सभी रिएक्ट डेवलपर्स जानते हैं, एक वेरिएबल है जिसका परिवर्तन हमारे घटक के पुन: प्रतिपादन को ट्रिगर करता है।

Figma के साथ, राज्य का निर्माण के साथ होता है useSyncedState अंकुश; यह बहुत ज्यादा है प्रतिक्रिया useState, लेकिन इसके लिए प्रोग्रामर को एक अद्वितीय कुंजी निर्दिष्ट करने की आवश्यकता होती है। यह आवश्यकता इस तथ्य से उपजी है कि Figma को हमारे विजेट की स्थिति को सभी में समन्वयित करना चाहिए सब क्लाइंट जो एक ही डिज़ाइन बोर्ड देख रहे हैं, लेकिन विभिन्न कंप्यूटरों के माध्यम से।

const { useSyncedState } = widget;

function QuotesWidget() {
  const [quote, setQuote] = useSyncedState("quote-text", "");
  const [author, setAuthor] = useSyncedState("quote-author", "");
}

अभी हमें बस इतना ही बदलाव चाहिए। अगले भाग में, हम यह पता लगाएंगे कि इंटरनेट से डेटा कैसे प्राप्त किया जाए। स्पॉयलर अलर्ट: यह उतना आसान नहीं है जितना लगता है।

नेटवर्क से डेटा प्राप्त करना

याद कीजिए जब Figma ने हमें iFrame-सक्षम विजेट के साथ शुरुआत करने का विकल्प दिया था। हालाँकि हम उस विकल्प के साथ नहीं गए, फिर भी हमें इसकी कुछ विशेषताओं को लागू करना चाहिए। मुझे समझाएं कि हम केवल कॉल क्यों नहीं कर सकते fetch() हमारे विजेट कोड के भीतर।

जब आप किसी विजेट का उपयोग करते हैं, तो आप अपने कंप्यूटर पर जावास्क्रिप्ट कोड चला रहे होते हैं जो किसी और द्वारा लिखा जाता है। जबकि सभी विजेट्स की पूरी तरह से Figma स्टाफ द्वारा समीक्षा की जाती है, यह अभी भी एक बहुत बड़ा सुरक्षा छेद है क्योंकि हम सभी जानते हैं कि कितना जावास्क्रिप्ट की एक पंक्ति से भी नुकसान हो सकता है.

नतीजतन, Figma बस नहीं कर सकता eval() अनाम प्रोग्रामर द्वारा लिखा गया कोई भी विजेट कोड। लंबी कहानी संक्षेप में, टीम ने फैसला किया कि सबसे अच्छा समाधान तीसरे पक्ष के कोड को बारीकी से संरक्षित सैंडबॉक्स वातावरण में चला रहा था। और जैसा कि आपने अनुमान लगाया होगा, ऐसे वातावरण में ब्राउज़र एपीआई अनुपलब्ध हैं।

लेकिन चिंता मत करो, इस दूसरी समस्या का फिगमा का समाधान है <iframe>एस। कोई भी HTML कोड जिसे हम फ़ाइल में लिखते हैं, अधिमानतः कहा जाता है ui.html, के पास सभी ब्राउज़र एपीआई तक पहुंच होगी। आप सोच रहे होंगे कि हम इस कोड को विजेट से कैसे ट्रिगर कर सकते हैं, लेकिन हम इस पर बाद में विचार करेंगे। अभी, आइए कोड में वापस जाएं:

// manifest.json
{
  "ui": "ui.html"
}

<!-- ui.html -->
<script>
window.onmessage = async (event) => {
  if (event.data.pluginMessage.type === 'networkRequest') {
    // TODO: fetch data from the server

    window.parent.postMessage({
      pluginMessage: {
        // TODO: return fetched data
      }
    }, '*')
  }
}
</script>

विजेट-टू- के लिए यह सामान्य टेम्पलेट हैiframe संचार। आइए इसका उपयोग सर्वर से डेटा लाने के लिए करें:

<!-- ui.html -->
<script>
window.onmessage = async (event) => {
  if (event.data.pluginMessage.type === 'networkRequest') {
    // Get random number from 0 to 100
    const randomPage = Math.round(Math.random() * 100)

    // Get a random quote from the Design Quotes API
    const res = await fetch(`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand&per_page=1&page=${randomPage}&_fields=title,yoast_head_json`)
    const data = await res.json()

    // Extract author name and quote content from response
    const authorName = data[0].title.rendered
    const quoteContent = data[0].yoast_head_json.og_description

    window.parent.postMessage({
      pluginMessage: {
        authorName,
        quoteContent
      }
    }, '*')
  }
}
</script>

हम इसे सरल और टू-द-पॉइंट रखने के लिए एरर-हैंडलिंग को छोड़ रहे हैं। आइए विजेट कोड में वापस जाएं और देखें कि हम इसमें परिभाषित कार्यों तक कैसे पहुंचते हैं <iframe>:

function fetchData() {
  return new Promise<void>(resolve => {
    figma.showUI(__html__, {visible: false})
    figma.ui.postMessage({type: 'networkRequest'})

    figma.ui.onmessage = async ({authorName, quoteContent}) => {
      setAuthor(authorName)
      setQuote(quoteContent)

      resolve()
    }
  })
}

जैसा कि आप देख सकते हैं, हम सबसे पहले Figma को बता रहे हैं कि हमारे छिपे हुए तक पहुंच को उजागर करें <iframe> और नाम के साथ एक घटना को ट्रिगर करने के लिए "networkRequest". हम इस घटना को संभाल रहे हैं ui.html चेक करके फाइल करें event.data.pluginMessage.type === 'networkRequest', और फिर डेटा को वापस विजेट पर पोस्ट करना।

लेकिन अभी तक कुछ नहीं हो रहा है... हमने अभी तक कॉल नहीं किया है fetchData() समारोह। यदि हम इसे सीधे घटक फ़ंक्शन में कहते हैं, तो कंसोल में निम्न त्रुटि होती है:

Cannot use showUI during widget rendering.

फिग्मा हमें कॉल न करने के लिए कह रही है showUI सीधे फंक्शन बॉडी में... तो, हमें इसे कहाँ रखना चाहिए? इसका उत्तर एक नया हुक और एक नया कार्य है: useEffect और waitForTask. आप पहले से ही परिचित हो सकते हैं useEffect यदि आप एक रिएक्ट डेवलपर हैं, लेकिन हम इसका उपयोग यहां सर्वर से डेटा लाने के लिए करेंगे जब विजेट घटक माउंट होगा।

const { useEffect, waitForTask } = widget;

function QuotesWidget() {
  useEffect(() => {
    waitForTask(fetchData());
  });
}

लेकिन इसके परिणामस्वरूप एक और "त्रुटि" होगी जहां हमारा विजेट हमेशा के लिए एक नए उद्धरण के साथ फिर से प्रस्तुत करता रहेगा। ऐसा इसलिए होता है क्योंकि useEffect, परिभाषा के अनुसार, जब भी विजेट की स्थिति बदलती है, फिर से ट्रिगर होता है, नहीं जब हम कॉल करते हैं fetchData। और देर एक तकनीक है केवल कॉल करने के लिए useEffect एक बार रिएक्ट में, यह फिगमा के कार्यान्वयन पर काम नहीं करता है। Figma के डॉक्स से:

विजेट कैसे चलते हैं, इसके कारण, useEffect एक ही राज्य के साथ कई बार बुलाए जाने को संभालना चाहिए।

शुक्र है, एक आसान समाधान है जिसका हम लाभ उठा सकते हैं और कॉल कर सकते हैं useEffect केवल एक बार जब घटक पहली बार आरोहित होता है, और यह जाँच कर रहा है कि राज्य के मान अभी भी खाली हैं या नहीं:

function QuotesWidget() {
  useEffect(() => {
    if (!author.length & !quote.length) {
      waitForTask(fetchData());
    }
  });
}

आप एक डरावने में भाग सकते हैं "मेमोरी एक्सेस सीमा से बाहर" गलती। यह है प्लगइन और विजेट विकास में देखने के लिए काफी आम है. बस Figma को पुनरारंभ करें और यह अब और नहीं होगा।

आपने देखा होगा कि कभी-कभी, उद्धरण पाठ में अजीब वर्ण होते हैं।

ये हैं यूनिकोड वर्ण और हमें उन्हें कोड में ठीक से प्रारूपित करना चाहिए:

<!-- ui.html -->
<script>
window.onmessage = async (event) => {
  // ...
  const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};

// <https://stackoverflow.com/a/9609450>
var decodeEntities = (function () {
  // this prevents any overhead from creating the object each time
  var element = document.createElement("div");

  function decodeHTMLEntities(str) {
    if (str && typeof str === "string") {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([Ss]*?)</script>/gim, "");
      str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = "";
    }

    return str;
  }

  return decodeHTMLEntities;
})();
</script>

तथा देखा, हमारे विजेट को हर बार डिज़ाइन बोर्ड में जोड़े जाने पर एक बिल्कुल नया डिज़ाइन उद्धरण प्राप्त होता है।

हमारे विजेट में एक संपत्ति मेनू जोड़ना

जबकि हमारा विजेट इंस्टेंटेशन पर एक नया उद्धरण प्राप्त करता है, यह बहुत अधिक व्यावहारिक होगा यदि हम इस प्रक्रिया को फिर से कर सकते हैं लेकिन इसे हटाए बिना। यह खंड छोटा होगा क्योंकि समाधान काफी उल्लेखनीय है। साथ संपत्ति मेनू, हम एक कॉल के साथ अपने विजेट में अन्तरक्रियाशीलता जोड़ सकते हैं usePropertyMenu हुक।

const { usePropertyMenu } = widget;

function QuotesWidget() {
  usePropertyMenu(
    [
      {
        itemType: "action",
        propertyName: "generate",
	tooltip: "Generate",
        icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="<http://www.w3.org/2000/svg>">
          <!-- Shortened for brevity -->
        </svg>`,
      },
    ],
    () => fetchData()
  );
}

एक साधारण हुक के साथ हम एक बटन बनाने में सक्षम होते हैं जो हमारे विजेट के चुने जाने पर उसके पास दिखाई देता है। यह आखिरी टुकड़ा था जिसे हमें इस परियोजना को पूरा करने के लिए जोड़ने की जरूरत थी।

हमारे विजेट को जनता के लिए प्रकाशित करना

विजेट बनाने में ज्यादा फायदा नहीं है, ठीक है, कोई नहीं का उपयोग करता है यह। और देर Figma संगठनों को लॉन्च करने के विकल्प के साथ अनुदान देता है निजी विजेट्स आंतरिक उपयोग के लिए, इन छोटे कार्यक्रमों को दुनिया के लिए जारी करना कहीं अधिक सामान्य है।

Figma में एक नाजुक विजेट समीक्षा प्रक्रिया है जिसमें 5 से 10 कार्यदिवस लग सकते हैं। और जबकि डिजाइन उद्धरण विजेट हमने एक साथ बनाया है पहले से ही विजेट पुस्तकालय में, मैं अब भी दिखाऊंगा कि यह वहां कैसे पहुंचा। कृपया इस विजेट को फिर से प्रकाशित करने का प्रयास न करें क्योंकि इससे केवल निष्कासन ही होगा. लेकिन अगर आपने इसे कुछ महत्वपूर्ण बदलाव दिए हैं, तो आगे बढ़ें और समुदाय के साथ अपना खुद का विजेट साझा करें!

विजेट मेनू पर क्लिक करके प्रारंभ करें (Shift+I) और पर स्विच करना विकास हमारे विजेट को देखने के लिए टैब। तीन बिंदुओं वाले मेनू पर क्लिक करें और दबाएं प्रकाशित करना.

Figma आपको अपने विजेट के बारे में कुछ विवरण दर्ज करने के लिए प्रेरित करेगा, जैसे शीर्षक, विवरण और कुछ टैग। हमें 128×128 आइकन इमेज और 1920×960 बैनर इमेज की भी आवश्यकता होगी।

इन सभी संपत्तियों को आयात करने के बाद, हमें अभी भी अपने विजेट के स्क्रीनशॉट की आवश्यकता है। प्रकाशन मोड बंद करें (चिंता न करें, आप अपना डेटा नहीं खोएंगे) और एक दिलचस्प संदर्भ मेनू प्रकट करने के लिए विजेट पर राइट-क्लिक करें। खोजो कॉपी/पेस्ट के रूप मेंश्रेणी और चयन करें पीएनजी के रूप में कॉपी करें.

ऐसा करने के साथ, आइए प्रकाशन मोड पर वापस जाएं और विजेट का स्क्रीनशॉट पेस्ट करें:

नीचे स्क्रॉल करें और अंत में अपना मोडल प्रकाशित करें। जश्न मनाना! मैं

फिगमा आपके मोडल की समीक्षा की स्थिति के बारे में कुछ दिनों में आपसे संपर्क करेगी। अस्वीकृति के मामले में, आपको दिया जाएगा परिवर्तन करने और फिर से सबमिट करने का अवसर.

निष्कर्ष

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

उन लोगों के लिए जो अपने फिगमा कौशल को अधिक से अधिक स्तरों पर ले जाने की इच्छा रखते हैं, मैं सुझाव देता हूं कि विजेट्स समुदाय की खोज करें और प्रेरणा के रूप में आपकी आंखों का उपयोग करें। अधिक विजेट बनाते रहें, अपने रिएक्ट कौशल को तेज करते रहें, और इससे पहले कि आप इसे महसूस करें, आप मुझे यह सब करना सिखाएंगे।

इसके अलावा संसाधनों

जब मैं यह विजेट बना रहा था तो मुझे बहुत सारे दस्तावेज़ों का उल्लेख करना पड़ा। मैंने सोचा कि जो मुझे सबसे ज्यादा मदद करने के लिए मिला है उसे मैं साझा करूंगा।

अधिक विजेट बनाएं:

विजेट्स को अधिक गहराई से जानें:

विजेट बनाम प्लगइन्स