ساخت ابزارک های تعاملی Figma

Figma همیشه همکاری بین توسعه دهندگان و طراحان را تشویق کرده است. در تلاش است تا گنجینه بی‌پایانی از افزونه‌های ساخته‌شده در جامعه را پیدا کند. به عناصر سه بعدی نیاز دارید؟ افزونه ای برای آن وجود دارد. به SVG های انتزاعی نیاز دارید؟ یک افزونه برای آن وجود دارد، بیش از حد.

همانطور که گفته شد، بخش طراحی Figma همیشه نسبتا ثابت بوده است - همیشه با مستطیل های غیرقابل حرکت متصل به یکدیگر از طریق تعاملات از پیش تعریف شده کاربر کار می کند. اما اگر به شما بگویم که طرح‌های شما می‌توانند ناگهان جان بگیرند چه می‌شود - که آنها می‌توانند متحرک، تعاملی و حتی حالت دار باشند؟ سپس، چه چیزی مفهوم را از پیاده سازی جدا می کند؟

فیگما اعلام کرد در ماه ژوئن که ویجت های جاوا اسکریپت را به جدول می آورد. اکنون، طراحان می توانند اجزای منطق محور را مستقیماً در Figma مرور و پیاده سازی کنند!

سلام به ابزارک API! می خواهید بدانید که چیست و چگونه از آن استفاده کنید؟ این دقیقاً همان کاری است که ما در این پست با هم انجام خواهیم داد.

ویجت‌های Figma فرصت‌های زیادی را در اختیار شما قرار می‌دهند

تصور کنید که شبانه روز با شریک زندگی خود برای طراحی یک برنامه رستوران بزرگ کار می کنید. شما هر دو در حال حاضر در یک تابلوی Figma همکاری می کنید. هر دوی شما دقیقاً یک سند را با تغییراتی که در حال رخ دادن است به اشتراک می گذارید.

مطمئناً می‌دانید که همکاری بیشتر از فرآیند طراحی را شامل می‌شود:

• مدیریت پروژه،
• میزبانی نظرسنجی برای جمع آوری رای،
• وارد کردن و تجسم داده های ساختگی،
• و شاید حتی انجام یک بازی چندنفره برای خنک شدن بعد از ساعت ها کار.

ما فقط به یک نفر نیاز داریم تا همه چیز را مدیریت کند و پیوندها را برای سایر اعضای گروه ارسال کند. اما اوه، این خیلی کارآمد نیست، اینطور است؟

خب، اینجاست که ابزارک ها وارد بازی می شوند. ما می‌توانیم همه این کارها را انجام دهیم - بله، همه چیز را بدون اینکه هرگز Figma را ترک کنیم.

در اینجا تنها چند روش برای استفاده از ویجت ها در Figma آورده شده است:

لیست می رود در و در. همانطور که می توانید بگویید، در حال حاضر تعداد زیادی ویجت وجود دارد که می توانید آزادانه در اسناد خود از آنها استفاده کنید. در واقع، می توانید ابزارک ها را مستقیماً از منوی ابزارک ها به برد خود اضافه کنید (Shift+I).

اما ما اینجا نیستیم تا نحوه استفاده از ویجت ها را بیاموزیم، زیرا این کار آسان است. اجازه دهید بهترین کار را انجام دهیم: ویجت Figma خود را ایجاد می کنیم! این یکی الهام گرفته شده است وب سایت نقل قول های طراحی کریس کویر. ما API را می گیریم، آن را به ویجت وارد می کنیم، سپس نقل قول های طراحی تصادفی را مستقیماً در Figma نمایش می دهیم.

در اینجا چیزی است که ما نیاز داریم

من دوست ندارم حامل خبرهای بد باشم، اما برای توسعه ویجت ها باید روی ویندوز یا مک باشید. کاربران لینوکس، متاسفم، اما شانس شما را ندارید. (هنوز می توانید از VM استفاده کنید اگر می خواهید دنبال کنید.)

