انٹرایکٹو فگما وجیٹس بنانا

فگما نے ہمیشہ ڈویلپرز اور ڈیزائنرز کے درمیان تعاون کی حوصلہ افزائی کی ہے۔ یہ کمیونٹی کے بنائے ہوئے پلگ انز کے لامتناہی خزانے پر کوشش کرتا ہے۔ 3D عناصر کی ضرورت ہے؟ اس کے لیے ایک پلگ ان ہے۔ خلاصہ SVGs کی ضرورت ہے؟ اس کے لیے ایک پلگ ان ہے۔بھی.

اس نے کہا، فگما کا ڈیزائن حصہ ہمیشہ نسبتاً ساکت رہا ہے — ہمیشہ پہلے سے طے شدہ صارف کے تعامل کے ذریعے ایک دوسرے سے جڑے غیر منقولہ مستطیلوں کے ساتھ کام کرنا۔ لیکن کیا ہوگا اگر میں نے آپ کو بتایا کہ آپ کے ڈیزائن اچانک زندہ ہوسکتے ہیں - کہ وہ متحرک، انٹرایکٹو، اور یہاں تک کہ ریاستی بھی ہوسکتے ہیں؟ پھر، تصور کو نفاذ سے الگ کیا ہوگا؟

فگما جون میں اعلان کیا گیا کہ یہ جاوا اسکرپٹ سے چلنے والے ویجٹ کو میز پر لا رہا ہے۔ اب، ڈیزائنرز براہ راست فگما میں منطق سے چلنے والے اجزاء کو براؤز اور لاگو کر سکتے ہیں!

ہیلو سے کہو وجیٹس API! آپ جاننا چاہتے ہیں کہ یہ کیا ہے اور اسے کیسے استعمال کیا جائے؟ بالکل وہی ہے جو ہم اس پوسٹ میں مل کر کرنے جا رہے ہیں۔

فگما وجیٹس بہت سارے امکانات کو کھولتے ہیں۔

تصور کریں کہ آپ اپنے ساتھی کے ساتھ ایک بڑی ریستوراں کی ایپلی کیشن ڈیزائن کرنے کے لیے چوبیس گھنٹے کام کر رہے ہیں۔ آپ دونوں پہلے ہی ایک ہی فگما بورڈ پر تعاون کر رہے ہیں۔ آپ دونوں بالکل ایک ہی دستاویز کا اشتراک کر رہے ہیں جس میں تبدیلیاں ہو رہی ہیں۔

یقینا، آپ پہلے ہی جانتے ہیں کہ تعاون میں صرف ڈیزائن کے عمل سے زیادہ شامل ہوتا ہے:

• کام کی ترتیب لگانا،
• ووٹ اکٹھا کرنے کے لیے پولز کی میزبانی،
• فرضی ڈیٹا کی درآمد اور تصور کرنا،
• اور شاید کئی گھنٹوں کے کام کے بعد ٹھنڈا ہونے کے لیے ملٹی پلیئر گیم بھی کھیلنا۔

ہمیں صرف ایک شخص کی ضرورت ہے کہ وہ ہر چیز کا انتظام کرے اور گروپ کے دوسرے ممبران کو لنک بھیجے۔ لیکن اوہ، یہ بہت کارآمد نہیں ہے، ہے نا؟

ٹھیک ہے، یہ وہ جگہ ہے جہاں ویجٹ کھیل میں آتے ہیں۔ ہم فگما کو چھوڑے بغیر یہ سب کچھ - جی ہاں، سب کچھ کر سکتے ہیں۔

یہاں صرف چند طریقے ہیں جو آپ فگما میں ویجٹ استعمال کرنا چاہتے ہیں:

فہرست جاتی ہے۔ ہم اور ہم. جیسا کہ آپ بتا سکتے ہیں، پہلے سے ہی ویجٹ کی بہتات ہے جسے آپ اپنی دستاویزات میں آزادانہ طور پر استعمال کر سکتے ہیں۔ درحقیقت، آپ وجیٹس مینو (Shift+I).

