Boilerplate de Plugin Figma - Dodo Payments Documentation

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

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.

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.

Install Dependencies

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

npm install

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.

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

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.

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

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.

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

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 :

Saisie de l’Utilisateur : Les utilisateurs saisissent leur clé de licence dans l’UI du plugin
Validation : Le plugin valide la clé contre l’API Dodo Payments
Activation : Les clés valides sont activées avec identification de l’utilisateur
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 :

Construisez pour la production : npm run build
Testez minutieusement en modes test et production
Suivez les directives de publication des plugins de Figma
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.

​Fonctionnalités

​Prise en Main

​Configuration

​Développement

​Commandes de Construction

​Intégration de Clé de Licence

​Publication

​Dépôt

Fonctionnalités

Prise en Main

Configuration

Développement

Commandes de Construction

Intégration de Clé de Licence

Publication

Dépôt