ইন্টারেক্টিভ ফিগমা উইজেট তৈরি করা

ফিগমা সবসময় ডেভেলপার এবং ডিজাইনারদের মধ্যে সহযোগিতাকে উৎসাহিত করেছে। এটি সম্প্রদায়ের তৈরি প্লাগইনগুলির একটি অন্তহীন কোষাগারের জন্য প্রচেষ্টা করে৷ 3D উপাদান প্রয়োজন? যে জন্য একটি প্লাগইন আছে. বিমূর্ত SVGs প্রয়োজন? যে জন্য একটি প্লাগইন আছে, খুব।

এটি বলেছে, ফিগমার নকশা অংশটি সর্বদা তুলনামূলকভাবে স্থির থাকে — সর্বদা পূর্বনির্ধারিত ব্যবহারকারীর মিথস্ক্রিয়াগুলির মাধ্যমে একে অপরের সাথে সংযুক্ত অস্থাবর আয়তক্ষেত্রগুলির সাথে কাজ করে। কিন্তু যদি আমি আপনাকে বলি যে আপনার ডিজাইনগুলি হঠাৎ করেই জীবন্ত হতে পারে - যে সেগুলি অ্যানিমেটেড, ইন্টারেক্টিভ এবং এমনকি স্টেটফুল হতে পারে? তারপর, বাস্তবায়ন থেকে ধারণা আলাদা হবে কি?

ফিগমা জুন ঘোষণা যে এটি টেবিলে জাভাস্ক্রিপ্ট-চালিত উইজেট আনছে। এখন, ডিজাইনাররা সরাসরি ফিগমাতে যুক্তি-চালিত উপাদানগুলি ব্রাউজ এবং প্রয়োগ করতে পারে!

হ্যালো বলুন উইজেট API! আপনি এটি কি এবং কিভাবে এটি ব্যবহার করতে চান জানতে চান? যে ঠিক কি আমরা এই পোস্টে একসঙ্গে করতে যাচ্ছেন.

ফিগমা উইজেটগুলি অনেকগুলি সম্ভাবনা উন্মুক্ত করে৷

কল্পনা করুন যে আপনি একটি বড় রেস্তোঁরা অ্যাপ্লিকেশন ডিজাইন করতে আপনার সঙ্গীর সাথে চব্বিশ ঘন্টা কাজ করছেন। আপনি উভয়ই ইতিমধ্যে একই ফিগমা বোর্ডে সহযোগিতা করছেন; ফ্লাইতে ঘটতে থাকা পরিবর্তনগুলির সাথে আপনি দুজনেই একই নথি ভাগ করছেন৷

নিশ্চয়ই, আপনি ইতিমধ্যেই জানেন যে সহযোগিতায় শুধু নকশা প্রক্রিয়ার চেয়েও বেশি কিছু জড়িত:

• প্রকল্প ব্যবস্থাপনা,
• ভোট সংগ্রহের জন্য পোল আয়োজন করা,
• মক ডেটা আমদানি এবং ভিজ্যুয়ালাইজ করা,
• এবং সম্ভবত এমনকি অনেক ঘন্টা কাজ করার পরে ঠান্ডা করার জন্য একটি মাল্টিপ্লেয়ার গেম খেলা।

আমাদের শুধুমাত্র একজন ব্যক্তিকে সবকিছু পরিচালনা করতে এবং গ্রুপের অন্যান্য সদস্যদের লিঙ্ক পাঠাতে হবে। কিন্তু ওহ, এটা খুব দক্ষ নয়, তাই না?

ঠিক আছে, সেখানেই উইজেটগুলি খেলতে আসে। আমরা ফিগমা ত্যাগ না করেই - হ্যাঁ, সবকিছুই অনুমানযোগ্যভাবে করতে পারি।

আপনি ফিগমাতে উইজেটগুলি ব্যবহার করতে চাইতে পারেন এমন কয়েকটি উপায় এখানে রয়েছে:

