بناء الحاجيات Figma التفاعلية

شجعت Figma دائمًا التعاون بين المطورين والمصممين. إنها تسعى جاهدة إلى خزينة لا نهاية لها من المكونات الإضافية التي يصنعها المجتمع. هل تحتاج إلى عناصر ثلاثية الأبعاد؟ هناك مكون إضافي لذلك. تحتاج SVGs مجردة؟ هناك مكون إضافي لذلك، أيضا.

ومع ذلك ، كان جزء التصميم في Figma دائمًا ثابتًا نسبيًا - يعمل دائمًا مع مستطيلات غير متحركة متصلة ببعضها البعض من خلال تفاعلات المستخدم المحددة مسبقًا. ولكن ماذا لو أخبرتك أن تصميماتك قد تنبض بالحياة فجأة - ويمكن أن تكون متحركة وتفاعلية وحتى ذات حالة؟ إذن ، ما الذي سيفصل المفهوم عن التنفيذ؟

FIGMA أعلن في يونيو أنها تجلب الأدوات التي تعمل بجافا سكريبت إلى الجدول. الآن ، يمكن للمصممين تصفح وتنفيذ المكونات التي يحركها المنطق مباشرة في Figma!

ويقول مرحبا ل الحاجيات API! تريد أن تعرف ما هو وكيف تستخدمه؟ هذا بالضبط ما سنفعله معًا في هذا المنشور.

تفتح أدوات Figma الكثير من الاحتمالات

تخيل أنك تعمل على مدار الساعة مع شريكك لتصميم تطبيق مطعم كبير. أنتما تتعاونان بالفعل في نفس لوحة Figma ؛ يشارك كلاكما نفس المستند بالضبط مع التغييرات التي تحدث سريعًا.

بالتأكيد ، أنت تعلم بالفعل أن التعاون يتضمن أكثر من مجرد عملية التصميم:

• ادارة مشروع،
• استضافة صناديق الاقتراع لجمع الأصوات ،
• استيراد وتصور البيانات الوهمية ،
• وربما حتى لعب لعبة متعددة اللاعبين للتهدئة بعد ساعات طويلة من العمل.

نحن نطلب شخصًا واحدًا فقط لإدارة كل شيء وإرسال روابط إلى أعضاء آخرين في المجموعة. لكن أوه ، هذا ليس فعالًا جدًا ، أليس كذلك؟

حسنًا ، هذا هو المكان الذي تلعب فيه الأدوات المصغّرة. يمكننا تصور القيام بكل ذلك - نعم ، كل شيء - دون مغادرة Figma أبدًا.

فيما يلي بعض الطرق التي قد ترغب في استخدام عناصر واجهة المستخدم بها في Figma:

تذهب القائمة نحن ونحن. كما يمكنك أن تقول ، هناك بالفعل عدد كبير من الأدوات التي يمكنك استخدامها بحرية في مستنداتك. في الواقع ، يمكنك إضافة أدوات مباشرة إلى لوحتك من قائمة الأدوات (Shift+I).

لكننا لسنا هنا لتعلم كيفية استخدام الأدوات ، لأن ذلك سهل. دعونا نفعل أفضل ما نقوم به: سنقوم بإنشاء أداة Figma الخاصة بنا! هذا واحد سيكون مستوحى من موقع تصميم كريس كويير يقتبس. سنأخذ واجهة برمجة التطبيقات ، ونقوم بإدخالها في الأداة ، ثم نعرض اقتباسات تصميم عشوائية مباشرة في Figma.

هذا ما نحتاجه

لا أحب أن أكون حاملًا للأخبار السيئة ، ولكن من أجل تطوير الأدوات ، يجب أن تكون على نظام Windows أو Mac. مستخدمو Linux ، أنا آسف ، لكن لم يحالفك الحظ. (لا يزال بإمكانك استخدم VM إذا كنت تريد المتابعة.)

نحن ذاهبون قم بتنزيل برنامج Figma Desktop طلب. إن أبسط طريقة للبدء هي إنشاء قالب عنصر واجهة المستخدم مباشرة من التطبيق.

لنقم بإنشاء لوحة جديدة من خلال فتح قائمة الأدوات (Shift+ I) ، والتبديل إلى التطوير التجاري علامة التبويب ، وإنشاء عنصر جديد.

بعد ذلك ، سيطالبك Figma بتسمية الأداة الجديدة وتحديد ما إذا كانت مصممة أكثر لوحات التصميم أو لوحات FigJam جدا. الخيار الأول كافٍ لأغراض هذه المادة.

والتخصيص لا ينتهي هنا ؛ ستمنحك Figma أيضًا خيار البدء باستخدام عنصر واجهة مستخدم عداد مُعد مسبقًا أو بديل مُمكّن لـ iFrame والذي يمنحك أيضًا إمكانية الوصول إلى واجهات برمجة تطبيقات Canvas و Fetch (بالإضافة إلى جميع واجهات برمجة تطبيقات المتصفح الأخرى). سنستخدم خيار "Empty" البسيط ، لكننا في النهاية سنقوم بتعديله بأنفسنا للاستفادة من Fetch API.