لیکن ہم یہاں ویجٹ استعمال کرنے کا طریقہ سیکھنے کے لیے نہیں ہیں، کیونکہ یہ آسان ہے۔ ہمیں وہی کرنے دیں جو ہم سب سے بہتر کرتے ہیں: ہم اپنا Figma ویجیٹ بنانے والے ہیں! یہ ایک کی طرف سے حوصلہ افزائی کی جائے گی کرس کوئیر کا ڈیزائن ویب سائٹ کے حوالے سے. ہم API لیں گے، اسے ویجیٹ میں فیڈ کریں گے، پھر فگما میں براہ راست بے ترتیب ڈیزائن کوٹس ڈسپلے کریں گے۔

یہاں ہمیں کیا ضرورت ہے

میں بری خبروں کا علمبردار بننا پسند نہیں کرتا، لیکن ویجٹ تیار کرنے کے لیے، آپ کا ونڈوز یا میک پر ہونا ضروری ہے۔ لینکس کے صارفین، مجھے افسوس ہے، لیکن آپ کی قسمت سے باہر ہے۔ (آپ اب بھی کر سکتے ہیں۔ VM استعمال کریں۔ اگر آپ اس کی پیروی کرنا چاہتے ہیں۔)

ہم جا رہے ہیں۔ فگما ڈیسک ٹاپ ڈاؤن لوڈ کریں۔ درخواست شروع کرنے کا سب سے آسان طریقہ براہ راست ایپ سے ویجیٹ ٹیمپلیٹ تیار کرنا ہے۔

آئیے ویجٹ مینو کو کھول کر ایک نیا بورڈ بنائیں (Shift+ I) پر سوئچ کرنا ترقی ٹیب، اور ایک نیا آئٹم بنانا۔

اس کے بعد، فگما آپ کو نئے ویجیٹ کا نام دینے اور فیصلہ کرنے کا اشارہ کرے گا کہ آیا یہ اس کے لیے زیادہ موزوں ہے ڈیزائن بورڈز یا فگ جیم بورڈز بھی سابقہ ​​اختیار اس مضمون کے مقاصد کے لیے کافی ہے۔

اور حسب ضرورت یہیں ختم نہیں ہوتی۔ Figma آپ کو پہلے سے تیار کردہ کاؤنٹر ویجیٹ یا iFrame-enabled متبادل کے ساتھ شروع کرنے کا اختیار بھی دے گا جو آپ کو Canvas اور Fetch APIs (نیز تمام براؤزر APIs) تک رسائی فراہم کرتا ہے۔ ہم سادہ "خالی" اختیار کے ساتھ جائیں گے، لیکن ہم آخر کار اسے خود ہی ترمیم کریں گے تاکہ Fetch API کا استعمال کیا جا سکے۔

اس کے بعد آپ کو اپنے نئے ویجیٹ پروجیکٹ کو اپنے سسٹم میں ایک خصوصی ڈائرکٹری میں محفوظ کرنے کے لیے کہا جائے گا۔ ایک بار جب یہ ہو جائے تو، اپنا ٹرمینل لانچ کریں اور اسے اس فولڈر میں بھیجیں۔ ابھی تک کوئی کمانڈ نہ چلائیں — ہم اسے بعد میں کریں گے اور جان بوجھ کر Widgets API کے بارے میں مزید جاننے کے مقصد کے ساتھ ایک غلطی کا سامنا کرنا پڑے گا۔

ویجیٹ ڈیزائن کرنا

ہم ڈیزائن کو سیدھے سے کھینچ رہے ہیں۔ کرس کوئیر کا ڈیزائن ویب سائٹ کے حوالے سے. تو، آئیے وہاں جائیں اور DevTools کو فائر کرکے اس میں غوطہ لگائیں۔

دو کلیدی شارٹ کٹس جو میں یہاں استعمال کر رہا ہوں۔ Ctrl+Shift+C (یا Cmd+Shift+C) "پِک عنصر" ٹول کو ٹوگل کرنے کے لیے، اور Shift+Click رنگ کی شکل کو HEX کوڈ میں تبدیل کرنے کے لیے۔ ہم یہ کرس کی ویب سائٹ میں استعمال ہونے والے رنگوں، فونٹس، فونٹ کے وزن اور فونٹ کے سائز کے بارے میں جاننے کے لیے کر رہے ہیں۔ یہ تمام معلومات فگما میں قریب سے مشابہہ ویجیٹ بنانے کے لیے اہم ہیں، جو ہمارا اگلا قدم ہو گا! آپ کر سکتے ہیں۔ ڈیزائن کردہ اجزاء کو پکڑو اور اسے اپنے کینوس میں استعمال کریں۔