তালিকা যায় অন ​​এবং অন. আপনি বলতে পারেন, ইতিমধ্যেই প্রচুর উইজেট রয়েছে যা আপনি আপনার নথিতে অবাধে ব্যবহার করতে পারেন। আসলে, আপনি উইজেট মেনু থেকে সরাসরি আপনার বোর্ডে উইজেট যোগ করতে পারেন (Shift+I).

কিন্তু আমরা এখানে উইজেট ব্যবহার করতে শিখতে আসিনি, কারণ এটা সহজ। আসুন আমরা যা করি তা করি: আমরা আমাদের নিজস্ব ফিগমা উইজেট তৈরি করব! এই এক দ্বারা অনুপ্রাণিত করা হবে ক্রিস কোয়েরের ডিজাইনের উদ্ধৃতি ওয়েবসাইট. আমরা এপিআই নেব, এটিকে উইজেটে ফিড করব, তারপর সরাসরি ফিগমাতে র্যান্ডম ডিজাইনের উদ্ধৃতিগুলি প্রদর্শন করব।

এখানে আমাদের কি প্রয়োজন

আমি খারাপ খবরের বাহক হতে পছন্দ করি না, তবে উইজেটগুলি বিকাশ করার জন্য আপনাকে অবশ্যই উইন্ডোজ বা ম্যাকে থাকতে হবে। লিনাক্স ব্যবহারকারীরা, আমি দুঃখিত, কিন্তু আপনি ভাগ্যের বাইরে। (আপনি এখনও পারেন একটি VM ব্যবহার করুন আপনি যদি অনুসরণ করতে চান।)

আমরা বোধ করছি ফিগমা ডেস্কটপ ডাউনলোড করুন আবেদন শুরু করার সবচেয়ে সহজ উপায় হল অ্যাপ থেকে সরাসরি একটি উইজেট টেমপ্লেট তৈরি করা।

আসুন উইজেট মেনু খুলে একটি নতুন বোর্ড তৈরি করি (Shift+ I), সুইচিং উন্নয়ন ট্যাব, এবং একটি নতুন আইটেম তৈরি।

এর পরে, ফিগমা আপনাকে নতুন উইজেটের নাম দেওয়ার জন্য অনুরোধ করবে এবং সিদ্ধান্ত নেবে যে এটির জন্য আরও উপযুক্ত কিনা ডিজাইন বোর্ড বা ফিগজ্যাম বোর্ড খুব প্রাক্তন বিকল্প এই নিবন্ধের উদ্দেশ্যে যথেষ্ট.

আর কাস্টমাইজেশন এখানেই শেষ নয়; Figma আপনাকে একটি প্রাক-তৈরি কাউন্টার উইজেট বা একটি iFrame-সক্ষম বিকল্প দিয়ে শুরু করার বিকল্পও দেবে যা আপনাকে ক্যানভাস এবং ফেচ API (সেসাথে অন্যান্য সমস্ত ব্রাউজার API) অ্যাক্সেস দেয়। আমরা সহজ "খালি" বিকল্পটি নিয়ে যাব, কিন্তু আমরা শেষ পর্যন্ত ফেচ এপিআই ব্যবহার করতে এটিকে নিজেরাই পরিবর্তন করব।

তারপরে আপনাকে আপনার সিস্টেমের একটি বিশেষ ডিরেক্টরিতে আপনার নতুন উইজেট প্রকল্পটি সংরক্ষণ করার জন্য অনুরোধ করা হবে। এটি হয়ে গেলে, আপনার টার্মিনাল চালু করুন এবং এটিকে সেই ফোল্ডারে নির্দেশ করুন। এখনও কোনো কমান্ড চালাবেন না — আমরা এটি পরে করব এবং উদ্দেশ্যমূলকভাবে উইজেট এপিআই সম্পর্কে আরও জানার লক্ষ্যে একটি ত্রুটি পাব।

উইজেট ডিজাইন করা

আমরা সরাসরি থেকে নকশা টান করছি ক্রিস কোয়েরের ডিজাইনের উদ্ধৃতি ওয়েবসাইট. সুতরাং, চলুন সেখানে গিয়ে DevTools ফায়ার করে ডুবে যাই।