ما می خواهیم که دسکتاپ Figma را دانلود کنید کاربرد. ساده ترین راه برای شروع، تولید یک قالب ویجت، مستقیماً از برنامه است.

بیایید با باز کردن منوی ابزارک ها یک برد جدید ایجاد کنیم (Shift+ Iسوئیچ کردن به پروژه برگه، و ایجاد یک مورد جدید.

پس از آن، Figma از شما می‌خواهد که ویجت جدید را نام‌گذاری کنید و تصمیم بگیرید که آیا این ویجت مناسب‌تر است یا خیر. تابلوهای طراحی یا تابلوهای FigJam هم. گزینه قبلی برای اهداف این مقاله کافی است.

و سفارشی سازی به اینجا ختم نمی شود. Figma همچنین به شما این امکان را می دهد که با یک ویجت شمارنده از پیش ساخته شده یا یک جایگزین با قابلیت iFrame شروع کنید که به شما امکان دسترسی به Canvas و Fetch API (و همچنین سایر APIهای مرورگر) را می دهد. ما گزینه ساده "Empty" را انتخاب می کنیم، اما در نهایت خودمان آن را تغییر می دهیم تا از Fetch API استفاده کنیم.

سپس از شما خواسته می شود که پروژه ویجت جدید خود را در یک فهرست خاص در سیستم خود ذخیره کنید. پس از انجام این کار، ترمینال خود را راه اندازی کنید و آن را به آن پوشه هدایت کنید. هنوز هیچ دستوری را اجرا نکنید - ما بعداً این کار را انجام خواهیم داد و با هدف یادگیری بیشتر در مورد Widgets API به طور هدفمند با خطا مواجه خواهیم شد.

طراحی ویجت

ما طرح را مستقیماً از آن بیرون می کشیم وب سایت نقل قول های طراحی کریس کویر. بنابراین، بیایید به آنجا برویم و با فعال کردن DevTools وارد آن شویم.

دو میانبر کلیدی که من در اینجا استفاده می کنم عبارتند از Ctrl+Shift+C (و یا Cmd+Shift+C) برای تغییر دادن ابزار "Pick element" و Shift+Click برای تغییر فرمت رنگ به کد HEX. ما این کار را انجام می دهیم تا در مورد رنگ ها، فونت ها، وزن فونت ها و اندازه فونت های مورد استفاده در وب سایت کریس بیاموزیم. همه این اطلاعات برای ساختن یک ویجت بسیار شبیه در Figma حیاتی است، که گام بعدی ما خواهد بود! تو می توانی جزء طراحی شده را بگیرید و از آن در بوم خود استفاده کنید.

من در اینجا به جزئیات زیادی نمی پردازم زیرا موضوع اصلی این مقاله ساخت ویجت ها با نوشتن کد است. اما نمی توانم به اندازه کافی تاکید کنم که مراقبت از شما چقدر مهم است سبک ویجت ها… CSS-Tricks در حال حاضر دارای تعداد زیادی از آموزش طراحی گرا Figma; از افزودن آنها به لیست خواندن خود پشیمان نخواهید شد.

ایجاد طرح بندی برای ویجت ما

با طراحی خارج از مسیر، زمان آن رسیده است که انگشتان برنامه نویسی خود را برداریم و شروع به ساخت چرخ دنده های ویجت خود کنیم.

بسیار جالب است که Figma چگونه بلوک های ساختمانی طراحی خود را به اجزای React مانند ترجمه می کند. عناصر قاب با ویژگی طرح‌بندی خودکار، برای مثال، به‌عنوان نشان داده می‌شوند <AutoLayout /> جزء در کد علاوه بر آن، از دو جزء دیگر نیز استفاده خواهیم کرد: <Text /> و <SVG />.

به برد Figma من نگاهی بیندازید... من دقیقاً از شما می خواهم که روی درخت شی تمرکز کنید. این چیزی است که ما به آن نیاز داریم تا بتوانیم طراحی ویجت خود را به کد JSX ترجمه کنیم.

همانطور که می بینید، ویجت نقل قول طراحی ما نیاز به واردات سه جزء دارد. با توجه به اینکه API کامل فقط شامل هشت گره مبتنی بر لایه است. اما همانطور که به زودی خواهید دید، این ماژول ها برای ساخت انواع طرح بندی ها بیش از اندازه کافی هستند.

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

و با این کار، ما تمام آنچه را که نیاز داریم برای ادامه دادن و ساختن اسکلت ویجت خود مانند React داریم:

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/> جزء قبول الف 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} />
  );
}

