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

Criar Plugin Base

Crie seu próprio projeto de plugin Figma usando o guia de início rápido do plugin do Figma. Isso gerará uma estrutura com um arquivo manifest.json.
Esta etapa é apenas para obter um nome e ID únicos para seu plugin. Você pode descartar os arquivos gerados após comprometer o ID e o nome no seu repositório git na próxima etapa.
2

Clonar a Implementação de Exemplo

Clone o repositório dodopayments-figma e atualize seu manifest.json com o nome e ID da sua pasta de plugin gerada.
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 de origem remota para o seu próprio repositório para controle de versão.
3

Instalar Dependências

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

Configurar Ambiente

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

Personalizar Componentes

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 requerem uma licença válida.

​
Configuração

1

Configurar Acesso à Rede

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 de API de aplicações baseadas em navegador até o momento.
2

Configurar Modo da API

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

​
Desenvolvimento

1

Importar Plugin

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

Iniciar Servidor de Desenvolvimento

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 buildCompila o plugin para produção
npm run devInicia o servidor de desenvolvimento com monitoramento de arquivos
npm run lintVerifica estilo de código e erros
npm run formatFormata o código com 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 minuciosamente 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.