피그마 플러그인 보일러플레이트 - Dodo Payments Documentation

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

기능

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

시작하기

Create Base Plugin

Figma의 플러그인 빠른 시작 가이드을 사용하여 자체 Figma 플러그인 프로젝트를 만듭니다. 이렇게 하면 manifest.json 파일이 포함된 기본 골격이 생성됩니다.

이 단계는 플러그인에 고유한 이름과 ID를 부여하기 위한 것입니다. 다음 단계에서 ID와 이름을 Git 저장소에 커밋한 후 생성된 파일은 삭제해도 됩니다.

Clone the Example Implementation

dodopayments-figma 저장소를 클론하고 생성된 플러그인 폴더에서 가져온 이름과 ID로 manifest.json를 업데이트하세요.

git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma

이 예제는 통합을 위한 시작점으로 사용됩니다.

버전 관리를 위해 원격 origin URL을 본인 저장소로 변경해야 합니다.

Install Dependencies

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

npm install

Configure Environment

src/ui/api.ts에서 API_MODE를 설정하세요:

const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production

실제 결제를 처리하지 않도록 개발 중에는 항상 test_mode를 사용하세요.

Customize Components

필요에 맞게 플러그인 구성 요소를 사용자화하세요:

Authenticated.tsx를 업데이트하여 유효한 라이선스 키를 가진 사용자를 위한 기능을 노출
LicenseKeyInput.tsx를 맞춤형 디자인에 맞게 조정

Authenticated.tsx 구성 요소는 유효한 라이선스가 필요한 플러그인의 프리미엄 기능을 추가하는 영역입니다.

구성

Configure Network Access

플러그인이 CORS 프록시와 통신할 수 있도록 네트워크 액세스가 필요합니다. 다음 내용을 manifest.json에 추가하세요:

{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}

이렇게 하면 플러그인이 Dodo Payments API를 사용하여 라이센스 키를 검증하고 활성화할 수 있습니다.

현재 Dodo Payments API는 브라우저 기반 애플리케이션의 API 호출을 허용하지 않으므로 CORS 프록시가 필요합니다.

Configure API Mode

src/ui/api.ts에서 API 모드를 구성하세요:

const API_MODE = "test_mode"; // or "live_mode"

테스트 모드에서 충분히 검증한 후 준비가 되었을 때만 live_mode로 전환하세요.

개발

Import Plugin

Figma 데스크탑 앱에서 “Import Manifest”를 사용하여 플러그인을 가져오세요.

로컬에서 플러그인을 개발하고 테스트하려면 Figma 데스크탑 앱이 설치되어 있어야 합니다.

Start Development Server

npm run dev

이 명령은 자동 재구성을 위한 파일 감시와 함께 개발 서버를 시작합니다.

소스 코드를 변경하면 플러그인이 자동으로 다시 빌드됩니다.

빌드 명령

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

라이센스 키 통합

예제 구현에는 플러그인에 맞게 사용자 정의할 수 있는 완전한 라이센스 키 검증 및 활성화가 포함되어 있습니다:

사용자 입력: 사용자가 플러그인 UI에 라이센스 키를 입력합니다
검증: 플러그인이 Dodo Payments API에 대해 키를 검증합니다
활성화: 유효한 키는 사용자 식별과 함께 활성화됩니다
접근 제어: 플러그인 기능은 유효한 라이센스 소지자에게 잠금 해제됩니다

배포

플러그인이 준비되면:

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

리포지토리

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

​기능

​시작하기

​구성

​개발

​빌드 명령

​라이센스 키 통합

​배포

​리포지토리

기능

시작하기

구성

개발

빌드 명령

라이센스 키 통합

배포

리포지토리