ai plugin template

ภาพรวม

นี่คือเทมเพลตปลั๊กอิน Figma AI ที่แสดงการตอบสนองแบบสตรีม LLM ภายในปลั๊กอิน Figma เทมเพลตนี้แสดง:

• จัดเก็บคีย์ / แจ้ง OpenAI อย่างปลอดภัยบนเซิร์ฟเวอร์
• สตรีม GPT เสร็จสิ้นไปยัง iframe
• สตรีมการเสร็จสิ้น GPT ไปยังเอกสาร Figma
• React iframe ที่ทำงานได้อย่างสมบูรณ์โดยใช้ tailwind และ Next.js
• การปรับใช้ปลั๊กอินของคุณสู่การใช้งานจริง
• การเข้าถึง Figma API โดยตรงจาก 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 บนเดสก์ท็อปและนำเข้าปลั๊กอินจากไฟล์ Manifest ในโปรเจ็กต์นี้ได้ คุณสามารถคลิกขวาบนผืนผ้าใบแล้วไปที่ 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 : นี่คือไฟล์ Manifest ที่จะช่วยให้คุณสามารถอัปเดตการอนุญาตและประเภทตัวแก้ไขของปลั๊กอินของคุณได้

การเผยแพร่ปลั๊กอินของคุณ

ในตัวอย่างนี้ เราจะเผยแพร่แอป Next.js ไปยัง Vercel คุณยังสามารถเผยแพร่ไปยังผู้ให้บริการโฮสติ้งรายอื่นที่รองรับ Next.js ได้

1. หากคุณยังไม่ได้ดำเนินการ ให้พุชโค้ดของคุณไปที่ repo git บน 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 เพื่อสร้าง build ที่ใช้งานจริงของปลั๊กอินของคุณที่ชี้ไปยัง URL ที่ปรับใช้ของคุณ
7. ทดสอบปลั๊กอินของคุณในเครื่องและตรวจสอบให้แน่ใจว่าใช้งานได้หลังจากชี้ไปที่ vercel
8. เผยแพร่ปลั๊กอินของคุณสู่ชุมชน
9. หลังจากเผยแพร่ไปยังชุมชนแล้ว ปลั๊กอินของคุณจะอัปเดตโดยอัตโนมัติเมื่อคุณพุชไปที่ repo git ของคุณ

figmaAPI

เทมเพลตนี้มีตัวช่วย figmaAPI ที่ @/lib/figmaAPI ที่ให้คุณเรียกใช้โค้ดปลั๊กอินจากภายใน iframe สิ่งนี้มีประโยชน์ในการหลีกเลี่ยงปลั๊กอิน postMessage API ของ iframe <-> และลดจำนวนโค้ดที่คุณต้องเขียน

ตัวอย่าง:

 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 - เรียนรู้เกี่ยวกับคุณสมบัติและ API ของ Next.js
• Figma Plugin API - เรียนรู้เกี่ยวกับ Figma Plugin API
• OpenAI API - เรียนรู้เกี่ยวกับ GPT API