Skip to main content
The Dodo Payments Figma example is a boilerplate plugin that unlocks its features only for users with a valid Dodo Payments license key. Use it as the starting point for a premium Figma plugin: it includes a license key input, validation and activation against the Dodo Payments API, and a component for your premium features.

​
Features

  • License Key Validation: Validates license keys against the Dodo Payments API.
  • License Key Activation: Activates license keys with an instance name, for keys that have an activation limit.
  • Environment Support: Configurable for both test mode and live mode.
  • TypeScript Support: Fully typed implementation with error handling.

​
Getting Started

Before you start, you need the Figma desktop app and a Dodo Payments product that issues license keys.
1

Create Base Plugin

Create your own Figma plugin project with Figma’s plugin quickstart guide. Figma generates a scaffold with a manifest.json file.
You need this step only to get a unique name and ID for your plugin. After you copy the name and ID into the example’s manifest.json in the next step and commit them to your Git repository, you can delete the generated files.
2

Clone the Example Implementation

Clone the dodopayments-figma repository:
In the cloned manifest.json, replace name and id with the values from your generated plugin’s manifest.json. This example is your starting point for the integration.
Change the remote origin URL to your own repository for version control, for example with git remote set-url origin <your-repository-url>.
3

Install Dependencies

In the project root, run:
4

Configure Environment

Set API_MODE in src/ui/api.ts:
API_MODE selects the API host: https://test.dodopayments.com for test_mode, or https://live.dodopayments.com for live_mode.
Use test_mode during development to avoid processing real payments.
5

Customize Components

Customize the plugin components in src/ui/components/ to match your needs:
  • Update Authenticated.tsx to expose functionality for users with valid license keys.
  • Customize LicenseKeyInput.tsx to match your design.
Authenticated.tsx is where you add your plugin’s premium features. The plugin shows it only after a license key is validated or activated.

​
Configuration

1

Configure Network Access

The example sends every license key request through a CORS proxy at https://dodo-payments-proxy.aagarwal9782.workers.dev, and its manifest.json allows network access only to that proxy. The proxy isn’t available, so call the Dodo Payments API directly. The API accepts cross-origin requests from any origin, including the null origin of the plugin UI.In your manifest.json, replace the proxy domain with the Dodo Payments API hosts:
In src/ui/api.ts, replace fetch(proxyReq) with fetch(req) in validateLicenseKey and activateLicenseKey, so each request goes to the API directly.This allows the plugin to validate and activate license keys with the Dodo Payments API.
2

Configure API Mode

In src/ui/api.ts, configure the API 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 the Figma desktop app:
  1. Open a design file.
  2. Open the Figma menu and select Plugins.
  3. Under Development, select Import new plugin from manifest…, then select the manifest.json file in the project root.
The manifest loads the plugin from the built files in dist/, so start the development server or run npm run build before you run the plugin.
You need the Figma desktop app to develop and test plugins locally, because Figma reads the plugin code from local files.
2

Start Development Server

This starts the development server with file watching for automatic rebuilds. It also type-checks the code as you change it.
Your plugin rebuilds automatically when you change the source code.

​
Build Commands

The project includes these npm scripts:

​
License Key Integration

The example implementation checks a license key before it unlocks the plugin. You can customize each step:
  1. User Input: Users enter their license key in the plugin UI.
  2. Validation: By default, the plugin validates the key with Validate License (POST /licenses/validate).
  3. Activation: If your license keys have an activation limit, set needsActivation to true in src/ui/components/Unauthenticated.tsx. The plugin then activates the key with Activate License (POST /licenses/activate) instead of validating it, and names the instance Figma Plugin.
  4. Access Control: For a valid key, the plugin saves the key with figma.clientStorage and shows Authenticated.tsx. The next time the plugin opens, it validates the saved key again.

​
Publishing

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

​
Repository

The complete example implementation is available at github.com/dodopayments/dodopayments-figma. Use it as your starting point to build a premium Figma plugin with Dodo Payments license keys.
Last modified on September 26, 2026