Skip to main content
El ejemplo de Figma de Dodo Payments es un plugin base que desbloquea sus funciones únicamente para usuarios con una clave de licencia válida de Dodo Payments. Úsalo como punto de partida para un plugin de Figma premium: incluye un campo para introducir la clave de licencia, validación y activación mediante la API de Dodo Payments, y un componente para tus funciones premium.

​
Características

  • Validación de License Key: Valida las license keys con la API de Dodo Payments.
  • Activación de License Key: Activa las license keys con un nombre de instancia, para keys que tienen un límite de activaciones.
  • Compatibilidad con entornos: Configurable tanto para el modo de prueba como para el modo live.
  • Compatibilidad con TypeScript: Implementación completamente tipada con gestión de errores.

​
Comenzando

Antes de comenzar, necesitas la aplicación de escritorio de Figma y un producto de Dodo Payments que emita claves de licencia.
1

Create Base Plugin

Crea tu propio proyecto de plugin de Figma con la guía de inicio rápido para plugins de Figma. Figma genera una estructura base con un archivo manifest.json.
Solo necesitas este paso para obtener un nombre y un ID únicos para tu plugin. Después de copiar el nombre y el ID en el manifest.json del ejemplo en el siguiente paso y confirmarlos en tu repositorio de Git, puedes eliminar los archivos generados.
2

Clone the Example Implementation

Clona el repositorio dodopayments-figma:
En el manifest.json clonado, sustituye name y id por los valores del manifest.json de tu plugin generado. Este ejemplo es tu punto de partida para la integración.
Cambia la URL del origen remoto a tu propio repositorio para el control de versiones, por ejemplo con git remote set-url origin <your-repository-url>.
3

Install Dependencies

En la raíz del proyecto, ejecuta:
4

Configure Environment

Establece API_MODE en src/ui/api.ts:
API_MODE selecciona el host de la API: https://test.dodopayments.com para test_mode, o https://live.dodopayments.com para live_mode.
Usa test_mode durante el desarrollo para evitar procesar pagos reales.
5

Customize Components

Personaliza los componentes del plugin en src/ui/components/ para adaptarlos a tus necesidades:
  • Actualiza Authenticated.tsx para exponer funcionalidades a los usuarios con claves de licencia válidas.
  • Personaliza LicenseKeyInput.tsx para adaptarlo a tu diseño.
Authenticated.tsx es donde añades las funciones premium de tu plugin. El plugin las muestra únicamente después de validar o activar una clave de licencia.

​
Configuración

1

Configure Network Access

El ejemplo envía cada solicitud de licencia a través de un proxy CORS en https://dodo-payments-proxy.aagarwal9782.workers.dev, y su manifest.json permite el acceso de red únicamente a ese proxy. El proxy no está disponible, así que llama directamente a la API de Dodo Payments. La API acepta solicitudes cross-origin desde cualquier origen, incluido el origen null de la interfaz de usuario del plugin.En tu manifest.json, reemplaza el dominio del proxy por los hosts de la API de Dodo Payments:
En src/ui/api.ts, reemplaza fetch(proxyReq) por fetch(req) en validateLicenseKey y activateLicenseKey, para que cada solicitud se envíe directamente a la API.Esto permite que el plugin valide y active license keys con la API de Dodo Payments.
2

Configure API Mode

En src/ui/api.ts, configura el modo de la API:
Cambia a live_mode únicamente cuando estés listo para producción y hayas realizado pruebas exhaustivas en el modo de prueba.

​
Desarrollo

1

Import Plugin

Importa el plugin en la aplicación de escritorio de Figma:
  1. Abre un archivo de diseño.
  2. Abre el menú de Figma y selecciona Plugins.
  3. En Desarrollo, selecciona Import new plugin from manifest… y, a continuación, selecciona el archivo manifest.json en la raíz del proyecto.
El manifiesto carga el plugin desde los archivos compilados en dist/, así que inicia el servidor de desarrollo o ejecuta npm run build antes de ejecutar el plugin.
Necesitas la aplicación de escritorio de Figma para desarrollar y probar plugins localmente, porque Figma lee el código del plugin desde archivos locales.
2

Start Development Server

Esto inicia el servidor de desarrollo con supervisión de archivos para realizar compilaciones automáticas. También comprueba los tipos del código a medida que lo modificas.
Tu plugin se vuelve a compilar automáticamente cuando modificas el código fuente.

​
Comandos de compilación

El proyecto incluye estos scripts de npm:

​
Integración de License Key

La implementación de ejemplo comprueba una license key antes de desbloquear el plugin. Puedes personalizar cada paso:
  1. Entrada del usuario: Los usuarios introducen su license key en la interfaz de usuario del plugin.
  2. Validación: De forma predeterminada, el plugin valida la key con Validar License (POST /licenses/validate).
  3. Activación: Si tus license keys tienen un límite de activaciones, establece needsActivation en true en src/ui/components/Unauthenticated.tsx. El plugin activa entonces la key con Activar License (POST /licenses/activate) en lugar de validarla, y asigna a la instancia el nombre Figma Plugin.
  4. Control de acceso: Para una key válida, el plugin guarda la key con figma.clientStorage y muestra Authenticated.tsx. La próxima vez que se abra el plugin, vuelve a validar la key guardada.

​
Publicación

Cuando tu plugin esté listo:
  1. Compílalo para producción: npm run build
  2. Realiza pruebas exhaustivas tanto en el modo de prueba como en el modo live.
  3. Sigue las directrices de publicación de plugins de Figma.
  4. Envía el plugin para su revisión a través de Figma Community.

​
Repositorio

La implementación completa del ejemplo está disponible en github.com/dodopayments/dodopayments-figma. Úsala como punto de partida para crear un plugin de Figma premium con claves de licencia de Dodo Payments.
Última modificación el 26 de septiembre de 2026