Skip to main content
O exemplo do Figma do Dodo Payments é um plugin boilerplate que desbloqueia seus recursos somente para usuários com uma chave de licença válida do Dodo Payments. Use-o como ponto de partida para um plugin premium do Figma: ele inclui uma entrada para a chave de licença, validação e ativação com a API do Dodo Payments e um componente para seus recursos premium.

​
Recursos

  • Validação da chave de licença: valida chaves de licença com a API do Dodo Payments.
  • Ativação da chave de licença: ativa chaves de licença com um nome de instância para chaves que têm um limite de ativações.
  • Suporte a ambientes: configurável para o modo de teste e o modo live.
  • Suporte a TypeScript: implementação totalmente tipada com tratamento de erros.

​
Começando

Antes de começar, você precisa do aplicativo para desktop do Figma e de um produto do Dodo Payments que emita chaves de licença.
1

Create Base Plugin

Crie seu próprio projeto de plugin do Figma com o guia de início rápido para plugins do Figma. O Figma gera um scaffold com um arquivo manifest.json.
Você precisa desta etapa somente para obter um nome e um ID exclusivos para seu plugin. Depois de copiar o nome e o ID para o manifest.json do exemplo na próxima etapa e fazer commit deles no seu repositório Git, você pode excluir os arquivos gerados.
2

Clone the Example Implementation

Clone o repositório dodopayments-figma:
No manifest.json clonado, substitua name e id pelos valores do manifest.json do seu plugin gerado. Este exemplo é o ponto de partida para a integração.
Altere a URL de origem remota para o seu próprio repositório para controle de versão, por exemplo com git remote set-url origin <your-repository-url>.
3

Install Dependencies

Na raiz do projeto, execute:
4

Configure Environment

Defina API_MODE em src/ui/api.ts:
API_MODE seleciona o host da API: https://test.dodopayments.com para test_mode ou https://live.dodopayments.com para live_mode.
Use test_mode durante o desenvolvimento para evitar o processamento de pagamentos reais.
5

Customize Components

Personalize os componentes do plugin em src/ui/components/ para atender às suas necessidades:
  • Atualize Authenticated.tsx para expor funcionalidades a usuários com chaves de licença válidas.
  • Personalize LicenseKeyInput.tsx para corresponder ao seu design.
Authenticated.tsx é onde você adiciona os recursos premium do seu plugin. O plugin os exibe somente depois que uma chave de licença é validada ou ativada.

​
Configuração

1

Configure Network Access

O exemplo envia todas as solicitações de chave de licença por um proxy CORS em https://dodo-payments-proxy.aagarwal9782.workers.dev, e seu manifest.json permite acesso à rede somente a esse proxy. O proxy não está disponível, portanto, chame a API do Dodo Payments diretamente. A API aceita solicitações cross-origin de qualquer origem, incluindo a origem null da interface do plugin.No seu manifest.json, substitua o domínio do proxy pelos hosts da API do Dodo Payments:
Em src/ui/api.ts, substitua fetch(proxyReq) por fetch(req) em validateLicenseKey e activateLicenseKey, para que cada solicitação seja enviada diretamente à API.Isso permite que o plugin valide e ative chaves de licença com a API do Dodo Payments.
2

Configure API Mode

Em src/ui/api.ts, configure o modo da API:
Alterne para live_mode somente quando estiver pronto para produção e tiver testado completamente no modo de teste.

​
Desenvolvimento

1

Import Plugin

Importe o plugin no aplicativo para desktop do Figma:
  1. Abra um arquivo de design.
  2. Abra o menu do Figma e selecione Plugins.
  3. Em Desenvolvimento, selecione Import new plugin from manifest… e, em seguida, selecione o arquivo manifest.json na raiz do projeto.
O manifesto carrega o plugin dos arquivos compilados em dist/, portanto, inicie o servidor de desenvolvimento ou execute npm run build antes de executar o plugin.
Você precisa do aplicativo para desktop do Figma para desenvolver e testar plugins localmente, pois o Figma lê o código do plugin a partir de arquivos locais.
2

Start Development Server

Isso inicia o servidor de desenvolvimento com monitoramento de arquivos para recompilações automáticas. Ele também verifica os tipos do código conforme você faz alterações.
Seu plugin é recompilado automaticamente quando você altera o código-fonte.

​
Comandos de build

O projeto inclui estes scripts npm:

​
Integração de chaves de licença

A implementação de exemplo verifica uma chave de licença antes de desbloquear o plugin. Você pode personalizar cada etapa:
  1. Entrada do usuário: os usuários inserem a chave de licença na interface do plugin.
  2. Validação: por padrão, o plugin valida a chave com Validate License (POST /licenses/validate).
  3. Ativação: se suas chaves de licença tiverem um limite de ativações, defina needsActivation como true em src/ui/components/Unauthenticated.tsx. O plugin então ativa a chave com Activate License (POST /licenses/activate) em vez de validá-la e nomeia a instância como Figma Plugin.
  4. Controle de acesso: para uma chave válida, o plugin salva a chave com figma.clientStorage e exibe Authenticated.tsx. Na próxima vez que o plugin for aberto, ele validará a chave salva novamente.

​
Publicação

Quando seu plugin estiver pronto:
  1. Faça o build para produção: npm run build
  2. Teste completamente nos modos de teste e live.
  3. Siga as diretrizes de publicação de plugins do Figma.
  4. Envie o plugin para análise pela Comunidade do Figma.

​
Repositório

A implementação completa do exemplo está disponível em github.com/dodopayments/dodopayments-figma. Use-a como ponto de partida para criar um plugin premium do Figma com chaves de licença do Dodo Payments.
Última modificação em 26 de setembro de 2026