میں یہاں زیادہ تفصیل میں نہیں جاؤں گا کیونکہ اس مضمون کا بنیادی موضوع کوڈ لکھ کر ویجٹ بنانا ہے۔ لیکن میں اتنا زور نہیں دے سکتا کہ آپ کی اچھی دیکھ بھال کرنا کتنا ضروری ہے۔ ویجٹ کا انداز… CSS-Tricks کے پاس پہلے سے ہی بہت زیادہ ہے۔ ڈیزائن پر مبنی فگما ٹیوٹوریلز; آپ کو انہیں اپنی پڑھنے کی فہرست میں شامل کرنے پر افسوس نہیں ہوگا۔

ہمارے ویجیٹ کے لیے ترتیب بنانا

ڈیزائن سے باہر ہونے کے بعد، اب وقت آگیا ہے کہ ہم اپنی پروگرامنگ انگلیوں کو باہر نکالیں اور اپنے ویجیٹ کے گیئرز بنانا شروع کریں۔

یہ بہت دلچسپ ہے کہ کس طرح فگما اپنے ڈیزائن بلڈنگ بلاکس کو React جیسے اجزاء میں ترجمہ کرتا ہے۔ آٹو لے آؤٹ فیچر والے فریم عناصر، مثال کے طور پر، بطور نمائیندگی کی جاتی ہے۔ <AutoLayout /> کوڈ میں جزو۔ اس کے علاوہ، ہم دو مزید اجزاء استعمال کریں گے: <Text /> اور <SVG />.

میرے فگما بورڈ پر ایک نظر ڈالیں۔… میں آپ سے قطعی طور پر آبجیکٹ ٹری پر توجہ مرکوز کرنے کو کہہ رہا ہوں۔ ہمیں اپنے ویجیٹ ڈیزائن کا JSX کوڈ میں ترجمہ کرنے کے قابل ہونے کی ضرورت ہے۔

جیسا کہ آپ دیکھ سکتے ہیں، ہمارا ڈیزائن کوٹس ویجیٹ تین اجزاء کو درآمد کرنے کا مطالبہ کرتا ہے۔ اس پر غور کرتے ہوئے اجزاء کی ایک معقول تعداد ہے۔ مکمل API صرف آٹھ پرت پر مبنی نوڈس پر مشتمل ہے۔ لیکن جیسا کہ آپ جلد ہی دیکھیں گے، یہ ماڈیول ہر قسم کی ترتیب کو تیار کرنے کے لیے کافی ہیں۔

// 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>;

اور، یقینا، ہم اب بھی اپنے کوٹیشن مارک SVGs کو نہیں دیکھ سکتے، تو آئیے اسے ٹھیک کرنے پر کام کرتے ہیں۔ دی <SVG/> جزو قبول a srcوہ پراپرٹی جو SVG عنصر کے لیے سورس کوڈ لیتی ہے۔ اس پر کہنے کو بہت کچھ نہیں ہے، تو آئیے اسے آسان رکھیں اور سیدھے کوڈ پر واپس جائیں:

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} />
  );
}

مجھے لگتا ہے کہ ہم سب اس بات پر متفق ہو سکتے ہیں کہ اب سب کچھ بہت واضح ہے! جب ہم چیزوں کا نام لیتے ہیں، تو ان کا مقصد اچانک ہمارے کوڈ کے قارئین پر بہت زیادہ واضح ہو جاتا ہے۔

ریئل ٹائم میں ہمارے ویجیٹ کا جائزہ لینا

فگما ویجٹ بناتے وقت ایک بہترین ڈویلپر کا تجربہ پیش کرتا ہے، بشمول (لیکن ان تک محدود نہیں) گرم دوبارہ لوڈنگ. اس خصوصیت کے ساتھ، ہم ریئل ٹائم میں اپنے ویجیٹ میں تبدیلیوں کو کوڈ اور پیش نظارہ کرنے کے قابل ہیں۔

