> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figmaプラグインボイラープレート

> Dodo Paymentsのライセンスキー検証とアクティベーションを使用してFigmaプラグインを構築する

これは、Dodo PaymentsのライセンスキーAPIを統合してプラグインへのアクセスを許可したいFigmaプラグイン開発者のための出発点として設計された例の実装とボイラープレートです。このテンプレートは、完全なライセンスキー検証とアクティベーション機能を示しており、組み込みライセンスを持つプレミアムFigmaプラグインを作成するために必要なすべてを提供します。

## 機能

* **ライセンスキー検証**: Dodo Payments APIに対してライセンスキーを検証します
* **ライセンスキーアクティベーション**: ユーザー識別を伴うライセンスキーをアクティベートします
* **環境サポート**: テスト環境と本番環境の両方に対応可能
* **CORSプロキシ**: CORS制限を処理するためにCloudflare Workerプロキシを使用します
* **TypeScriptサポート**: 適切なエラーハンドリングを伴う完全な型付けの実装

## 始め方

<Steps>
  <Step title="Create Base Plugin">
    [Figma のプラグイン クイックスタート ガイド](https://www.figma.com/plugin-docs/plugin-quickstart-guide/)を使用して独自の Figma プラグイン プロジェクトを作成してください。これにより、`manifest.json` ファイルを含むスキャフォールドが生成されます。

    <Tip>
      このステップでは、プラグインに固有の名前と ID を取得するだけです。次のステップで ID と名前を git リポジトリにコミットした後に、生成されたファイルは破棄できます。
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    [dodopayments-figma リポジトリ](https://github.com/dodopayments/dodopayments-figma)をクローンし、生成したプラグイン フォルダーから得た名前と ID で `manifest.json` を更新してください。

    ```bash theme={null}
    git clone https://github.com/dodopayments/dodopayments-figma.git
    cd dodopayments-figma
    ```

    この例は、統合の出発点として機能します。

    <Tip>
      バージョン管理のためにリモート origin URL を自分のリポジトリに変更する必要があります。
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    プロジェクトのルートで次のコマンドを実行してください：

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Configure Environment">
    `src/ui/api.ts` で `API_MODE` を設定してください：

    ```typescript theme={null}
    const API_MODE = "test_mode"; // for development
    // const API_MODE = "live_mode"; // for production
    ```

    <Warning>
      本番の支払いを処理しないように、開発中は常に `test_mode` を使用してください。
    </Warning>
  </Step>

  <Step title="Customize Components">
    プラグインコンポーネントをニーズに合わせてカスタマイズしてください：

    * 有効なライセンスキーを持つユーザー向けの機能を公開するため、`Authenticated.tsx` を更新
    * デザインの好みに合わせて `LicenseKeyInput.tsx` をカスタマイズ

    <Note>
      `Authenticated.tsx` コンポーネントには、有効なライセンスを必要とするプラグインのプレミアム機能を追加します。
    </Note>
  </Step>
</Steps>

## 設定

<Steps>
  <Step title="Configure Network Access">
    プラグインは CORS プロキシと通信するためのネットワークアクセスが必要です。次の内容を `manifest.json` に追加してください：

    ```json theme={null}
    {
      "networkAccess": {
        "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
      }
    }
    ```

    これにより、プラグインはDodo Payments APIを使用してライセンスキーを検証およびアクティベートできます。

    <Info>
      Dodo Payments API は現在、ブラウザベースのアプリケーションからの API 呼び出しを許可していないため、CORS プロキシが必要です。
    </Info>
  </Step>

  <Step title="Configure API Mode">
    `src/ui/api.ts` で API モードを構成します：

    ```typescript theme={null}
    const API_MODE = "test_mode"; // or "live_mode"
    ```

    <Tip>
      テストモードで十分にテストした後、本番準備が整ったら `live_mode` に切り替えてください。
    </Tip>
  </Step>
</Steps>

## 開発

<Steps>
  <Step title="Import Plugin">
    Figma デスクトップアプリから「Import Manifest」を使ってプラグインを Figma にインポートしてください。

    <Note>
      ローカルでプラグインを開発およびテストするには、Figma デスクトップアプリをインストールする必要があります。
    </Note>
  </Step>

  <Step title="Start Development Server">
    ```bash theme={null}
    npm run dev
    ```

    これにより、ファイル監視を伴う開発サーバーが起動します。

    <Check>
      ソースコードに変更を加えると、プラグインは自動的に再ビルドされます。
    </Check>
  </Step>
</Steps>

## ビルドコマンド

| Command          | Description         |
| ---------------- | ------------------- |
| `npm run build`  | 本番用にプラグインをビルド       |
| `npm run dev`    | ファイルウォッチ付き開発サーバーを起動 |
| `npm run lint`   | コードスタイルとエラーをチェック    |
| `npm run format` | Prettier でコードを整形    |

## ライセンスキー統合

例の実装には、プラグイン用にカスタマイズ可能な完全なライセンスキー検証とアクティベーションが含まれています:

1. **ユーザー入力**: ユーザーはプラグインUIにライセンスキーを入力します
2. **検証**: プラグインはDodo Payments APIに対してキーを検証します
3. **アクティベーション**: 有効なキーはユーザー識別とともにアクティベートされます
4. **アクセス制御**: 有効なライセンス保持者のためにプラグイン機能が解除されます

## 公開

プラグインの準備が整ったら:

1. 本番用にビルド：`npm run build`
2. テストモードとライブモードの両方で十分にテスト
3. [Figma のプラグイン公開ガイドライン](https://www.figma.com/plugin-docs/publishing-plugins/)に従う
4. Figma Community を通じてレビューに提出

## リポジトリ

完全な例の実装は次の場所で入手できます: [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma)

これを出発点として、Dodo Paymentsのライセンスキー統合を持つ独自のプレミアムFigmaプラグインを構築してください。