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

Crea Plugin Base

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

Clona l'Implementazione di Esempio

Clona il repository dodopayments-figma e aggiorna il suo manifest.json con il nome e l’ID dalla tua cartella plugin generata.
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 nel tuo repository per il controllo delle versioni.
3

Installa Dipendenze

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

Configura Ambiente

Imposta il 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

Personalizza Componenti

Personalizza i componenti del plugin per soddisfare le tue esigenze:
  • Aggiorna Authenticated.tsx per esporre funzionalità per gli 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

Configura Accesso alla Rete

Il plugin ha bisogno di 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 Dodo Payments non consente chiamate API da applicazioni basate su browser al momento.
2

Configura Modalità API

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 a fondo in modalità di test.

​
Sviluppo

1

Importa Plugin

Importa il plugin in Figma utilizzando “Importa Manifest” dall’app desktop Figma.
Dovrai avere installata l’app desktop Figma per sviluppare e testare i plugin localmente.
2

Avvia Server di Sviluppo

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

ComandoDescrizione
npm run buildCompila il plugin per la produzione
npm run devAvvia il server di sviluppo con monitoraggio dei file
npm run lintControlla lo stile del codice e gli errori
npm run formatFormatta il codice con 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. Compila per la produzione: npm run build
  2. Testa a fondo sia in modalità di test che live
  3. Segui le linee guida per la pubblicazione dei plugin di Figma
  4. Invia per revisione tramite la Community di Figma

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