ai plugin template 다운로드 - ai plugin template 소스코드 다운로드

ai plugin template

기타 소스코드

1.0.0

다운로드

개요

이는 Figma 플러그인 내부에서 스트리밍 LLM 응답을 보여주는 Figma AI 플러그인 템플릿입니다. 이 템플릿은 다음을 보여줍니다.

OpenAI 키/프롬프트를 서버에 안전하게 저장
GPT 완료를 iframe으로 스트리밍
GPT 완료를 Figma 문서로 스트리밍
tailwind 및 Next.js를 사용하는 완전한 기능의 React iframe
프로덕션에 플러그인 배포
iframe에서 직접 Figma API에 액세스

시작하기

이 플러그인은 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... 이동한 후 {path to this project}/plugin/manifest.json 에서 manifest.json 선택할 수 있습니다.

이 템플릿 편집 중

편집하려는 주요 파일은 다음과 같습니다.

app/page.tsx : 플러그인 iframe 업데이트할 수 있습니다. 파일을 편집하면 페이지가 자동으로 업데이트되며 플러그인의 사용자 인터페이스를 업데이트할 수 있습니다.
app/completion/route.ts : 이는 플러그인의 "서버"이며 OpenAI와 통신하는 역할을 합니다. 여기에서 GPT로 보내는 메시지를 업데이트할 수 있습니다.
plugin/manifest.json : 플러그인의 권한과 편집기 유형을 업데이트할 수 있는 매니페스트 파일입니다.

플러그인 게시

이 예에서는 Next.js 앱을 Vercel에 게시합니다. Next.js를 지원하는 다른 호스팅 제공업체에 게시할 수도 있습니다.

아직 코드를 GitHub의 git 저장소에 푸시하지 않았다면 푸시하세요.
Vercel에서 계정을 만들고 GitHub 계정을 연결하세요.
Vercel에 앱을 배포하세요. 여기에서 가이드를 따라갈 수 있습니다.
배포하는 동안 환경 변수 OPENAI_API_KEY OpenAI API 키로 설정해야 합니다.
앱이 배포되면 배포된 URL을 가리키도록 package.json 파일의 siteURL 섹션을 업데이트할 수 있습니다. https://your-site-here.vercel.app/ 과 같습니다.

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

npm run build 실행하여 배포된 URL을 가리키는 플러그인의 프로덕션 빌드를 생성하세요.
플러그인을 로컬에서 테스트하고 vercel을 가리킨 후 작동하는지 확인하세요.
커뮤니티에 플러그인 게시
커뮤니티에 게시한 후 Git 저장소에 푸시하면 플러그인이 자동으로 업데이트됩니다.

피그마API

이 템플릿에는 iframe 내부에서 플러그인 코드를 실행할 수 있는 @/lib/figmaAPI 의 figmaAPI 도우미가 포함되어 있습니다. 이는 iframe <-> 플러그인 postMessage API를 피하고 작성해야 하는 코드의 양을 줄이는 데 유용합니다.

예:

 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"

이 도우미에 대해 참고할 몇 가지 사항은 다음과 같습니다.

코드는 두 번째 인수에 매개 변수로 전달되지 않는 한 함수 외부의 변수를 참조할 수 없습니다. 이는 코드가 문자열화되어 플러그인으로 전송되고 플러그인이 이를 평가하기 때문입니다. 플러그인은 iframe의 변수에 액세스할 수 없습니다.
함수의 반환 값은 JSON 직렬화 가능해야 합니다. JSON만 지원하는 postMessage를 통해 결과가 iframe으로 다시 전송되기 때문입니다.