ویجیٹس مینو کو کھول کر شروع کریں (Shift+I)، ڈیولپمنٹ ٹیب پر سوئچ کرنا اور اپنے نئے ویجیٹ کو بورڈ پر کلک کرنا یا گھسیٹنا۔ اپنے ویجیٹ کو تلاش کرنے سے قاصر ہیں؟ پریشان نہ ہوں، صرف تین نقطوں والے مینو پر کلک کریں اور اپنے ویجیٹ کو درآمد کریں۔ manifest.json فائل ہاں، اسے دوبارہ وجود میں لانے کے لیے بس اتنا ہی درکار ہے!

انتظار کریں، کیا آپ کو اپنی اسکرین کے نیچے غلطی کا پیغام ملا؟

اگر ایسا ہے تو آئیے تحقیقات کریں۔ پر کلک کریں "کنسول کھولیں۔"اور پڑھیں کہ اس کا کیا کہنا ہے۔ اگر کنسول کھولیں۔ بٹن ختم ہوگیا، ڈیبگنگ کنسول کھولنے کا ایک متبادل طریقہ موجود ہے۔ فگما لوگو پر کلک کریں، وجیٹس کے زمرے میں جائیں اور ڈویلپمنٹ مینو کو ظاہر کریں۔

اس غلطی کا امکان اس حقیقت کی وجہ سے ہے کہ ہم نے ابھی تک اپنے TypeScript کو JavaScript میں مرتب نہیں کیا ہے۔ ہم اسے کمانڈ لائن میں چلا کر کر سکتے ہیں۔ npm install اور npm run watch. (یا yarn اور yarn watch )۔ اس بار کوئی غلطی نہیں!

ایک اور رکاوٹ جس کا آپ کو سامنا ہوسکتا ہے وہ یہ ہے کہ جب بھی کوڈ کو تبدیل کیا جاتا ہے تو ویجیٹ دوبارہ پیش کرنے میں ناکام ہوجاتا ہے۔ ہم مندرجہ ذیل سیاق و سباق کے مینو کمانڈ کا استعمال کرتے ہوئے آسانی سے اپنے ویجیٹ کو اپ ڈیٹ کرنے پر مجبور کر سکتے ہیں: وگیٹس → ویجیٹ کو دوبارہ رینڈر کریں۔.

ویجیٹ کو اسٹائل کرنا

جیسا کہ اس وقت کھڑا ہے، the لگ رہا ہے ہمارے ویجٹ ابھی بھی ہمارے آخری مقصد سے کافی دور ہیں۔

تو ہم کوڈ سے فگما اجزاء کو کیسے سٹائل کرتے ہیں؟ ہوسکتا ہے کہ سی ایس ایس کے ساتھ جیسا کہ ہم ایک ری ایکٹ پروجیکٹ میں کریں گے؟ منفی فگما ویجٹ کے ساتھ، تمام اسٹائل ایک سیٹ کے ذریعے ہوتا ہے۔ اچھی طرح سے دستاویزی سامان. ہمارے لیے خوش قسمتی، ان اشیاء کا نام تقریباً رکھا گیا ہے۔ یکساں طور پر فگما میں ان کے ہم منصبوں کو۔

ہم اپنے دونوں کو ترتیب دے کر شروع کریں گے۔ <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>;

ہم نے ابھی بہت ترقی کی ہے! آئیے محفوظ کریں اور فگما پر واپس جائیں یہ دیکھنے کے لیے کہ ہمارا ویجیٹ کیسا لگتا ہے۔ یاد رکھیں کہ فگما نئی تبدیلیوں پر خود بخود وجیٹس کو کس طرح دوبارہ لوڈ کرتا ہے؟

لیکن یہ ابھی تک وہاں نہیں ہے۔ ہمیں جڑ کے اجزاء میں پس منظر کا رنگ بھی شامل کرنا ہوگا:

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

ایک بار پھر، اپنے فگما بورڈ پر ایک نظر ڈالیں اور دیکھیں کہ کس طرح تبدیلیاں تقریباً فوری طور پر ویجیٹ میں جھلک سکتی ہیں۔

آئیے اس گائیڈ اور اسٹائل کے ساتھ آگے بڑھیں۔ <Text> اجزاء.

پر ایک نظر ڈالنے کے بعد وجیٹس API دستاویزات، یہ ایک بار پھر واضح ہے کہ جائیداد کے نام 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>

ویجیٹ میں ریاست شامل کرنا

