Saltar al contenido principal
Esta es una implementación de ejemplo y plantilla diseñada como un punto de partida para desarrolladores de plugins de Figma que desean integrar la API de clave de licencia de Dodo Payments para otorgar acceso a sus plugins. La plantilla demuestra la funcionalidad completa de validación y activación de claves de licencia, proporcionando todo lo que necesitas para crear plugins de Figma premium con licencias integradas.

​
Características

  • Validación de Clave de Licencia: Valida claves de licencia contra la API de Dodo Payments
  • Activación de Clave de Licencia: Activa claves de licencia con identificación del usuario
  • Soporte de Entorno: Configurable para entornos de prueba y en vivo
  • Proxy CORS: Utiliza un proxy de Cloudflare Worker para manejar restricciones de CORS
  • Soporte para TypeScript: Implementación completamente tipada con manejo de errores adecuado

​
Comenzando

1

Crear Plugin Base

Crea tu propio proyecto de plugin de Figma utilizando la guía rápida de plugins de Figma. Esto generará un andamiaje con un manifest.json archivo.
Este paso es solo para obtener un nombre y ID únicos para tu plugin. Puedes descartar los archivos generados después de comprometer el ID y el nombre en tu repositorio git en el siguiente paso.
2

Clonar la Implementación de Ejemplo

Clona el repositorio dodopayments-figma y actualiza su manifest.json con el nombre y ID de tu carpeta de plugin generada.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Este ejemplo sirve como tu punto de partida para la integración.
Necesitas cambiar la URL de origen remota a tu propio repositorio para el control de versiones.
3

Instalar Dependencias

Ejecuta el siguiente comando en la raíz de tu proyecto:
npm install
4

Configurar Entorno

Establece el API_MODE en src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Siempre usa test_mode durante el desarrollo para evitar procesar pagos reales.
5

Personalizar Componentes

Personaliza los componentes del plugin para que se ajusten a tus necesidades:
  • Actualiza Authenticated.tsx para exponer funcionalidad para usuarios con claves de licencia válidas
  • Personaliza LicenseKeyInput.tsx para que coincida con tus preferencias de diseño
El componente Authenticated.tsx es donde agregarás las características premium de tu plugin que requieren una licencia válida.

​
Configuración

1

Configurar Acceso a la Red

El plugin necesita acceso a la red para comunicarse con el proxy CORS. Agrega lo siguiente a tu manifest.json:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
Esto permite que el plugin valide y active claves de licencia utilizando la API de Dodo Payments.
El proxy CORS es necesario porque la API de Dodo Payments no permite llamadas API desde aplicaciones basadas en navegador hasta ahora.
2

Configurar Modo API

En src/ui/api.ts, configura el modo API:
const API_MODE = "test_mode"; // or "live_mode"
Cambia a live_mode solo cuando estés listo para producción y hayas probado exhaustivamente en modo de prueba.

​
Desarrollo

1

Importar Plugin

Importa el plugin en Figma usando “Importar Manifiesto” desde la aplicación de escritorio de Figma.
Necesitarás tener instalada la aplicación de escritorio de Figma para desarrollar y probar plugins localmente.
2

Iniciar Servidor de Desarrollo

npm run dev
Esto inicia el servidor de desarrollo con vigilancia de archivos para reconstrucciones automáticas.
Tu plugin se reconstruirá automáticamente cuando realices cambios en el código fuente.

​
Comandos de Construcción

ComandoDescripción
npm run buildConstruir el plugin para producción
npm run devIniciar el servidor de desarrollo con vigilancia de archivos
npm run lintVerificar estilo de código y errores
npm run formatFormatear código con Prettier

​
Integración de Clave de Licencia

La implementación de ejemplo incluye validación y activación completa de claves de licencia que puedes personalizar para tu plugin:
  1. Entrada del Usuario: Los usuarios ingresan su clave de licencia en la interfaz del plugin
  2. Validación: El plugin valida la clave contra la API de Dodo Payments
  3. Activación: Las claves válidas se activan con identificación del usuario
  4. Control de Acceso: La funcionalidad del plugin se desbloquea para los titulares de licencia válidas

​
Publicación

Una vez que tu plugin esté listo:
  1. Construir para producción: npm run build
  2. Probar exhaustivamente en modos de prueba y en vivo
  3. Seguir las directrices de publicación de plugins de Figma
  4. Enviar para revisión a través de la Comunidad de Figma

​
Repositorio

La implementación de ejemplo completa está disponible en: github.com/dodopayments/dodopayments-figma Usa esto como tu punto de partida para construir tu propio plugin de Figma premium con integración de clave de licencia de Dodo Payments.