আমি এখানে ব্যবহার করছি যে দুটি কী শর্টকাট হয় Ctrl+Shift+C (অথবা Cmd+Shift+C) "পিক এলিমেন্ট" টুলটি টগল করতে এবং Shift+Click রঙ বিন্যাস HEX কোড পরিবর্তন করতে. আমরা ক্রিসের ওয়েবসাইটে ব্যবহৃত রঙ, ফন্ট, ফন্টের ওজন এবং ফন্টের আকার সম্পর্কে জানতে এটি করছি। এই সমস্ত তথ্য Figma-তে একটি ঘনিষ্ঠ-সদৃশ উইজেট তৈরি করার জন্য গুরুত্বপূর্ণ, যা হবে আমাদের পরবর্তী পদক্ষেপ! তুমি পারবে পরিকল্পিত উপাদান দখল এবং আপনার নিজের ক্যানভাসে এটি ব্যবহার করুন।

আমি এখানে খুব বেশি বিশদে যাব না কারণ এই নিবন্ধের মূল বিষয় হল কোড লিখে উইজেট তৈরি করা। কিন্তু আমি যথেষ্ট জোর দিতে পারি না যে আপনার ভাল যত্ন নেওয়া কতটা গুরুত্বপূর্ণ উইজেট' শৈলী… CSS-ট্রিকস ইতিমধ্যেই প্রচুর আছে ডিজাইন-ভিত্তিক ফিগমা টিউটোরিয়াল; আপনি তাদের আপনার পড়ার তালিকায় যোগ করার জন্য দুঃখিত হবেন না।

আমাদের উইজেটের জন্য লেআউট তৈরি করা হচ্ছে

নকশার বাইরে থাকা অবস্থায়, আমাদের প্রোগ্রামিং আঙ্গুলগুলি বের করে নেওয়ার এবং আমাদের উইজেটের গিয়ারগুলি তৈরি করা শুরু করার সময় এসেছে৷

এটি খুবই আকর্ষণীয় যে কিভাবে ফিগমা তার ডিজাইন বিল্ডিং ব্লকগুলিকে প্রতিক্রিয়ার মতো উপাদানগুলিতে অনুবাদ করে। স্বয়ংক্রিয়-লেআউট বৈশিষ্ট্য সহ ফ্রেম উপাদানগুলি, উদাহরণস্বরূপ, হিসাবে উপস্থাপন করা হয় <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>;

এবং, অবশ্যই, আমরা এখনও আমাদের উদ্ধৃতি চিহ্ন SVG দেখতে পাচ্ছি না, তাই আসুন এটি ঠিক করার জন্য কাজ করি। দ্য <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 ফাইল হ্যাঁ, এটিকে অস্তিত্বে ফিরিয়ে আনতে এতটুকুই লাগে!

অপেক্ষা করুন, আপনি কি আপনার স্ক্রিনের নীচে একটি ত্রুটি বার্তা পেয়েছেন?

যদি তাই হয়, আসুন তদন্ত করা যাক। ক্লিক করুন "কনসোল খুলুন"এবং এটি যা বলে তা পড়ুন। যদি কনসোল খুলুন বোতামটি চলে গেছে, ডিবাগিং কনসোল খোলার একটি বিকল্প উপায় আছে। ফিগমা লোগোতে ক্লিক করুন, উইজেট বিভাগে যান এবং বিকাশ মেনুটি প্রকাশ করুন।

এই ত্রুটিটি সম্ভবত এই কারণে যে আমরা এখনও জাভাস্ক্রিপ্টে আমাদের টাইপস্ক্রিপ্ট কম্পাইল করিনি। আমরা রান করে কমান্ড লাইনে তা করতে পারি npm install এবং npm run watch. (বা yarn এবং yarn watch ) এই সময় কোন ত্রুটি!

