Modelo de Plugin Figma - Dodo Payments Documentation

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

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.

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.

Install Dependencies

Execute o seguinte comando na raiz do seu projeto:

npm install

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.

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

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.

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

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.

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

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:

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

Publicação

Uma vez que seu plugin esteja pronto:

Compile para produção: npm run build
Teste exaustivamente nos modos de teste e ao vivo
Siga as diretrizes de publicação de plugins do Figma
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.

​Recursos

​Começando

​Configuração

​Desenvolvimento

​Comandos de Construção

​Integração de Chave de Licença

​Publicação

​Repositório

Recursos

Começando

Configuração

Desenvolvimento

Comandos de Construção

Integração de Chave de Licença

Publicação

Repositório