ہمارا ویجیٹ فی الحال ایک ہی اقتباس دکھاتا ہے، لیکن ہم بے ترتیب قیمتوں کے پورے پول سے کھینچنا چاہتے ہیں۔ ہمیں شامل کرنا ہوگا۔ تھے ہمارے ویجیٹ کے لیے، جسے تمام React ڈویلپرز جانتے ہیں کہ ایک متغیر ہے جس کی تبدیلی ہمارے اجزاء کی دوبارہ رینڈرنگ کو متحرک کرتی ہے۔

فگما کے ساتھ، ریاست کے ساتھ بنائی جاتی ہے۔ useSyncedState کانٹا؛ یہ بہت زیادہ ہے رد عمل useState، لیکن اس کے لیے پروگرامرز کو ایک منفرد کلید بتانے کی ضرورت ہوتی ہے۔ یہ ضرورت اس حقیقت سے پیدا ہوتی ہے کہ فگما کو ہمارے ویجیٹ کی حالت کو ہم آہنگ کرنا چاہیے۔ تمام کلائنٹ جو ایک ہی ڈیزائن بورڈ کو دیکھ رہے ہوں گے، لیکن مختلف کمپیوٹرز کے ذریعے۔

const { useSyncedState } = widget;

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

بس یہی وہ تبدیلی ہے جس کی ہمیں ابھی ضرورت ہے۔ اگلے حصے میں، ہم انٹرنیٹ سے ڈیٹا حاصل کرنے کا طریقہ جانیں گے۔ سپوئلر الرٹ: یہ اتنا آسان نہیں جتنا لگتا ہے۔

نیٹ ورک سے ڈیٹا لایا جا رہا ہے۔

یاد کریں جب Figma نے ہمیں iFrame-enabled widget کے ساتھ شروع کرنے کا انتخاب دیا تھا۔ اگرچہ ہم اس اختیار کے ساتھ نہیں گئے، ہمیں پھر بھی اس کی کچھ خصوصیات کو نافذ کرنا ہوگا۔ مجھے بتانے دو کہ ہم صرف کال کیوں نہیں کر سکتے fetch() ہمارے ویجیٹ کوڈ کے اندر۔

جب آپ ویجیٹ استعمال کرتے ہیں، تو آپ اپنے کمپیوٹر پر جاوا اسکرپٹ کوڈ چلا رہے ہوتے ہیں جو کسی اور نے لکھا ہوتا ہے۔ اگرچہ تمام ویجٹس کا فگما کے عملے کے ذریعہ اچھی طرح سے جائزہ لیا جاتا ہے، یہ اب بھی ایک بہت بڑا حفاظتی سوراخ ہے کیونکہ ہم سب جانتے ہیں کہ کتنا نقصان جاوا اسکرپٹ کی ایک لائن سے بھی پیدا کیا جا سکتا ہے۔.

نتیجے کے طور پر، فگما آسانی سے نہیں کر سکتا eval() گمنام پروگرامرز کے ذریعہ لکھا ہوا کوئی ویجیٹ کوڈ۔ طویل کہانی مختصر، ٹیم نے فیصلہ کیا کہ بہترین حل ایک قریبی حفاظت والے سینڈ باکس ماحول میں تھرڈ پارٹی کوڈ چلانا ہے۔ اور جیسا کہ آپ نے اندازہ لگایا ہوگا، براؤزر APIs ایسے ماحول میں دستیاب نہیں ہیں۔

لیکن پریشان نہ ہوں، فگما کا اس دوسرے مسئلے کا حل ہے۔ <iframe>s کوئی بھی HTML کوڈ جسے ہم ایک فائل میں لکھتے ہیں، ترجیحاً کہا جاتا ہے۔ ui.html، کو تمام براؤزر APIs تک رسائی حاصل ہوگی۔ آپ سوچ رہے ہوں گے کہ ہم اس کوڈ کو ویجیٹ سے کیسے متحرک کرسکتے ہیں، لیکن ہم اس پر بعد میں غور کریں گے۔ ابھی، آئیے کوڈ میں واپس جائیں:

// 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()
    }
  })
}