سيُطلب منك بعد ذلك حفظ مشروع عنصر واجهة المستخدم الجديد في دليل خاص في نظامك. بمجرد الانتهاء من ذلك ، قم بتشغيل الجهاز الطرفي ووجهه إلى هذا المجلد. لا تقم بتشغيل أي أوامر حتى الآن - سنفعل ذلك لاحقًا ونحصل عن قصد على خطأ بهدف معرفة المزيد حول واجهة برمجة التطبيقات Widgets.

تصميم القطعة

نحن نسحب التصميم مباشرة من موقع تصميم كريس كويير يقتبس. لذا ، دعنا نذهب إلى هناك ونغوص عن طريق إطلاق DevTools.

الاختصاران الرئيسيان اللذان أستخدمهما هنا هما Ctrl+Shift+C (أو Cmd+Shift+C) لتبديل أداة "اختيار العنصر" ، و Shift+Click لتغيير تنسيق اللون إلى رمز HEX. نقوم بذلك للتعرف على الألوان والخطوط وأوزان الخطوط وأحجام الخطوط المستخدمة في موقع Chris على الويب. كل هذه المعلومات ضرورية لبناء عنصر واجهة مستخدم يشبه إلى حد كبير في Figma ، والذي سيكون خطوتنا التالية! تستطيع الاستيلاء على المكون المصمم واستخدمه في لوحتك الخاصة.

لن أخوض في الكثير من التفاصيل هنا لأن الموضوع الرئيسي لهذه المقالة هو إنشاء عناصر واجهة عن طريق كتابة التعليمات البرمجية. لكن لا يمكنني التأكيد بما فيه الكفاية على مدى أهمية العناية الجيدة بك أسلوب الحاجيات... CSS-Tricks لديها بالفعل عدد كبير من دروس فيجما الموجهة نحو التصميم؛ لن تندم على إضافتها إلى قائمة القراءة الخاصة بك.

إنشاء مخطط القطعة لدينا

مع التصميم بعيدًا عن الطريق ، فقد حان الوقت لإخراج أصابع البرمجة لدينا والبدء في بناء التروس من عنصر واجهة المستخدم الخاص بنا.

من المثير للاهتمام كيف تترجم Figma اللبنات الأساسية للتصميم إلى مكونات تشبه التفاعل. عناصر الإطار مع ميزة التخطيط التلقائي ، على سبيل المثال ، يتم تمثيلها على أنها <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>;

وبالطبع ، ما زلنا لا نرى علامات الاقتباس SVGs الخاصة بنا ، لذلك دعونا نعمل على إصلاح ذلك. ال <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 ، وانتقل إلى فئة التطبيقات المصغّرة واكشف عن قائمة التطوير.

من المحتمل أن يكون هذا الخطأ بسبب حقيقة أننا لم نقم بترجمة TypeScript إلى JavaScript حتى الآن. يمكننا القيام بذلك في سطر الأوامر عن طريق التشغيل npm install و  npm run watch. (أو yarn و  yarn watch ). لا أخطاء هذه المرة!

هناك عقبة أخرى قد تواجهها وهي فشل الأداة في إعادة العرض في أي وقت يتم فيه تغيير الرمز. يمكننا بسهولة إجبار عنصر واجهة المستخدم لدينا على التحديث باستخدام أمر قائمة السياق التالي: Widgets → إعادة تقديم القطعة.

تصميم القطعة

كما هو الحال حاليًا ، فإن يبدو من أدواتنا لا تزال بعيدة جدًا عن هدفنا النهائي.

إذن كيف نصمم مكونات Figma من الكود؟ ربما باستخدام CSS كما نفعل في مشروع React؟ سلبي. مع أدوات 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> المكونات.

بعد إلقاء نظرة على وثائق واجهة برمجة تطبيقات القطع، من الواضح مرة أخرى أن أسماء الخصائص متطابقة تقريبًا مع نظيراتها في تطبيق 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 ، يتم إنشاء الحالة بامتداد useSyncedState صنارة صيد؛ إلى حد كبير رد فعل useState، لكنه يتطلب من المبرمجين تحديد مفتاح فريد. ينبع هذا المطلب من حقيقة أن Figma يجب أن تزامن حالة عنصر واجهة المستخدم الخاصة بنا عبر من جميع العملاء الذين قد يشاهدون نفس لوحة التصميم ، ولكن من خلال أجهزة كمبيوتر مختلفة.

const { useSyncedState } = widget;

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

هذا كل التغيير الذي نحتاجه الآن. في القسم التالي ، سنكتشف كيفية جلب البيانات من الإنترنت. تنبيه المفسد: الأمر ليس بهذه البساطة كما يبدو.

إحضار البيانات من الشبكة

