Vai al contenuto principale
Questa è un’implementazione di esempio e un boilerplate progettato come punto di partenza per gli sviluppatori di plugin Figma che desiderano integrare l’API della chiave di licenza Dodo Payments per concedere accesso ai loro plugin. Il template dimostra la funzionalità completa di validazione e attivazione della chiave di licenza, fornendo tutto il necessario per creare plugin Figma premium con licenze integrate.

​
Caratteristiche

  • Validazione della Chiave di Licenza: Valida le chiavi di licenza contro l’API Dodo Payments
  • Attivazione della Chiave di Licenza: Attiva le chiavi di licenza con identificazione dell’utente
  • Supporto Ambientale: Configurabile per ambienti di test e live
  • Proxy CORS: Utilizza un proxy Cloudflare Worker per gestire le restrizioni CORS
  • Supporto TypeScript: Implementazione completamente tipizzata con gestione degli errori appropriata

​
Iniziare

1

Create Base Plugin

Crea il tuo progetto di plugin Figma utilizzando la guida rapida per plugin di Figma. Questo genererà uno scheletro con un file manifest.json.
Questo passaggio serve solo a ottenere un nome e un ID unici per il tuo plugin. Puoi eliminare i file generati dopo aver salvato l’ID e il nome nel tuo repository git nel passaggio successivo.
2

Clone the Example Implementation

Clona il repository dodopayments-figma e aggiorna il suo manifest.json con il nome e l’ID della cartella del plugin che hai generato.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Questo esempio serve come punto di partenza per l’integrazione.
Devi cambiare l’URL dell’origine remota con quello del tuo repository per il controllo versione.
3

Install Dependencies

Esegui il seguente comando nella root del tuo progetto:
npm install
4

Configure Environment

Imposta l’API_MODE in src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Usa sempre test_mode durante lo sviluppo per evitare di elaborare pagamenti reali.
5

Customize Components

Personalizza i componenti del plugin per soddisfare le tue esigenze:
  • Aggiorna Authenticated.tsx per esporre funzionalità agli utenti con chiavi di licenza valide
  • Personalizza LicenseKeyInput.tsx per adattarlo alle tue preferenze di design
Il componente Authenticated.tsx è dove aggiungerai le funzionalità premium del tuo plugin che richiedono una licenza valida.

​
Configurazione

1

Configure Network Access

Il plugin necessita dell’accesso alla rete per comunicare con il proxy CORS. Aggiungi quanto segue al tuo manifest.json:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
Questo consente al plugin di validare e attivare le chiavi di licenza utilizzando l’API Dodo Payments.
Il proxy CORS è necessario perché l’API di Dodo Payments non consente attualmente chiamate API da applicazioni basate su browser.
2

Configure API Mode

In src/ui/api.ts, configura la modalità API:
const API_MODE = "test_mode"; // or "live_mode"
Passa a live_mode solo quando sei pronto per la produzione e hai testato approfonditamente in modalità di test.

​
Sviluppo

1

Import Plugin

Importa il plugin in Figma usando «Import Manifest» dall’app desktop di Figma.
È necessario avere l’app desktop di Figma installata per sviluppare e testare i plugin localmente.
2

Start Development Server

npm run dev
Questo avvia il server di sviluppo con il monitoraggio dei file per ricompilazioni automatiche.
Il tuo plugin verrà ricompilato automaticamente quando apporti modifiche al codice sorgente.

​
Comandi di Build

CommandDescription
npm run buildBuild the plugin for production
npm run devStart development server with file watching
npm run lintCheck code style and errors
npm run formatFormat code with Prettier

​
Integrazione della Chiave di Licenza

L’implementazione di esempio include una validazione e attivazione completa della chiave di licenza che puoi personalizzare per il tuo plugin:
  1. Input Utente: Gli utenti inseriscono la loro chiave di licenza nell’interfaccia del plugin
  2. Validazione: Il plugin valida la chiave contro l’API Dodo Payments
  3. Attivazione: Le chiavi valide vengono attivate con identificazione dell’utente
  4. Controllo Accesso: La funzionalità del plugin viene sbloccata per i titolari di chiavi di licenza valide

​
Pubblicazione

Una volta che il tuo plugin è pronto:
  1. Build for production: npm run build
  2. Test thoroughly in both test and live modes
  3. Follow Figma’s plugin publishing guidelines
  4. Submit for review through the Figma Community

​
Repository

L’implementazione completa di esempio è disponibile su: github.com/dodopayments/dodopayments-figma Usa questo come punto di partenza per costruire il tuo plugin Figma premium con integrazione della chiave di licenza Dodo Payments.