جیسا کہ آپ دیکھ سکتے ہیں، ہم سب سے پہلے فگما کو اپنے پوشیدہ تک رسائی کو ظاہر کرنے کے لیے کہہ رہے ہیں۔ <iframe> اور نام کے ساتھ ایک ایونٹ کو متحرک کرنا "networkRequest". ہم میں اس ایونٹ کو سنبھال رہے ہیں۔ ui.html فائل کو چیک کرکے event.data.pluginMessage.type === 'networkRequest', اور پھر ڈیٹا واپس ویجیٹ پر پوسٹ کرنا۔

لیکن ابھی تک کچھ نہیں ہو رہا… ہم نے ابھی تک فون نہیں کیا۔ fetchData() فنکشن اگر ہم اسے براہ راست جزو فنکشن میں کہتے ہیں تو، کنسول میں درج ذیل خرابی ہوتی ہے:

Cannot use showUI during widget rendering.

فگما ہمیں فون نہ کرنے کو کہہ رہی ہے۔ showUI براہ راست فنکشن باڈی میں… تو، ہمیں اسے کہاں رکھنا چاہئے؟ اس کا جواب ایک نیا ہک اور ایک نیا فنکشن ہے: useEffect اور waitForTask. ہو سکتا ہے کہ آپ پہلے سے واقف ہوں۔ useEffect اگر آپ ایک React ڈویلپر ہیں، لیکن ہم اسے یہاں استعمال کریں گے تاکہ ویجیٹ کا جزو ماؤنٹ ہونے پر سرور سے ڈیٹا حاصل کر سکے۔

const { useEffect, waitForTask } = widget;

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

لیکن اس کے نتیجے میں ایک اور "خرابی" ہوگی جہاں ہمارا ویجیٹ ہمیشہ کے لیے ایک نئے اقتباس کے ساتھ دوبارہ پیش کرتا رہے گا۔ ایسا ہوتا ہے کیونکہ useEffect، تعریف کے مطابق، جب بھی ویجیٹ کی حالت بدلتی ہے تو دوبارہ متحرک ہوتی ہے، بلکہ جب ہم کال کرتے ہیں۔ fetchData. اور جبکہ ایک تکنیک ہے صرف کال کرنے کے لیے useEffect ایک بار ردعمل میں، یہ فگما کے نفاذ پر کام نہیں کرتا ہے۔ فگما کے دستاویزات سے:

اس وجہ سے کہ وجیٹس کیسے چلتے ہیں، useEffect ایک ہی حالت کے ساتھ متعدد بار بلائے جانے کو ہینڈل کرنا چاہئے۔

شکر ہے، ایک آسان حل ہے جس سے ہم فائدہ اٹھا سکتے ہیں اور کال کر سکتے ہیں۔ useEffect صرف ایک بار جب جزو پہلی بار ماؤنٹ ہوتا ہے، اور یہ جانچ کر کے ریاست کی اقدار اب بھی خالی ہیں یا نہیں:

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

ہو سکتا ہے کہ تم خوف زدہ ہو جاؤ"میموری کی رسائی حد سے باہر" غلطی یہ ہے پلگ ان اور ویجیٹ کی ترقی میں دیکھنے کے لئے کافی عام ہے. بس فگما کو دوبارہ شروع کریں اور یہ اب وہاں نہیں ہوگا۔

آپ نے محسوس کیا ہوگا کہ بعض اوقات، اقتباس کے متن میں عجیب و غریب حروف ہوتے ہیں۔

یہ ہیں یونیکوڈ حرف اور ہمیں انہیں کوڈ میں صحیح طریقے سے فارمیٹ کرنا چاہیے:

<!-- 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>

اور voilà، ہمارے ویجیٹ نے ہر بار ڈیزائن بورڈ میں شامل ہونے پر بالکل نیا ڈیزائن اقتباس حاصل کیا۔

ہمارے ویجیٹ میں پراپرٹی مینو شامل کرنا