আরও একটি বাধা যা আপনি আঘাত করতে পারেন তা হল কোড পরিবর্তন করা হলে উইজেটটি পুনরায় রেন্ডার করতে ব্যর্থ হয়। নিম্নলিখিত প্রসঙ্গ মেনু কমান্ড ব্যবহার করে আমরা সহজেই আমাদের উইজেটকে আপডেট করতে বাধ্য করতে পারি: উইজেট → উইজেট পুনরায় রেন্ডার করুন.

উইজেট স্টাইল করা

এটি বর্তমানে দাঁড়িয়ে আছে, সৌন্দর্য আমাদের উইজেটগুলি এখনও আমাদের চূড়ান্ত লক্ষ্য থেকে বেশ দূরে।

তাহলে কিভাবে আমরা কোড থেকে Figma উপাদান স্টাইল করব? হয়তো CSS এর সাথে যেমন আমরা একটি প্রতিক্রিয়া প্রকল্পে করব? নেতিবাচক. ফিগমা উইজেট সহ, সব স্টাইলিং একটি সেট মাধ্যমে ঘটে ভাল নথিভুক্ত প্রপস. আমাদের জন্য ভাগ্যবান, এই আইটেম প্রায় নামকরণ করা হয় অভিন্নভাবে ফিগমাতে তাদের প্রতিপক্ষের কাছে।

আমরা আমাদের দুটি কনফিগার করে শুরু করব <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>

উইজেটে স্থিতি যোগ করা হচ্ছে

আমাদের উইজেট বর্তমানে একই উদ্ধৃতি প্রদর্শন করে, কিন্তু আমরা উদ্ধৃতিগুলির সম্পূর্ণ পুল থেকে এলোমেলোভাবে টানতে চাই৷ আমাদের অবশ্যই যোগ করতে হবে অবস্থা আমাদের উইজেটে, যা সমস্ত প্রতিক্রিয়া বিকাশকারীরা জানেন একটি পরিবর্তনশীল যার পরিবর্তন আমাদের কম্পোনেন্টের পুনরায় রেন্ডারিংকে ট্রিগার করে।

ফিগমা দিয়ে, রাষ্ট্র তৈরি করা হয় useSyncedState হুক; এটা বেশ অনেক প্রতিক্রিয়া useState, কিন্তু এর জন্য প্রোগ্রামারদের একটি অনন্য কী নির্দিষ্ট করতে হবে। এই প্রয়োজনীয়তাটি এই সত্য থেকে উদ্ভূত হয় যে ফিগমাকে অবশ্যই আমাদের উইজেটের অবস্থা জুড়ে সিঙ্ক করতে হবে সব ক্লায়েন্ট যারা একই ডিজাইন বোর্ড দেখছে, কিন্তু বিভিন্ন কম্পিউটারের মাধ্যমে।

const { useSyncedState } = widget;

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

যে সব পরিবর্তন আমাদের এখন প্রয়োজন. পরবর্তী বিভাগে, আমরা কীভাবে ইন্টারনেট থেকে ডেটা আনতে হয় তা বের করব। স্পয়লার সতর্কতা: এটি যতটা সহজ মনে হয় তত সহজ নয়।

নেটওয়ার্ক থেকে ডেটা আনা হচ্ছে

স্মরণ করুন যখন ফিগমা আমাদের একটি iFrame-সক্ষম উইজেট দিয়ে শুরু করার পছন্দ দিয়েছিল। যদিও আমরা সেই বিকল্পের সাথে যাইনি, তবুও আমাদের অবশ্যই এর কিছু বৈশিষ্ট্য বাস্তবায়ন করতে হবে। আমাকে ব্যাখ্যা করা যাক কেন আমরা কেবল কল করতে পারি না fetch() আমাদের উইজেট কোডের মধ্যে।

আপনি যখন একটি উইজেট ব্যবহার করেন, তখন আপনি আপনার নিজের কম্পিউটারে জাভাস্ক্রিপ্ট কোড চালাচ্ছেন যা অন্য কেউ লিখেছে। যদিও সমস্ত উইজেটগুলি ফিগমা কর্মীদের দ্বারা পুঙ্খানুপুঙ্খভাবে পর্যালোচনা করা হয়, এটি এখনও একটি বিশাল নিরাপত্তা গর্ত কারণ আমরা সবাই জানি কতটা জাভাস্ক্রিপ্টের এক লাইন দ্বারাও ক্ষতি হতে পারে.

