Passer au contenu principal
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

1

Create Base Plugin

Créez votre propre projet de plugin Figma en suivant le guide de démarrage rapide des plugins de Figma. Cela générera une structure avec un fichier manifest.json.
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.
2

Clone the Example Implementation

Clonez le dépôt dodopayments-figma et mettez à jour son manifest.json avec le nom et l’ID de votre dossier de plugin généré.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Cet exemple sert de point de départ pour l’intégration.
Vous devez changer l’URL de l’origine distante pour qu’elle pointe vers votre propre dépôt pour la gestion de version.
3

Install Dependencies

Exécutez la commande suivante à la racine de votre projet :
npm install
4

Configure Environment

Définissez le API_MODE dans src/ui/api.ts :
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Utilisez toujours test_mode pendant le développement pour éviter de traiter de vrais paiements.
5

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
Le composant Authenticated.tsx est l’endroit où vous ajouterez les fonctionnalités premium de votre plugin nécessitant une licence valide.

​
Configuration

1

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 :
{
  "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.
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.
2

Configure API Mode

Dans src/ui/api.ts, configurez le mode API :
const API_MODE = "test_mode"; // or "live_mode"
Passez à live_mode uniquement lorsque vous êtes prêt pour la production et que vous avez testé minutieusement en mode test.

​
Développement

1

Import Plugin

Importez le plugin dans Figma en utilisant “Import Manifest” depuis l’application de bureau Figma.
Vous devez avoir installé l’application de bureau Figma pour développer et tester les plugins localement.
2

Start Development Server

npm run dev
Cela démarre le serveur de développement avec surveillance des fichiers pour des reconstructions automatiques.
Votre plugin sera reconstruit automatiquement lorsque vous apporterez des modifications au code source.

​
Commandes de Construction

CommandDescription
npm run buildConstruisez le plugin pour la production
npm run devDémarrez le serveur de développement avec surveillance de fichiers
npm run lintVérifiez le style de code et les erreurs
npm run formatFormatez 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
  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 Utilisez ceci comme point de départ pour construire votre propre plugin Figma premium avec intégration de clé de licence Dodo Payments.