> ## 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.

# Boilerplate de Plugin Figma

> Construisez des plugins Figma avec validation et activation de clé de licence Dodo Payments

Ceci est une implémentation d'exemple et un boilerplate conçu comme point de départ pour les développeurs de plugins Figma qui souhaitent intégrer l'API de clé de licence Dodo Payments pour accorder l'accès à leurs plugins. Le modèle démontre une fonctionnalité complète de validation et d'activation de clé de licence, fournissant tout ce dont vous avez besoin pour créer des plugins Figma premium avec une licence intégrée.

## Fonctionnalités

* **Validation de Clé de Licence** : Valide les clés de licence contre l'API Dodo Payments
* **Activation de Clé de Licence** : Active les clés de licence avec identification de l'utilisateur
* **Support d'Environnement** : Configurable pour les environnements de test et en direct
* **Proxy CORS** : Utilise un proxy Cloudflare Worker pour gérer les restrictions CORS
* **Support TypeScript** : Implémentation entièrement typée avec gestion des erreurs appropriée

## Prise en Main

<Steps>
  <Step title="Create Base Plugin">
    Créez votre propre projet de plugin Figma en suivant le [guide de démarrage rapide des plugins de Figma](https://www.figma.com/plugin-docs/plugin-quickstart-guide/). Cela générera une structure avec un fichier `manifest.json`.

    <Tip>
      Cette étape sert uniquement à obtenir un nom et un identifiant uniques pour votre plugin. Vous pouvez supprimer les fichiers générés après avoir enregistré l'ID et le nom dans votre dépôt git lors de l'étape suivante.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    Clonez le [dépôt dodopayments-figma](https://github.com/dodopayments/dodopayments-figma) et mettez à jour son `manifest.json` avec le nom et l'ID de votre dossier de plugin généré.

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

    Cet exemple sert de point de départ pour l'intégration.

    <Tip>
      Vous devez changer l'URL de l'origine distante pour qu'elle pointe vers votre propre dépôt pour la gestion de version.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    Exécutez la commande suivante à la racine de votre projet :

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

  <Step title="Configure Environment">
    Définissez le `API_MODE` dans `src/ui/api.ts` :

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

    <Warning>
      Utilisez toujours `test_mode` pendant le développement pour éviter de traiter de vrais paiements.
    </Warning>
  </Step>

  <Step title="Customize Components">
    Personnalisez les composants du plugin pour répondre à vos besoins :

    * Mettez à jour `Authenticated.tsx` pour exposer des fonctionnalités aux utilisateurs disposant de clés de licence valides
    * Personnalisez `LicenseKeyInput.tsx` pour qu'il corresponde à vos préférences de design

    <Note>
      Le composant `Authenticated.tsx` est l'endroit où vous ajouterez les fonctionnalités premium de votre plugin nécessitant une licence valide.
    </Note>
  </Step>
</Steps>

## Configuration

<Steps>
  <Step title="Configure Network Access">
    Le plugin a besoin d'accès réseau pour communiquer avec le proxy CORS. Ajoutez ce qui suit à votre `manifest.json` :

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

    Cela permet au plugin de valider et d'activer les clés de licence en utilisant l'API Dodo Payments.

    <Info>
      Le proxy CORS est nécessaire car l'API Dodo Payments n'autorise actuellement pas les appels API depuis des applications basées sur un navigateur.
    </Info>
  </Step>

  <Step title="Configure API Mode">
    Dans `src/ui/api.ts`, configurez le mode API :

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

    <Tip>
      Passez à `live_mode` uniquement lorsque vous êtes prêt pour la production et que vous avez testé minutieusement en mode test.
    </Tip>
  </Step>
</Steps>

## Développement

<Steps>
  <Step title="Import Plugin">
    Importez le plugin dans Figma en utilisant "Import Manifest" depuis l'application de bureau Figma.

    <Note>
      Vous devez avoir installé l'application de bureau Figma pour développer et tester les plugins localement.
    </Note>
  </Step>

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

    Cela démarre le serveur de développement avec surveillance des fichiers pour des reconstructions automatiques.

    <Check>
      Votre plugin sera reconstruit automatiquement lorsque vous apporterez des modifications au code source.
    </Check>
  </Step>
</Steps>

## Commandes de Construction

| Command          | Description                                                        |
| ---------------- | ------------------------------------------------------------------ |
| `npm run build`  | Construisez le plugin pour la production                           |
| `npm run dev`    | Démarrez le serveur de développement avec surveillance de fichiers |
| `npm run lint`   | Vérifiez le style de code et les erreurs                           |
| `npm run format` | Formatez le code avec Prettier                                     |

## Intégration de Clé de Licence

L'implémentation d'exemple comprend une validation et une activation complètes de la clé de licence que vous pouvez personnaliser pour votre plugin :

1. **Saisie de l'Utilisateur** : Les utilisateurs saisissent leur clé de licence dans l'UI du plugin
2. **Validation** : Le plugin valide la clé contre l'API Dodo Payments
3. **Activation** : Les clés valides sont activées avec identification de l'utilisateur
4. **Contrôle d'Accès** : La fonctionnalité du plugin est déverrouillée pour les détenteurs de clés de licence valides

## Publication

Une fois que votre plugin est prêt :

1. Construisez pour la production : `npm run build`
2. Testez minutieusement en modes test et production
3. Suivez [les directives de publication des plugins de Figma](https://www.figma.com/plugin-docs/publishing-plugins/)
4. Soumettez-le pour examen via la communauté Figma

## Dépôt

L'implémentation complète de l'exemple est disponible sur : [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma)

Utilisez ceci comme point de départ pour construire votre propre plugin Figma premium avec intégration de clé de licence Dodo Payments.