Integrating Analytics in a Figma Plugin - Quick Guide

The current best solution is Mixpanel in my opinion. Integrating Mixpanel into a Figma plugin opens up a world of possibilities for analyzing user behavior and tracking valuable data.

So, welcome everyone, it's a quick guide to setup mixpanel with figma plugins.

The Problem

Figma plugins run inside an iframe, hence have some limitations.

Original Mixpanel client will NOT work in Figma plugins UI because it uses some features like cookies, which aren't accessible to the plugin ui.

The Solution

Using a patched version of mixpanel client file will help.

1. Install the package npm i mixpanel-figma
2. In your UI file, import the package. Please note that you have to use mixpanel in the UI file only, using it in the core plugin files will result in some errors. Error example
3. Preferably, create a new file, analytics.ts and form a class with all useful methods.

import * as mixpanel from 'mixpanel-figma'

class Analytics {
    constructor() {
        try{
            mixpanel.init("<PROJECT_TOKEN>", {
                disable_cookie: true, //IMP
                disable_persistence: true, //IMP
            });
            console.log("Mixpanel initialized");
        } catch(e){
            console.log("Mixpanel failed to initialize");
            console.error(e);
        }
    }

    track(event: string, properties: object) {
        try{
            mixpanel.track(event, properties);
            console.log("Mixpanel event tracked");
        } catch(e){
            console.log("Mixpanel failed to track event");
            console.error(e);
        }
    }

    identify(id: string) {  // Unique user id (since no persistence)
        try{
            mixpanel.identify(id);
            console.log("Mixpanel identified");
        } catch(e){
            console.log("Mixpanel failed to identify");
            console.error(e);
        }
    }
}

export default Analytics;

Create a class instance and call methods where ever you need to add tracking.

Hope you found this useful. I spent some time figuring all this out, so summarized it in a short article, this might help other people out there!

Thanks to okotoki for the plugin compatible file, do checkout their GitHub for more details.

See you guys soon.
My Twitter