من فکر می کنم همه ما می توانیم قبول کنیم که همه چیز اکنون بسیار واضح تر است! وقتی چیزها را نام می بریم، ناگهان هدف آنها برای خوانندگان کد ما آشکارتر می شود.

پیش نمایش ویجت ما در زمان واقعی

Figma یک تجربه توسعه‌دهنده عالی در هنگام ساخت ویجت‌ها ارائه می‌دهد، از جمله (اما نه محدود به) بارگذاری مجدد داغ. با استفاده از این ویژگی، ما قادر به کدنویسی و پیش نمایش تغییرات در ویجت خود در زمان واقعی هستیم.

با باز کردن منوی ابزارک ها شروع کنید (Shift+I، به تب توسعه بروید و ویجت جدید خود را کلیک کنید یا به برد بکشید. نمی توانید ویجت خود را پیدا کنید؟ نگران نباشید، فقط روی منوی سه نقطه کلیک کنید و ویجت خود را وارد کنید manifest.json فایل. بله، این تمام چیزی است که لازم است آن را به وجود بیاورید!

صبر کنید، آیا در پایین صفحه پیام خطا دریافت کردید؟

اگر چنین است، بیایید بررسی کنیم. روی ” کلیک کنیدکنسول را باز کنیدو آنچه را که برای گفتن دارد بخوانید. اگر کنسول را باز کنید دکمه از بین رفته است، یک راه جایگزین برای باز کردن کنسول اشکال زدایی وجود دارد. روی لوگوی Figma کلیک کنید، به دسته ابزارک ها بروید و منوی توسعه را نشان دهید.

این خطا احتمالاً به این دلیل است که ما تایپ اسکریپت خود را هنوز در جاوا اسکریپت کامپایل نکرده ایم. ما می توانیم این کار را در خط فرمان با اجرا انجام دهیم npm install و npm run watch. (یا yarn و yarn watch ). این بار هیچ خطایی وجود ندارد!

یکی دیگر از موانعی که ممکن است به آن برخورد کنید این است که هر زمانی که کد تغییر می‌کند، ویجت دوباره ارائه نمی‌شود. ما به راحتی می توانیم ویجت خود را با استفاده از دستور منوی زمینه زیر مجبور به به روز رسانی کنیم: ابزارک → ویجت را دوباره رندر کنید.

سبک دادن به ویجت

همانطور که در حال حاضر ایستاده است، به نظر می رسد ویجت های ما هنوز با هدف نهایی ما فاصله دارند.

بنابراین چگونه اجزای Figma را از روی کد استایل کنیم؟ شاید با CSS مانند کاری که در پروژه React انجام می دهیم؟ منفی. با ویجت های 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 برگردیم تا ببینیم ویجت ما چگونه است. به یاد دارید که Figma چگونه ویجت ها را به صورت خودکار پس از تغییرات جدید بارگیری می کند؟

اما هنوز کاملاً وجود ندارد. همچنین باید یک رنگ پس زمینه به مولفه ریشه اضافه کنیم:

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

مجدداً به برد Figma خود نگاهی بیندازید و متوجه شوید که چگونه تغییرات می توانند تقریباً بلافاصله به ویجت منعکس شوند.

بیایید در امتداد این راهنما حرکت کنیم و به آن استایل دهیم <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 می دانند متغیری است که تغییر آن باعث رندر مجدد مولفه ما می شود.

با Figma حالت با the ایجاد می شود 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() هر کد ویجتی که توسط برنامه نویسان ناشناس نوشته شده است. در خلاصه داستان، تیم تصمیم گرفت که بهترین راه حل اجرای کدهای شخص ثالث در یک محیط جعبه ایمنی کاملاً محافظت شده است. و همانطور که ممکن است حدس بزنید، APIهای مرورگر در چنین محیطی در دسترس نیستند.

اما نگران نباشید، راه حل Figma برای این مشکل دوم است <iframe>س هر کد 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()
    }
  })
}

