Skip to main content
Dodo Payments Figmaサンプルは、有効なDodo Payments license keyを持つユーザーにのみ機能をアンロックするボイラープレートプラグインです。プレミアムFigmaプラグインの出発点として使用できます。ライセンスキーの入力、Dodo Payments APIに対する検証と有効化、プレミアム機能用のコンポーネントが含まれています。

​
機能

  • License Key Validation: Dodo Payments API に対して license key を検証します。
  • License Key Activation: activation limit が設定された key に対して、instance name を指定して license key をアクティベートします。
  • Environment Support: test mode と live mode の両方に設定できます。
  • TypeScript Support: error handling を備えた完全に型付けされた実装です。

​
始め方

始める前に、Figmaデスクトップアプリと、ライセンスキーを発行するDodo Payments productが必要です。
1

Create Base Plugin

Figmaのplugin quickstart guideを使用して、独自のFigmaプラグインプロジェクトを作成します。Figmaはmanifest.jsonファイルを含むscaffoldを生成します。
この手順は、プラグインに固有の名前と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に変更します。たとえば、git remote set-url origin <your-repository-url>を使用できます。
3

Install Dependencies

プロジェクトのrootで、次を実行します。
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/のプラグインコンポーネントをニーズに合わせてカスタマイズします。
  • 有効なライセンスキーを持つユーザーに機能を提供するよう、Authenticated.tsxを更新します。
  • デザインに合わせてLicenseKeyInput.tsxをカスタマイズします。
Authenticated.tsxに、プラグインのプレミアム機能を追加します。プラグインは、ライセンスキーが検証または有効化された後にのみ、この機能を表示します。

​
Configuration

1

Configure Network Access

この例では、すべての license key リクエストを https://dodo-payments-proxy.aagarwal9782.workers.dev の CORS proxy 経由で送信し、manifest.json ではその proxy にのみネットワークアクセスを許可しています。proxy は利用できないため、Dodo Payments API を直接呼び出してください。API は、null にある plugin UI の origin を含め、任意の origin からの cross-origin requests を受け付けます。manifest.json で、proxy domain を Dodo Payments API hosts に置き換えます。
src/ui/api.ts で、validateLicenseKey と activateLicenseKey にある fetch(proxyReq) を fetch(req) に置き換え、各リクエストが API に直接送信されるようにします。これにより、plugin で Dodo Payments API を使用して license key の検証とアクティベーションを行えるようになります。
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 は plugin code を local files から読み込むため、plugin をローカルで開発およびテストするには Figma desktop app が必要です。
2

Start Development Server

file watching による自動 rebuild を有効にして development server を起動します。また、変更時に code の type-check も行います。
source code を変更すると、plugin は自動的に rebuild されます。

​
Build Commands

project には次の npm scripts が含まれています。

​
License Key Integration

example implementation では、plugin のロックを解除する前に 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 をアクティベートし、instance に Figma Plugin という名前を付けます。
  4. Access Control: 有効な key の場合、plugin は figma.clientStorage で key を保存し、Authenticated.tsx を表示します。次回 plugin を開いたときに、保存された key を再度検証します。

​
公開

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 keysを使用したプレミアムFigmaプラグイン構築の出発点として利用してください。
最終更新日 2026年9月26日