تذكر عندما أعطتنا Figma خيار البدء باستخدام عنصر واجهة مستخدم يدعم iFrame. على الرغم من أننا لم نتبع هذا الخيار ، فلا يزال يتعين علينا تنفيذ بعض ميزاته. اسمحوا لي أن أشرح لماذا لا يمكننا الاتصال ببساطة fetch() داخل رمز القطعة لدينا.

عند استخدام عنصر واجهة مستخدم ، فأنت تقوم بتشغيل كود JavaScript على جهاز الكمبيوتر الخاص بك والذي كتبه شخص آخر. على الرغم من مراجعة جميع الأدوات المصغّرة بدقة من قبل موظفي Figma ، إلا أنها لا تزال تمثل ثغرة أمنية ضخمة لأننا جميعًا نعرف مقدارها يمكن إحداث ضرر حتى من خلال سطر واحد من JavaScript.

نتيجة لذلك ، لا تستطيع Figma ببساطة eval() أي رمز عنصر واجهة مستخدم كتبه مبرمجون مجهولون. باختصار ، قرر الفريق أن أفضل حل هو تشغيل كود تابع لجهة خارجية في بيئة رمل تخضع لحراسة مشددة. وكما قد تكون خمنت ، فإن واجهات برمجة التطبيقات للمتصفح غير متوفرة في مثل هذه البيئة.

لكن لا تقلق ، فإن حل Figma لهذه المشكلة الثانية هو <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 إذا كنت مطور React ، لكننا سنستخدمها هنا لجلب البيانات من الخادم عند تحميل مكون عنصر واجهة المستخدم.

const { useEffect, waitForTask } = widget;

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

ولكن هذا سينتج عنه "خطأ" آخر حيث ستستمر الأداة الخاصة بنا في إعادة العرض مع عرض أسعار جديد ، إلى الأبد. يحدث هذا بسبب useEffect، بحكم التعريف ، يتم تشغيله مرة أخرى كلما تغيرت حالة عنصر واجهة المستخدم ، بل عندما نتصل به fetchData. و في حين هناك تقنية للاتصال فقط useEffect مرة واحدة في React ، لا يعمل على تنفيذ Figma. من مستندات فيجما:

بسبب كيفية تشغيل الأدوات ، useEffect يجب أن يتعامل مع استدعاء عدة مرات بنفس الحالة.

لحسن الحظ ، هناك حل بسيط يمكننا الاستفادة منه والاتصال به useEffect مرة واحدة فقط عندما يتم تحميل المكون لأول مرة ، ويتم ذلك بالتحقق مما إذا كانت قيم الحالة لا تزال فارغة أم لا:

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

قد تصادف "الوصول إلى الذاكرة خارج الحدود " خطأ. إنه من الشائع جدًا رؤيته في تطوير المكونات الإضافية والأدوات. فقط أعد تشغيل Figma ولن يكون هناك بعد الآن.

ربما لاحظت أنه في بعض الأحيان ، يحتوي نص الاقتباس على أحرف غريبة.

وهذه هي أحرف Unicode ويجب علينا تنسيقها بشكل صحيح في التعليمات البرمجية:

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

بعد استيراد كل هذه الأصول ، ما زلنا بحاجة إلى لقطة شاشة لأداةنا. أغلق نموذج النشر (لا تقلق ، لن تفقد بياناتك) وانقر بزر الماوس الأيمن على الأداة لتكشف عن قائمة سياق مثيرة للاهتمام. أعثر على نسخ / لصق بتنسيقفئة وحدد انسخ بتنسيق PNG.

بعد الانتهاء من ذلك ، دعنا نعود إلى نموذج النشر ولصق لقطة شاشة الأداة:

قم بالتمرير لأسفل وأخيراً انشر شكلك. احتفل! 🎉

ستتواصل Figma معك في غضون يومين حول حالة مراجعة الوسائط الخاصة بك. في حالة الرفض ، ستحصل على فرصة لإجراء تغييرات وإرسالها مرة أخرى.

وفي الختام

لقد قمنا للتو ببناء أداة فيجما من الصفر! هناك أشياء كثيرة لم يتم تناولها هنا ، مثل انقر فوق الأحداث, أشكال الإدخالو أكثر من ذلك بكثير. يمكنك البحث في شفرة المصدر الكاملة للأداة بتنسيق هذا GitHub repo.

لأولئك الذين يتطلعون إلى نقل مهاراتهم في Figma إلى مستويات أعلى ، أقترح استكشاف مجتمع Widgets واستخدام ما يلفت انتباهك كمصدر إلهام. استمر في بناء المزيد من الأدوات ، واستمر في صقل مهاراتك في React ، وقبل أن تدرك ذلك ، ستعلمني كيفية القيام بكل هذا.

مزيد من الموارد

كان علي أن أشير إلى الكثير من الوثائق بينما كنت أصنع هذه القطعة. اعتقدت أنني سأشارك ما وجدته للمساعدة أكثر.

بناء المزيد من الحاجيات:

تعلم الأدوات بمزيد من العمق:

الحاجيات مقابل المكونات الإضافية