ফলস্বরূপ, ফিগমা সহজভাবে পারে না eval() বেনামী প্রোগ্রামারদের দ্বারা লিখিত কোনো উইজেট কোড। সংক্ষেপে, দলটি সিদ্ধান্ত নিয়েছে যে সর্বোত্তম সমাধান হল একটি ঘনিষ্ঠভাবে সুরক্ষিত স্যান্ডবক্স পরিবেশে তৃতীয় পক্ষের কোড চালানো। এবং আপনি অনুমান করতে পারেন, ব্রাউজার API গুলি এই ধরনের পরিবেশে অনুপলব্ধ।

কিন্তু চিন্তা করবেন না, ফিগমার এই দ্বিতীয় সমস্যার সমাধান <iframe>s যেকোন HTML কোড যা আমরা একটি ফাইলে লিখি, বিশেষভাবে বলা হয় ui.html, সমস্ত ব্রাউজার API-এ অ্যাক্সেস থাকবে। আপনি হয়তো ভাবছেন যে আমরা কীভাবে উইজেট থেকে এই কোডটি ট্রিগার করতে পারি, কিন্তু আমরা এটি পরে দেখব। এই মুহূর্তে, আসুন কোডে ফিরে যাই:

// 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 আপনি যদি একজন প্রতিক্রিয়া বিকাশকারী হন তবে উইজেট উপাদানটি মাউন্ট হলে আমরা সার্ভার থেকে ডেটা আনার জন্য এটি ব্যবহার করব।

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>

এবং এখানে, আমাদের উইজেট প্রতিবার ডিজাইন বোর্ডে যোগ করার সময় একটি একেবারে নতুন ডিজাইনের উদ্ধৃতি এনেছে।

আমাদের উইজেটে একটি সম্পত্তি মেনু যোগ করা হচ্ছে

যদিও আমাদের উইজেট ইনস্ট্যান্টেশনের পরে একটি নতুন উদ্ধৃতি নিয়ে আসে, এটি আরও বেশি ব্যবহারিক হবে যদি আমরা এই প্রক্রিয়াটি আবার করতে পারি তবে এটি মুছে না দিয়ে। এই বিভাগটি সংক্ষিপ্ত হবে কারণ সমাধানটি বেশ উল্লেখযোগ্য। সঙ্গে সম্পত্তি মেনু, আমরা একটি একক কল দিয়ে আমাদের উইজেটে ইন্টারঅ্যাক্টিভিটি যোগ করতে পারি 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 রেপো.

যারা তাদের ফিগমা দক্ষতাকে আরও উচ্চতর স্তরে নিয়ে যেতে চান, আমি উইজেটস সম্প্রদায়কে অন্বেষণ করার এবং অনুপ্রেরণা হিসাবে আপনার নজর কেড়ে নেওয়া জিনিসগুলি ব্যবহার করার পরামর্শ দিচ্ছি। আরও উইজেট তৈরি করতে থাকুন, আপনার প্রতিক্রিয়া দক্ষতাগুলিকে তীক্ষ্ণ করতে থাকুন এবং আপনি এটি উপলব্ধি করার আগেই, আপনি আমাকে শিখিয়ে দেবেন কীভাবে এই সব করতে হয়।

আরও সম্পদ

আমি এই উইজেটটি তৈরি করার সময় আমাকে প্রচুর ডকুমেন্টেশন উল্লেখ করতে হয়েছিল। আমি ভেবেছিলাম যে আমি সবচেয়ে বেশি সাহায্য করতে পেয়েছি তা শেয়ার করব।

আরও উইজেট তৈরি করুন:

আরও গভীরে উইজেট শিখুন:

উইজেট বনাম প্লাগইন