همانطور که می بینید، ابتدا به Figma می گوییم که دسترسی به hidden ما را افشا کند <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 یک بار در React، روی پیاده سازی Figma کار نمی کند. از اسناد 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>

و 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 به سازمان ها امکان راه اندازی را می دهد خصوصی ویدجت برای استفاده داخلی، انتشار این برنامه های کوچک در جهان بسیار رایج تر است.

Figma یک فرآیند بررسی ویجت ظریف دارد که ممکن است 5 تا 10 روز کاری طول بکشد. و در حالی که ویجت نقل قول طراحی ما با هم ساخته شده است در حال حاضر در کتابخانه ویجت، من همچنان نشان خواهم داد که چگونه به آنجا رسیده است. لطفاً سعی نکنید دوباره این ویجت را منتشر کنید زیرا این کار فقط منجر به حذف می شود. اما اگر تغییرات قابل توجهی در آن ایجاد کردید، ادامه دهید و ویجت خود را با جامعه به اشتراک بگذارید!

با کلیک کردن روی منوی ابزارک ها شروع کنید (Shift+I) و جابجایی به پروژه برای مشاهده ویجت ما را انتخاب کنید. روی منوی سه نقطه کلیک کرده و فشار دهید منتشر کردن.

Figma از شما می خواهد که برخی از جزئیات مربوط به ویجت خود را وارد کنید، مانند عنوان، توضیحات و برخی برچسب ها. همچنین به یک تصویر آیکون 128×128 و یک تصویر بنر 1920×960 نیاز داریم.

پس از وارد کردن همه این دارایی ها، ما همچنان به یک اسکرین شات از ویجت خود نیاز داریم. مدال انتشار را ببندید (نگران نباشید، داده های خود را از دست نخواهید داد) و روی ویجت کلیک راست کنید تا یک منوی زمینه جالب نمایش داده شود. پیدا کن کپی/پیست کردن به عنواندسته بندی کنید و انتخاب کنید به صورت PNG کپی کنید.

پس از انجام این کار، بیایید به حالت انتشار برگردیم و اسکرین شات ویجت را بچسبانیم:

به پایین بروید و در نهایت مدال خود را منتشر کنید. جشن گرفتن! 🎉

Figma تا چند روز دیگر در مورد وضعیت بررسی مودال شما با شما تماس خواهد گرفت. در صورت رد، به شما داده می شود فرصتی برای ایجاد تغییرات و ارسال مجدد.

نتیجه

ما فقط یک ویجت Figma را از ابتدا ساختیم! موارد زیادی وجود دارد که در اینجا پوشش داده نشده است، مانند روی رویدادها کلیک کنید, فرم های ورودیو خیلی بیشتر. می‌توانید کد منبع کامل ویجت را در آن جستجو کنید این مخزن GitHub.

به کسانی که می‌خواهند مهارت‌های Figma خود را به سطوح بالاتری برسانند، پیشنهاد می‌کنم انجمن ابزارک‌ها را کاوش کرده و از آنچه که توجه شما را به‌عنوان الهام می‌گیرد استفاده کنید. به ساخت ویجت‌های بیشتر ادامه دهید، مهارت‌های React خود را تقویت کنید، و قبل از اینکه متوجه شوید، به من یاد می‌دهید که چگونه همه این کارها را انجام دهم.

منابع بیشتر

در حین ساختن این ویجت، مجبور شدم به اسناد زیادی مراجعه کنم. فکر کردم آنچه را که یافتم برای کمک بیشتر به اشتراک بگذارم.

ویجت های بیشتری بسازید:

ویجت ها را با عمق بیشتری بیاموزید:

ویجت ها در مقابل پلاگین ها