> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Plantilla de Plugin de Figma

> Crea plugins de Figma con validación y activación de clave de licencia de Dodo Payments

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

<Steps>
  <Step title="Create Base Plugin">
    Crea tu propio proyecto de plugin para Figma usando la [guía de inicio rápido para plugins de Figma](https://www.figma.com/plugin-docs/plugin-quickstart-guide/). Esto generará una estructura con un archivo `manifest.json`.

    <Tip>
      Este paso es solo para obtener un nombre e ID únicos para tu plugin. Puedes descartar los archivos generados después de confirmar el ID y el nombre en tu repositorio git en el siguiente paso.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    Clona el [repositorio dodopayments-figma](https://github.com/dodopayments/dodopayments-figma) y actualiza su `manifest.json` con el nombre y el ID de la carpeta de tu plugin generado.

    ```bash theme={null}
    git clone https://github.com/dodopayments/dodopayments-figma.git
    cd dodopayments-figma
    ```

    Este ejemplo sirve como tu punto de partida para la integración.

    <Tip>
      Debes cambiar la URL del origen remoto por la de tu propio repositorio para el control de versiones.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    Ejecuta el siguiente comando en la raíz de tu proyecto:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Configure Environment">
    Configura el `API_MODE` en `src/ui/api.ts`:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // for development
    // const API_MODE = "live_mode"; // for production
    ```

    <Warning>
      Utiliza siempre `test_mode` durante el desarrollo para evitar procesar pagos reales.
    </Warning>
  </Step>

  <Step title="Customize Components">
    Personaliza los componentes del plugin para que se ajusten a tus necesidades:

    * Actualiza `Authenticated.tsx` para exponer funcionalidades para usuarios con claves de licencia válidas
    * Personaliza `LicenseKeyInput.tsx` para que coincida con tus preferencias de diseño

    <Note>
      El componente `Authenticated.tsx` es donde agregarás las funciones premium de tu plugin que requieren una licencia válida.
    </Note>
  </Step>
</Steps>

## Configuración

<Steps>
  <Step title="Configure Network Access">
    El plugin necesita acceso a la red para comunicarse con el proxy CORS. Agrega lo siguiente a tu `manifest.json`:

    ```json theme={null}
    {
      "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.

    <Info>
      El proxy CORS es necesario porque la API de Dodo Payments actualmente no permite llamadas desde aplicaciones basadas en navegador.
    </Info>
  </Step>

  <Step title="Configure API Mode">
    En `src/ui/api.ts`, configura el modo de la API:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // or "live_mode"
    ```

    <Tip>
      Cambia a `live_mode` solo cuando estés listo para producción y hayas probado exhaustivamente en modo de prueba.
    </Tip>
  </Step>
</Steps>

## Desarrollo

<Steps>
  <Step title="Import Plugin">
    Importa el plugin en Figma usando “Import Manifest” desde la aplicación de escritorio de Figma.

    <Note>
      Necesitarás tener instalada la aplicación de escritorio de Figma para desarrollar y probar plugins localmente.
    </Note>
  </Step>

  <Step title="Start Development Server">
    ```bash theme={null}
    npm run dev
    ```

    Esto inicia el servidor de desarrollo con vigilancia de archivos para reconstrucciones automáticas.

    <Check>
      Tu plugin se reconstruirá automáticamente cuando hagas cambios en el código fuente.
    </Check>
  </Step>
</Steps>

## Comandos de Construcción

| Command          | Description                                                 |
| ---------------- | ----------------------------------------------------------- |
| `npm run build`  | Construye el plugin para producción                         |
| `npm run dev`    | Inicia el servidor de desarrollo con vigilancia de archivos |
| `npm run lint`   | Verifica el estilo y errores del código                     |
| `npm run format` | Formatea el 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. Construye para producción: `npm run build`
2. Prueba exhaustivamente en modo de prueba y en vivo
3. Sigue las [directrices de publicación de plugins de Figma](https://www.figma.com/plugin-docs/publishing-plugins/)
4. Somete a 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](https://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.