Skip to main content
Dodo Payments Figma 예제는 유효한 Dodo Payments license key를 보유한 사용자만 기능을 사용할 수 있는 보일러플레이트 플러그인입니다. 이를 프리미엄 Figma 플러그인을 위한 시작점으로 사용하세요. license key 입력, Dodo Payments API를 통한 검증 및 활성화, 프리미엄 기능을 위한 컴포넌트가 포함되어 있습니다.

​
기능

  • License Key Validation: Dodo Payments API에 대해 라이선스 키를 검증합니다.
  • License Key Activation: 활성화 제한이 있는 키의 경우 인스턴스 이름과 함께 라이선스 키를 활성화합니다.
  • Environment Support: test mode와 live mode 모두에 맞게 구성할 수 있습니다.
  • TypeScript Support: 오류 처리를 포함한 완전한 타입 지정 구현을 제공합니다.

​
시작하기

시작하기 전에 Figma 데스크톱 앱과 license key를 발급하는 Dodo Payments product가 필요합니다.
1

Create Base Plugin

Figma’s plugin quickstart guide를 사용하여 자체 Figma 플러그인 프로젝트를 생성하세요. Figma는 manifest.json 파일이 포함된 스캐폴드를 생성합니다.
이 단계는 플러그인의 고유한 이름과 ID를 얻기 위해서만 필요합니다. 다음 단계에서 이름과 ID를 예제의 manifest.json에 복사하고 Git repository에 커밋한 후에는 생성된 파일을 삭제해도 됩니다.
2

Clone the Example Implementation

dodopayments-figma repository를 clone하세요:
clone한 manifest.json에서 name 및 id를 생성한 플러그인의 manifest.json에 있는 값으로 바꾸세요. 이 예제가 통합을 위한 시작점입니다.
버전 관리에 사용할 수 있도록 remote origin URL을 자체 repository의 URL로 변경하세요. 예를 들어 git remote set-url origin <your-repository-url>를 사용할 수 있습니다.
3

Install Dependencies

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

Configure Environment

src/ui/api.ts에서 API_MODE를 설정하세요:
API_MODE는 API host를 선택합니다. test_mode의 경우 https://test.dodopayments.com를, live_mode의 경우 https://live.dodopayments.com를 사용합니다.
실제 결제를 처리하지 않도록 개발 중에는 test_mode를 사용하세요.
5

Customize Components

필요에 맞게 src/ui/components/의 플러그인 컴포넌트를 사용자 지정하세요:
  • 유효한 license key를 보유한 사용자에게 기능을 제공하도록 Authenticated.tsx를 업데이트하세요.
  • 디자인에 맞게 LicenseKeyInput.tsx를 사용자 지정하세요.
플러그인의 프리미엄 기능은 Authenticated.tsx에 추가합니다. 플러그인은 license key가 검증되거나 활성화된 후에만 이 기능을 표시합니다.

​
Configuration

1

Configure Network Access

이 예제는 모든 라이선스 키 요청을 https://dodo-payments-proxy.aagarwal9782.workers.dev의 CORS proxy를 통해 전송하며, 해당 manifest.json는 이 proxy에만 네트워크 액세스를 허용합니다. proxy를 사용할 수 없으므로 Dodo Payments API를 직접 호출하세요. API는 모든 origin에서의 cross-origin 요청을 허용하며, 여기에는 plugin UI의 null origin도 포함됩니다.manifest.json에서 proxy domain을 Dodo Payments API hosts로 바꾸세요:
src/ui/api.ts에서 fetch(proxyReq)를 fetch(req)로 바꾸세요. validateLicenseKey와 activateLicenseKey에서 변경하면 각 요청이 API로 직접 전송됩니다.이를 통해 plugin에서 Dodo Payments API로 라이선스 키를 검증하고 활성화할 수 있습니다.
2

Configure API Mode

src/ui/api.ts에서 API mode를 구성하세요:
production을 사용할 준비가 되었고 test mode에서 충분히 테스트를 완료한 경우에만 live_mode로 전환하세요.

​
개발

1

Import Plugin

Figma desktop app으로 plugin을 가져오세요:
  1. design file을 엽니다.
  2. Figma menu를 열고 Plugins를 선택합니다.
  3. Development에서 **Import new plugin from manifest…**를 선택한 다음, project root에 있는 manifest.json file을 선택합니다.
manifest는 dist/의 built files에서 plugin을 로드하므로, plugin을 실행하기 전에 development server를 시작하거나 npm run build를 실행하세요.
Figma는 local files에서 plugin code를 읽기 때문에 plugin을 local에서 개발하고 테스트하려면 Figma desktop app이 필요합니다.
2

Start Development Server

이 명령은 automatic rebuild를 위한 file watching과 함께 development server를 시작합니다. 또한 code를 변경할 때 type-check를 수행합니다.
source code를 변경하면 plugin이 자동으로 다시 build됩니다.

​
Build Commands

project에는 다음 npm scripts가 포함되어 있습니다:

​
License Key Integration

예제 구현은 plugin을 unlock하기 전에 license key를 확인합니다. 각 단계를 사용자 지정할 수 있습니다:
  1. User Input: 사용자가 plugin UI에 license key를 입력합니다.
  2. Validation: 기본적으로 plugin은 Validate License (POST /licenses/validate)를 사용하여 key를 검증합니다.
  3. Activation: license key에 activation limit이 있는 경우 src/ui/components/Unauthenticated.tsx에서 needsActivation를 true로 설정합니다. 그러면 plugin은 key를 검증하는 대신 Activate License (POST /licenses/activate)를 사용하여 key를 활성화하고, 인스턴스 이름을 Figma Plugin로 지정합니다.
  4. Access Control: 유효한 key의 경우 plugin은 figma.clientStorage를 사용하여 key를 저장하고 Authenticated.tsx를 표시합니다. 다음에 plugin이 열리면 저장된 key를 다시 검증합니다.

​
Publishing

plugin을 사용할 준비가 되면 다음을 수행하세요:
  1. production용 build: npm run build
  2. test mode와 live mode 모두에서 충분히 테스트합니다.
  3. Figma’s plugin publishing guidelines를 따릅니다.
  4. Figma Community를 통해 plugin을 제출하여 review를 받습니다.

​
Repository

전체 예제 구현은 github.com/dodopayments/dodopayments-figma에서 확인할 수 있습니다. Dodo Payments license key를 사용하는 프리미엄 Figma 플러그인을 빌드하기 위한 시작점으로 사용하세요.
마지막 수정일 2026년 9월 26일