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

# Plugin de Figma

> Crea un plugin de Figma de pago a partir de un ejemplo que valida y activa las claves de licencia de Dodo Payments antes de desbloquear las funciones de tu plugin.

El ejemplo de Figma de Dodo Payments es un plugin base que desbloquea sus funciones únicamente para usuarios con una [clave de licencia](/features/license-keys) 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.

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

    <Tip>
      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.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    Clona el [repositorio dodopayments-figma](https://github.com/dodopayments/dodopayments-figma):

    ```bash theme={null}
    git clone https://github.com/dodopayments/dodopayments-figma.git
    cd 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.

    <Tip>
      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>`.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    En la raíz del proyecto, ejecuta:

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

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

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

    `API_MODE` selecciona el host de la API: `https://test.dodopayments.com` para `test_mode`, o `https://live.dodopayments.com` para `live_mode`.

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

  <Step title="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.

    <Note>
      `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.
    </Note>
  </Step>
</Steps>

## Configuración

<Steps>
  <Step title="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:

    ```json theme={null}
    {
      "networkAccess": {
        "allowedDomains": ["https://test.dodopayments.com", "https://live.dodopayments.com"]
      }
    }
    ```

    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.
  </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" | "live_mode" = "test_mode"; // or "live_mode"
    ```

    <Tip>
      Cambia a `live_mode` únicamente cuando estés listo para producción y hayas realizado pruebas exhaustivas en el modo de prueba.
    </Tip>
  </Step>
</Steps>

## Desarrollo

<Steps>
  <Step title="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.

    <Note>
      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.
    </Note>
  </Step>

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

    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.

    <Check>
      Tu plugin se vuelve a compilar automáticamente cuando modificas el código fuente.
    </Check>
  </Step>
</Steps>

## Comandos de compilación

El proyecto incluye estos scripts de npm:

| Comando | Descripción |
| - | - |
| `npm run build` | Compila el plugin para producción |
| `npm run dev` | Inicia el servidor de desarrollo con supervisión de archivos |
| `npm run lint` | Comprueba el estilo del código y los errores |
| `npm run format` | Formatea el código con Prettier |

## 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](/api-reference/licenses/validate-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](/api-reference/licenses/activate-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](https://developers.figma.com/docs/plugins/publishing/).
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](https://github.com/dodopayments/dodopayments-figma).

Úsala como punto de partida para crear un plugin de Figma premium con claves de licencia de Dodo Payments.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.