Skip to main content
This is an example implementation and boilerplate designed as a starting point for Figma plugin developers who want to integrate Dodo Payments license key API to grant access to their plugins. The template demonstrates complete license key validation and activation functionality, providing everything you need to create premium Figma plugins with built-in licensing.

​
Features

  • License Key Validation: Validates license keys against the Dodo Payments API
  • License Key Activation: Activates license keys with user identification
  • Environment Support: Configurable for both test and live environments
  • CORS Proxy: Uses a Cloudflare Worker proxy to handle CORS restrictions
  • TypeScript Support: Fully typed implementation with proper error handling

​
Getting Started

1

Create Base Plugin

Create your own Figma plugin project using Figma’s plugin quickstart guide. This will generate a scaffold with a manifest.json file.
This step is just to get a unique name and ID for your plugin. You can discard the generated files after committing the ID and name to your git repository in the next step.
2

Clone the Example Implementation

Clone the dodopayments-figma repository and update its manifest.json with the name and ID from your generated plugin folder.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
This example serves as your starting point for integration.
You need to change the remote origin URL to your own repository for version control.
3

Install Dependencies

Run the following command in your project root:
npm install
4

Configure Environment

Set the API_MODE in src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Always use test_mode during development to avoid processing real payments.
5

Customize Components

Customize the plugin components to match your needs:
  • Update Authenticated.tsx to expose functionality for users with valid license keys
  • Customize LicenseKeyInput.tsx to match your design preferences
The Authenticated.tsx component is where you’ll add your plugin’s premium features that require a valid license.

​
Configuration

1

Configure Network Access

The plugin needs network access to communicate with the CORS proxy. Add the following to your manifest.json:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
This allows the plugin to validate and activate license keys using the Dodo Payments API.
The CORS proxy is necessary because Dodo Payments API doesn’t allow API calls from browser-based applications as of now.
2

Configure API Mode

In src/ui/api.ts, configure the API mode:
const API_MODE = "test_mode"; // or "live_mode"
Switch to live_mode only when you’re ready for production and have tested thoroughly in test mode.

​
Development

1

Import Plugin

Import the plugin into Figma using “Import Manifest” from the Figma desktop app.
You’ll need to have the Figma desktop app installed to develop and test plugins locally.
2

Start Development Server

npm run dev
This starts the development server with file watching for automatic rebuilds.
Your plugin will automatically rebuild when you make changes to the source code.

​
Build Commands

CommandDescription
npm run buildBuild the plugin for production
npm run devStart development server with file watching
npm run lintCheck code style and errors
npm run formatFormat code with Prettier

​
License Key Integration

The example implementation includes complete license key validation and activation that you can customize for your plugin:
  1. User Input: Users enter their license key in the plugin UI
  2. Validation: The plugin validates the key against Dodo Payments API
  3. Activation: Valid keys are activated with user identification
  4. Access Control: Plugin functionality is unlocked for valid license holders

​
Publishing

Once your plugin is ready:
  1. Build for production: npm run build
  2. Test thoroughly in both test and live modes
  3. Follow Figma’s plugin publishing guidelines
  4. Submit for review through the Figma Community

​
Repository

The complete example implementation is available at: github.com/dodopayments/dodopayments-figma Use this as your starting point to build your own premium Figma plugin with Dodo Payments license key integration.
⌘I