جب کہ ہمارا ویجیٹ فوری طور پر ایک نیا اقتباس لاتا ہے، یہ بہت زیادہ عملی ہوگا اگر ہم اس عمل کو دوبارہ کریں لیکن اسے حذف کیے بغیر۔ یہ حصہ مختصر ہوگا کیونکہ حل کافی قابل ذکر ہے۔ کے ساتھ پراپرٹی مینو، ہم اپنے ویجیٹ میں ایک ہی کال کے ساتھ تعاملات شامل کرسکتے ہیں۔ 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 میں ویجیٹ کے جائزے کا ایک نازک عمل ہے جس میں 5 سے 10 کاروباری دن لگ سکتے ہیں۔ اور جب کہ ڈیزائن کوٹس ویجیٹ ہم نے مل کر بنایا ہے۔ پہلے سے ویجیٹ لائبریری میں، میں اب بھی ظاہر کروں گا کہ یہ وہاں کیسے پہنچا۔ براہ کرم اس ویجیٹ کو دوبارہ شائع کرنے کی کوشش نہ کریں کیونکہ اس کا نتیجہ صرف ہٹا دیا جائے گا۔. لیکن اگر آپ نے اس میں کچھ اہم تبدیلیاں کی ہیں، تو آگے بڑھیں اور کمیونٹی کے ساتھ اپنے ویجیٹ کا اشتراک کریں!

ویجیٹس مینو پر کلک کرکے شروع کریں (Shift+I) اور پر سوئچ کرنا ترقی ہمارے ویجیٹ کو دیکھنے کے لیے ٹیب۔ تین نقطوں والے مینو پر کلک کریں اور دبائیں۔ شائع.

فگما آپ کو اپنے ویجیٹ کے بارے میں کچھ تفصیلات درج کرنے کا اشارہ کرے گا، جیسے کہ عنوان، تفصیل، اور کچھ ٹیگز۔ ہمیں 128×128 آئیکن امیج اور 1920×960 بینر امیج کی بھی ضرورت ہوگی۔

ان تمام اثاثوں کو درآمد کرنے کے بعد، ہمیں اب بھی اپنے ویجیٹ کے اسکرین شاٹ کی ضرورت ہے۔ پبلشنگ موڈل کو بند کریں (فکر نہ کریں، آپ اپنا ڈیٹا کھو نہیں دیں گے) اور ایک دلچسپ سیاق و سباق کے مینو کو ظاہر کرنے کے لیے ویجیٹ پر دائیں کلک کریں۔ تلاش کریں۔ بطور کاپی/پیسٹ کریں۔زمرہ اور منتخب کریں PNG کے بطور کاپی کریں۔.

اس کے ساتھ، آئیے پبلشنگ موڈل پر واپس جائیں اور ویجیٹ کا اسکرین شاٹ پیسٹ کریں:

نیچے سکرول کریں اور آخر میں اپنا ماڈل شائع کریں۔ جشن منائیں! 🎉

Figma آپ کے ماڈل کے جائزے کی حیثیت کے بارے میں چند دنوں میں آپ سے رابطہ کرے گا۔ مسترد ہونے کی صورت میں، آپ کو دیا جائے گا۔ تبدیلیاں کرنے اور دوبارہ جمع کرانے کا موقع.

نتیجہ

ہم نے ابھی شروع سے ایک فگما ویجیٹ بنایا ہے! یہاں بہت سی چیزیں شامل نہیں ہیں، جیسے واقعات پر کلک کریں۔, ان پٹ فارمز، اور بہت زیادہ. آپ ویجیٹ کے لیے مکمل سورس کوڈ کو کھود سکتے ہیں۔ یہ GitHub ریپو.

ان لوگوں کے لیے جو اپنی فگما کی مہارت کو اعلیٰ سطح پر لے جانے کی خواہش رکھتے ہیں، میں تجویز کرتا ہوں کہ وجیٹس کمیونٹی کو تلاش کریں اور وہ چیز استعمال کریں جو آپ کی نظر کو متاثر کرتی ہے۔ مزید ویجٹ بناتے رہیں، اپنی React کی مہارتوں کو تیز کرتے رہیں، اور اس سے پہلے کہ آپ کو اس کا احساس ہو، آپ مجھے یہ سب کرنے کا طریقہ سکھائیں گے۔

مزید وسائل

جب میں یہ ویجیٹ بنا رہا تھا تو مجھے بہت ساری دستاویزات کا حوالہ دینا پڑا۔ میں نے سوچا کہ جو چیز مجھے سب سے زیادہ مدد کرنے کے لیے ملی ہے اسے شیئر کروں گا۔

مزید ویجٹ بنائیں:

زیادہ گہرائی میں ویجٹ سیکھیں:

وجیٹس بمقابلہ پلگ ان