> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma Plugin

> Build a paid Figma plugin from an example that validates and activates Dodo Payments license keys before it unlocks your plugin's features.

The Dodo Payments Figma example is a boilerplate plugin that unlocks its features only for users with a valid Dodo Payments [license key](/features/license-keys). 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.

<Steps>
  <Step title="Create Base Plugin">
    Create your own Figma plugin project with [Figma's plugin quickstart guide](https://www.figma.com/plugin-docs/plugin-quickstart-guide/). Figma generates a scaffold with a `manifest.json` file.

    <Tip>
      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.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    Clone the [dodopayments-figma repository](https://github.com/dodopayments/dodopayments-figma):

    ```bash theme={null}
    git clone https://github.com/dodopayments/dodopayments-figma.git
    cd dodopayments-figma
    ```

    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.

    <Tip>
      Change the remote origin URL to your own repository for version control, for example with `git remote set-url origin <your-repository-url>`.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    In the project root, run:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Configure Environment">
    Set `API_MODE` in `src/ui/api.ts`:

    ```typescript theme={null}
    const API_MODE: "test_mode" | "live_mode" = "test_mode"; // for development
    // const API_MODE: "test_mode" | "live_mode" = "live_mode"; // for production
    ```

    `API_MODE` selects the API host: `https://test.dodopayments.com` for `test_mode`, or `https://live.dodopayments.com` for `live_mode`.

    <Warning>
      Use `test_mode` during development to avoid processing real payments.
    </Warning>
  </Step>

  <Step title="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.

    <Note>
      `Authenticated.tsx` is where you add your plugin's premium features. The plugin shows it only after a license key is validated or activated.
    </Note>
  </Step>
</Steps>

## Configuration

<Steps>
  <Step title="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:

    ```json theme={null}
    {
      "networkAccess": {
        "allowedDomains": ["https://test.dodopayments.com", "https://live.dodopayments.com"]
      }
    }
    ```

    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.
  </Step>

  <Step title="Configure API Mode">
    In `src/ui/api.ts`, configure the API mode:

    ```typescript theme={null}
    const API_MODE: "test_mode" | "live_mode" = "test_mode"; // or "live_mode"
    ```

    <Tip>
      Switch to `live_mode` only when you're ready for production and have tested thoroughly in test mode.
    </Tip>
  </Step>
</Steps>

## Development

<Steps>
  <Step title="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.

    <Note>
      You need the Figma desktop app to develop and test plugins locally, because Figma reads the plugin code from local files.
    </Note>
  </Step>

  <Step title="Start Development Server">
    ```bash theme={null}
    npm run dev
    ```

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

    <Check>
      Your plugin rebuilds automatically when you change the source code.
    </Check>
  </Step>
</Steps>

## Build Commands

The project includes these npm scripts:

| Command | Description |
| - | - |
| `npm run build` | Build the plugin for production |
| `npm run dev` | Start development server with file watching |
| `npm run lint` | Check code style and errors |
| `npm run format` | Format code with Prettier |

## 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](/api-reference/licenses/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](/api-reference/licenses/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](https://developers.figma.com/docs/plugins/publishing/).
4. Submit the plugin for review through the Figma Community.

## Repository

The complete example implementation is available at [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma).

Use it as your starting point to build a premium Figma plugin with Dodo Payments license keys.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.