ai plugin template

ملخص

هذا هو قالب مكون إضافي لـ Figma AI يوضح تدفق استجابات LLM داخل مكون Figma الإضافي. يظهر هذا القالب:

• تخزين مفاتيح/مطالبات OpenAI بشكل آمن على الخادم
• دفق إكمال GPT إلى iframe
• دفق إكمال GPT إلى مستند Figma
• إطار iframe React يعمل بكامل طاقته باستخدام Tailwind وNext.js
• نشر البرنامج المساعد الخاص بك إلى الإنتاج
• الوصول إلى واجهة برمجة تطبيقات Figma مباشرة من iframe

ابدء

تم إعداد هذا البرنامج المساعد لاستخدام Next.js.

قم أولاً بإنشاء هذا القالب باستخدام create-next-app:

npx create-next-app@latest --example https://github.com/figma/ai-plugin-template/

بعد ذلك، ستحتاج إلى تخزين مفتاح OpenAI API في ملف .env.local . يمكنك الحصول على مفتاح API من صفحة مفاتيح API. قم بإنشاء ملف .env.local في جذر هذا المشروع وأضف مفتاح API الخاص بك:

OPENAI_API_KEY= ***

ثم قم بتشغيل خادم التطوير:

npm i
npm run dev

يمكنك بعد ذلك فتح تطبيق Figma لسطح المكتب واستيراد مكون إضافي من ملف البيان في هذا المشروع. يمكنك النقر بزر الماوس الأيمن على اللوحة والانتقال إلى Plugins > Development > Import plugin from manifest... وتحديد البيان. manifest.json في {path to this project}/plugin/manifest.json .

تحرير هذا القالب

الملفات الرئيسية التي تريد تحريرها هي:

• app/page.tsx : سيتيح لك تحديث البرنامج المساعد iframe . يتم تحديث الصفحة تلقائيًا أثناء قيامك بتحرير الملف وستتيح لك تحديث واجهة المستخدم الخاصة بالمكون الإضافي الخاص بك.
• app/completion/route.ts : هذا هو "الخادم" للمكون الإضافي وهو ما يتحدث إلى OpenAI. هذا هو المكان الذي يمكنك فيه تحديث المطالبة التي ترسلها إلى GPT.
• plugin/manifest.json : هذا هو ملف البيان الذي سيسمح لك بتحديث الأذونات وأنواع المحررات الخاصة بالمكون الإضافي الخاص بك.

نشر البرنامج المساعد الخاص بك

في هذا المثال، سنقوم بنشر تطبيق Next.js على Vercel. يمكنك أيضًا النشر إلى أي موفر استضافة آخر يدعم Next.js.

1. إذا لم تكن قد قمت بذلك بالفعل، فادفع الكود الخاص بك إلى git repo على GitHub.
2. أنشئ حسابًا على Vercel وقم بتوصيل حسابك على GitHub.
3. انشر تطبيقك على Vercel. يمكنك اتباع الدليل هنا.
4. أثناء النشر، تأكد من تعيين متغير البيئة OPENAI_API_KEY على مفتاح OpenAI API الخاص بك.
5. بمجرد نشر تطبيقك، يمكنك تحديث قسم siteURL في ملف package.json الخاص بك للإشارة إلى عنوان URL الذي تم نشره. سيبدو مثل https://your-site-here.vercel.app/

 "config" : {
  "siteURL" : " https://your-site-here.vercel.app/ "
}

6. قم بتشغيل npm run build لإنشاء نسخة الإنتاج الخاصة بالمكون الإضافي الخاص بك والتي تشير إلى عنوان URL الذي تم نشره.
7. اختبر المكون الإضافي الخاص بك محليًا وتأكد من أنه يعمل بعد الإشارة إلى vercel.
8. نشر البرنامج المساعد الخاص بك إلى المجتمع
9. بعد النشر إلى المجتمع، سيتم تحديث المكون الإضافي الخاص بك تلقائيًا عند الضغط على git repo الخاص بك.

com.FigmaAPI

يتضمن هذا القالب مساعد figmaAPI على @/lib/figmaAPI الذي يتيح لك تشغيل كود البرنامج الإضافي من داخل إطار iframe. يعد هذا مفيدًا لتجنب واجهة برمجة تطبيقات iframe <-> plugin postMessage وتقليل كمية التعليمات البرمجية التي تحتاج إلى كتابتها.

مثال:

 import { figmaAPI } from "@/lib/figmaAPI" ;

const nodeId = "0:2" ;

const result = await figmaAPI . run (
  ( figma , { nodeId } ) => {
    return figma . getNodeById ( nodeId ) ?. name ;
  } ,
  // Any variable you want to pass to the function must be passed as a parameter.
  { nodeId } ,
) ;

console . log ( result ) ; // "Page 1"

بعض الأشياء التي يجب ملاحظتها حول هذا المساعد:

1. لا يمكن أن يشير الكود إلى أي متغيرات خارج الدالة ما لم يتم تمريرها كمعلمة إلى الوسيطة الثانية. وذلك لأن الكود مقيد ويتم إرساله إلى المكون الإضافي، ويقوم المكون الإضافي بتقييمه. لا يستطيع البرنامج المساعد الوصول إلى المتغيرات في iframe.
2. يجب أن تكون القيمة المرجعة للوظيفة قابلة للتسلسل بتنسيق JSON. وذلك لأنه يتم إرسال النتيجة مرة أخرى إلى iframe عبر postMessage، الذي يدعم JSON فقط.

يتعلم أكثر

• وثائق Next.js - تعرف على ميزات Next.js وواجهة برمجة التطبيقات.
• Figma Plugin API - تعرف على واجهة برمجة تطبيقات Figma Plugin.
• OpenAI API - تعرف على واجهات برمجة تطبيقات GPT.