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

​
기능

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

​
시작하기

1

기본 플러그인 만들기

Figma의 플러그인 빠른 시작 가이드를 사용하여 나만의 Figma 플러그인 프로젝트를 만드세요. 이렇게 하면 manifest.json 파일이 생성됩니다.
이 단계는 플러그인에 대한 고유한 이름과 ID를 얻기 위한 것입니다. 다음 단계에서 ID와 이름을 git 리포지토리에 커밋한 후 생성된 파일은 폐기할 수 있습니다.
2

예제 구현 복제하기

dodopayments-figma 리포지토리를 복제하고 생성된 플러그인 폴더의 이름과 ID로 manifest.json를 업데이트하세요.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
이 예제는 통합을 위한 시작점으로 사용됩니다.
버전 관리를 위해 원격 원본 URL을 자신의 리포지토리로 변경해야 합니다.
3

의존성 설치

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

환경 설정하기

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

구성 요소 사용자 정의

플러그인 구성 요소를 필요에 맞게 사용자 정의하세요:
  • 유효한 라이센스 키가 있는 사용자에게 기능을 노출하기 위해 Authenticated.tsx를 업데이트하세요.
  • 디자인 선호도에 맞게 LicenseKeyInput.tsx를 사용자화하세요.
Authenticated.tsx 컴포넌트는 유효한 라이센스가 필요한 플러그인의 프리미엄 기능을 추가하는 곳입니다.

​
구성

1

네트워크 접근 설정하기

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

API 모드 설정하기

src/ui/api.ts에서 API 모드를 설정하세요:
const API_MODE = "test_mode"; // or "live_mode"
생산 준비가 완료되고 테스트 모드에서 철저히 테스트한 후에만 live_mode로 전환하세요.

​
개발

1

플러그인 가져오기

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

개발 서버 시작

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 라이센스 키 통합이 포함된 프리미엄 피그마 플러그인을 구축하기 위한 시작점으로 사용하세요.