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

# Modelo de Plugin Figma

> Crie plugins Figma com validação e ativação de chave de licença Dodo Payments

Esta é uma implementação de exemplo e modelo projetado como um ponto de partida para desenvolvedores de plugins Figma que desejam integrar a API de chave de licença Dodo Payments para conceder acesso aos seus plugins. O template demonstra funcionalidade completa de validação e ativação de chave de licença, fornecendo tudo o que você precisa para criar plugins Figma premium com licenciamento embutido.

## Recursos

* **Validação de Chave de Licença**: Valida chaves de licença contra a API Dodo Payments
* **Ativação de Chave de Licença**: Ativa chaves de licença com identificação do usuário
* **Suporte a Ambientes**: Configurável para ambientes de teste e produção
* **Proxy CORS**: Usa um proxy Cloudflare Worker para lidar com restrições CORS
* **Suporte a TypeScript**: Implementação totalmente tipada com tratamento de erros adequado

## Começando

<Steps>
  <Step title="Create Base Plugin">
    Crie seu próprio projeto de plugin do Figma usando o [guia de início rápido de plugins do Figma](https://www.figma.com/plugin-docs/plugin-quickstart-guide/). Isso gerará um scaffold com um arquivo `manifest.json`.

    <Tip>
      Esta etapa serve apenas para obter um nome e ID exclusivos para seu plugin. Você pode descartar os arquivos gerados após confirmar o ID e o nome no seu repositório git na próxima etapa.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    Clone o [repositório dodopayments-figma](https://github.com/dodopayments/dodopayments-figma) e atualize seu `manifest.json` com o nome e ID da pasta do plugin que você gerou.

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

    Este exemplo serve como seu ponto de partida para integração.

    <Tip>
      Você precisa alterar a URL do remote origin para o seu próprio repositório para controle de versão.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    Execute o seguinte comando na raiz do seu projeto:

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

  <Step title="Configure Environment">
    Defina o `API_MODE` em `src/ui/api.ts`:

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

    <Warning>
      Sempre use `test_mode` durante o desenvolvimento para evitar processar pagamentos reais.
    </Warning>
  </Step>

  <Step title="Customize Components">
    Personalize os componentes do plugin para atender às suas necessidades:

    * Atualize `Authenticated.tsx` para expor funcionalidades para usuários com chaves de licença válidas
    * Personalize `LicenseKeyInput.tsx` para corresponder às suas preferências de design

    <Note>
      O componente `Authenticated.tsx` é onde você adicionará os recursos premium do seu plugin que exigem uma licença válida.
    </Note>
  </Step>
</Steps>

## Configuração

<Steps>
  <Step title="Configure Network Access">
    O plugin precisa de acesso à rede para se comunicar com o proxy CORS. Adicione o seguinte ao seu `manifest.json`:

    ```json theme={null}
    {
      "networkAccess": {
        "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
      }
    }
    ```

    Isso permite que o plugin valide e ative chaves de licença usando a API Dodo Payments.

    <Info>
      O proxy CORS é necessário porque a API Dodo Payments não permite chamadas API de aplicações baseadas em navegador no momento.
    </Info>
  </Step>

  <Step title="Configure API Mode">
    Em `src/ui/api.ts`, configure o modo da API:

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

    <Tip>
      Alterne para `live_mode` somente quando estiver pronto para produção e tiver testado exaustivamente no modo de teste.
    </Tip>
  </Step>
</Steps>

## Desenvolvimento

<Steps>
  <Step title="Import Plugin">
    Importe o plugin para o Figma usando "Import Manifest" no aplicativo desktop do Figma.

    <Note>
      Você precisará ter o aplicativo desktop do Figma instalado para desenvolver e testar plugins localmente.
    </Note>
  </Step>

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

    Isso inicia o servidor de desenvolvimento com monitoramento de arquivos para reconstruções automáticas.

    <Check>
      Seu plugin será reconstruído automaticamente quando você fizer alterações no código-fonte.
    </Check>
  </Step>
</Steps>

## Comandos de Construção

| Comando          | Descrição                                                          |
| ---------------- | ------------------------------------------------------------------ |
| `npm run build`  | Compile o plugin para produção                                     |
| `npm run dev`    | Inicie o servidor de desenvolvimento com monitoramento de arquivos |
| `npm run lint`   | Verifique o estilo e erros do código                               |
| `npm run format` | Formate o código com o Prettier                                    |

## Integração de Chave de Licença

A implementação de exemplo inclui validação e ativação completa de chave de licença que você pode personalizar para seu plugin:

1. **Entrada do Usuário**: Os usuários inserem sua chave de licença na interface do plugin
2. **Validação**: O plugin valida a chave contra a API Dodo Payments
3. **Ativação**: Chaves válidas são ativadas com identificação do usuário
4. **Controle de Acesso**: A funcionalidade do plugin é desbloqueada para detentores de licença válidos

## Publicação

Uma vez que seu plugin esteja pronto:

1. Compile para produção: `npm run build`
2. Teste exaustivamente nos modos de teste e ao vivo
3. Siga as [diretrizes de publicação de plugins do Figma](https://www.figma.com/plugin-docs/publishing-plugins/)
4. Envie para revisão através da Comunidade Figma

## Repositório

A implementação completa de exemplo está disponível em: [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma)

Use isso como seu ponto de partida para construir seu próprio plugin Figma premium com integração de chave de licença Dodo Payments.