Pular para o conteúdo principal
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

1

Create Base Plugin

Crie seu próprio projeto de plugin do Figma usando o guia de início rápido de plugins do Figma. Isso gerará um scaffold com um arquivo manifest.json.
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.
2

Clone the Example Implementation

Clone o repositório dodopayments-figma e atualize seu manifest.json com o nome e ID da pasta do plugin que você gerou.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Este exemplo serve como seu ponto de partida para integração.
Você precisa alterar a URL do remote origin para o seu próprio repositório para controle de versão.
3

Install Dependencies

Execute o seguinte comando na raiz do seu projeto:
npm install
4

Configure Environment

Defina o API_MODE em src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Sempre use test_mode durante o desenvolvimento para evitar processar pagamentos reais.
5

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
O componente Authenticated.tsx é onde você adicionará os recursos premium do seu plugin que exigem uma licença válida.

​
Configuração

1

Configure Network Access

O plugin precisa de acesso à rede para se comunicar com o proxy CORS. Adicione o seguinte ao seu manifest.json:
{
  "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.
O proxy CORS é necessário porque a API Dodo Payments não permite chamadas API de aplicações baseadas em navegador no momento.
2

Configure API Mode

Em src/ui/api.ts, configure o modo da API:
const API_MODE = "test_mode"; // or "live_mode"
Alterne para live_mode somente quando estiver pronto para produção e tiver testado exaustivamente no modo de teste.

​
Desenvolvimento

1

Import Plugin

Importe o plugin para o Figma usando “Import Manifest” no aplicativo desktop do Figma.
Você precisará ter o aplicativo desktop do Figma instalado para desenvolver e testar plugins localmente.
2

Start Development Server

npm run dev
Isso inicia o servidor de desenvolvimento com monitoramento de arquivos para reconstruções automáticas.
Seu plugin será reconstruído automaticamente quando você fizer alterações no código-fonte.

​
Comandos de Construção

ComandoDescrição
npm run buildCompile o plugin para produção
npm run devInicie o servidor de desenvolvimento com monitoramento de arquivos
npm run lintVerifique o estilo e erros do código
npm run formatFormate 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
  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 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.