Skip to main content
L’exemple Figma de Dodo Payments est un plugin de base qui déverrouille ses fonctionnalités uniquement pour les utilisateurs disposant d’une clé de licence Dodo Payments valide. Utilisez-le comme point de départ pour un plugin Figma premium : il inclut un champ de saisie de clé de licence, la validation et l’activation auprès de l’API Dodo Payments, ainsi qu’un composant pour vos fonctionnalités premium.

​
Fonctionnalités

  • Validation de clé de licence : valide les clés de licence auprès de l’API Dodo Payments.
  • Activation de clé de licence : active les clés de licence avec un nom d’instance, pour les clés ayant une limite d’activations.
  • Prise en charge des environnements : configurable pour le test mode et le live mode.
  • Prise en charge de TypeScript : implémentation entièrement typée avec gestion des erreurs.

​
Prise en Main

Avant de commencer, vous avez besoin de l’application de bureau Figma et d’un produit Dodo Payments qui émet des clés de licence.
1

Create Base Plugin

Créez votre propre projet de plugin Figma avec le guide de démarrage rapide des plugins de Figma. Figma génère une structure de base avec un fichier manifest.json.
Cette étape vous sert uniquement à obtenir un nom et un ID uniques pour votre plugin. Après avoir copié le nom et l’ID dans manifest.json de l’exemple à l’étape suivante et les avoir validés dans votre dépôt Git, vous pouvez supprimer les fichiers générés.
2

Clone the Example Implementation

Clonez le dépôt dodopayments-figma :
Dans le manifest.json cloné, remplacez name et id par les valeurs du fichier manifest.json de votre plugin généré. Cet exemple constitue votre point de départ pour l’intégration.
Modifiez l’URL de l’origine distante pour utiliser votre propre dépôt dans le cadre du contrôle de version, par exemple avec git remote set-url origin <your-repository-url>.
3

Install Dependencies

À la racine du projet, exécutez :
4

Configure Environment

Définissez API_MODE dans src/ui/api.ts :
API_MODE sélectionne l’hôte de l’API : https://test.dodopayments.com pour test_mode, ou https://live.dodopayments.com pour live_mode.
Utilisez test_mode pendant le développement afin d’éviter de traiter de vrais paiements.
5

Customize Components

Personnalisez les composants du plugin dans src/ui/components/ selon vos besoins :
  • Mettez à jour Authenticated.tsx pour exposer des fonctionnalités aux utilisateurs disposant de clés de licence valides.
  • Personnalisez LicenseKeyInput.tsx pour l’adapter à votre design.
Authenticated.tsx est l’emplacement où vous ajoutez les fonctionnalités premium de votre plugin. Le plugin ne l’affiche qu’après la validation ou l’activation d’une clé de licence.

​
Configuration

1

Configure Network Access

L’exemple envoie chaque requête de clé de licence via un proxy CORS à https://dodo-payments-proxy.aagarwal9782.workers.dev, et son manifest.json autorise l’accès réseau uniquement à ce proxy. Le proxy n’est pas disponible ; appelez donc directement l’API Dodo Payments. L’API accepte les requêtes cross-origin depuis n’importe quelle origine, y compris l’origine null de l’interface utilisateur du plugin.Dans votre manifest.json, remplacez le domaine du proxy par les hôtes de l’API Dodo Payments :
Dans src/ui/api.ts, remplacez fetch(proxyReq) par fetch(req) dans validateLicenseKey et activateLicenseKey, afin que chaque requête soit envoyée directement à l’API.Cela permet au plugin de valider et d’activer les clés de licence avec l’API Dodo Payments.
2

Configure API Mode

Dans src/ui/api.ts, configurez le mode de l’API :
Passez à live_mode uniquement lorsque vous êtes prêt pour la production et que vous avez effectué des tests approfondis en test mode.

​
Développement

1

Import Plugin

Importez le plugin dans l’application de bureau Figma :
  1. Ouvrez un fichier de conception.
  2. Ouvrez le menu Figma et sélectionnez Plugins.
  3. Sous Développement, sélectionnez Importer un nouveau plugin depuis le manifeste…, puis sélectionnez le fichier manifest.json à la racine du projet.
Le manifeste charge le plugin depuis les fichiers compilés dans dist/. Démarrez donc le serveur de développement ou exécutez npm run build avant de lancer le plugin.
Vous avez besoin de l’application de bureau Figma pour développer et tester les plugins localement, car Figma lit le code du plugin depuis les fichiers locaux.
2

Start Development Server

Cela démarre le serveur de développement avec la surveillance des fichiers pour permettre des recompilations automatiques. Le code est également vérifié au niveau des types à mesure que vous le modifiez.
Votre plugin est automatiquement recompilé lorsque vous modifiez le code source.

​
Commandes de compilation

Le projet inclut les scripts npm suivants :

​
Intégration des clés de licence

L’implémentation d’exemple vérifie une clé de licence avant de déverrouiller le plugin. Vous pouvez personnaliser chaque étape :
  1. Saisie utilisateur : les utilisateurs saisissent leur clé de licence dans l’interface utilisateur du plugin.
  2. Validation : par défaut, le plugin valide la clé avec Validate License (POST /licenses/validate).
  3. Activation : si vos clés de licence ont une limite d’activations, définissez needsActivation sur true dans src/ui/components/Unauthenticated.tsx. Le plugin active alors la clé avec Activate License (POST /licenses/activate) au lieu de la valider, et nomme l’instance Figma Plugin.
  4. Contrôle d’accès : pour une clé valide, le plugin enregistre la clé avec figma.clientStorage et affiche Authenticated.tsx. Lors de la prochaine ouverture du plugin, il valide à nouveau la clé enregistrée.

​
Publication

Lorsque votre plugin est prêt :
  1. Compilez pour la production : npm run build
  2. Effectuez des tests approfondis en test mode et en live mode.
  3. Suivez les directives de publication des plugins de Figma.
  4. Soumettez le plugin 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. Utilisez-la comme point de départ pour créer un plugin Figma premium avec les clés de licence Dodo Payments.
Dernière modification le 26 septembre 2026