메인 콘텐츠로 건너뛰기
이것은 Dodo Payments 라이센스 키 API를 통합하여 플러그인에 대한 접근을 부여하고자 하는 피그마 플러그인 개발자를 위한 시작점으로 설계된 예제 구현 및 보일러플레이트입니다. 이 템플릿은 완전한 라이센스 키 검증 및 활성화 기능을 보여주며, 내장 라이센스를 갖춘 프리미엄 피그마 플러그인을 만드는 데 필요한 모든 것을 제공합니다.

​
기능

  • 라이센스 키 검증: Dodo Payments API에 대해 라이센스 키를 검증합니다
  • 라이센스 키 활성화: 사용자 식별을 통해 라이센스 키를 활성화합니다
  • 환경 지원: 테스트 및 라이브 환경 모두에 대해 구성 가능
  • CORS 프록시: CORS 제한을 처리하기 위해 Cloudflare Worker 프록시를 사용합니다
  • TypeScript 지원: 적절한 오류 처리가 포함된 완전한 타입 구현

​
시작하기

1

Create Base Plugin

Figma의 플러그인 빠른 시작 가이드을 사용하여 자체 Figma 플러그인 프로젝트를 만듭니다. 이렇게 하면 manifest.json 파일이 포함된 기본 골격이 생성됩니다.
이 단계는 플러그인에 고유한 이름과 ID를 부여하기 위한 것입니다. 다음 단계에서 ID와 이름을 Git 저장소에 커밋한 후 생성된 파일은 삭제해도 됩니다.
2

Clone the Example Implementation

dodopayments-figma 저장소를 클론하고 생성된 플러그인 폴더에서 가져온 이름과 ID로 manifest.json를 업데이트하세요.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
이 예제는 통합을 위한 시작점으로 사용됩니다.
버전 관리를 위해 원격 origin URL을 본인 저장소로 변경해야 합니다.
3

Install Dependencies

프로젝트 루트에서 다음 명령을 실행하세요:
npm install
4

Configure Environment

src/ui/api.ts에서 API_MODE를 설정하세요:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
실제 결제를 처리하지 않도록 개발 중에는 항상 test_mode를 사용하세요.
5

Customize Components

필요에 맞게 플러그인 구성 요소를 사용자화하세요:
  • Authenticated.tsx를 업데이트하여 유효한 라이선스 키를 가진 사용자를 위한 기능을 노출
  • LicenseKeyInput.tsx를 맞춤형 디자인에 맞게 조정
Authenticated.tsx 구성 요소는 유효한 라이선스가 필요한 플러그인의 프리미엄 기능을 추가하는 영역입니다.

​
구성

1

Configure Network Access

플러그인이 CORS 프록시와 통신할 수 있도록 네트워크 액세스가 필요합니다. 다음 내용을 manifest.json에 추가하세요:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
이렇게 하면 플러그인이 Dodo Payments API를 사용하여 라이센스 키를 검증하고 활성화할 수 있습니다.
현재 Dodo Payments API는 브라우저 기반 애플리케이션의 API 호출을 허용하지 않으므로 CORS 프록시가 필요합니다.
2

Configure API Mode

src/ui/api.ts에서 API 모드를 구성하세요:
const API_MODE = "test_mode"; // or "live_mode"
테스트 모드에서 충분히 검증한 후 준비가 되었을 때만 live_mode로 전환하세요.

​
개발

1

Import Plugin

Figma 데스크탑 앱에서 “Import Manifest”를 사용하여 플러그인을 가져오세요.
로컬에서 플러그인을 개발하고 테스트하려면 Figma 데스크탑 앱이 설치되어 있어야 합니다.
2

Start Development Server

npm run dev
이 명령은 자동 재구성을 위한 파일 감시와 함께 개발 서버를 시작합니다.
소스 코드를 변경하면 플러그인이 자동으로 다시 빌드됩니다.

​
빌드 명령

명령설명
npm run build플러그인을 프로덕션용으로 빌드합니다
npm run dev파일 변경을 감지하며 개발 서버를 시작합니다
npm run lint코드 스타일과 오류를 검사합니다
npm run formatPrettier로 코드를 포맷합니다

​
라이센스 키 통합

예제 구현에는 플러그인에 맞게 사용자 정의할 수 있는 완전한 라이센스 키 검증 및 활성화가 포함되어 있습니다:
  1. 사용자 입력: 사용자가 플러그인 UI에 라이센스 키를 입력합니다
  2. 검증: 플러그인이 Dodo Payments API에 대해 키를 검증합니다
  3. 활성화: 유효한 키는 사용자 식별과 함께 활성화됩니다
  4. 접근 제어: 플러그인 기능은 유효한 라이센스 소지자에게 잠금 해제됩니다

​
배포

플러그인이 준비되면:
  1. 프로덕션용으로 빌드: npm run build
  2. 테스트 및 라이브 모드에서 철저하게 테스트하세요
  3. Figma 플러그인 게시 지침을 따르세요
  4. Figma 커뮤니티를 통해 검토를 제출하세요

​
리포지토리

완전한 예제 구현은 다음에서 확인할 수 있습니다: github.com/dodopayments/dodopayments-figma 이것을 Dodo Payments 라이센스 키 통합이 포함된 프리미엄 피그마 플러그인을 구축하기 위한 시작점으로 사용하세요.