Original Mixpanel client will NOT work in Figma plugins UI.
Why?
Electron limitation when Iframe content is loaded as Data-URI. Both localStorage and document.cookie are not available (similar problem).
Mixpanel client has configuration option to switch off persistance disable_persistence, but it won't help, as it accesses cookie, which crashes the client 🤷‍♂️.
Patch the original file to not access document.cookie/localStorage.
Original file - mixpanel/mixpanel-js Patched file – mixpanel-patched.js
Mixpanel client is a HUGE file and team is not addressing it.
So I stripped file to make it much smaller. Things removed:
- mixpanel.group
- track_links and track_forms
- notification related things (don't even know what they are)
- autotrack – some feature Mixpanel discontinued
If size does not bother you or something you need was removed – use npm i mixpanel-figma@1.0.0 or raw file (diff)
Installation
npm i mixpanel-figma
# or using Yarn
yarn add mixpanel-figmaImport package and use client as you usually would.
// main.ts
import * as mixpanel from 'mixpanel-figma'
// disabling via config just in case
mixpanel.init(YOUR_MIXPANEL_KEY, {
disable_cookie: true,
disable_persistence: true
})Since there is no persistance – every time someone opens your plugin Mixpanel would assume it a unique visitor/user.
To fix that, generate user_id for persistance on main thread side and store it in plugin settings.
CAVEAT Figma plugin settings are tied to Figma instance, so if user uses desktop app on 2 laptops – it will be treated as 2 different users.
// main.ts
const getUserId = async () => {
let userId = uuid()
try {
const id = await figma.clientStorage.getAsync('userId')
if (typeof id === 'undefined') {
figma.clientStorage.setAsync('userId', userId)
} else {
userId = id
}
} catch (e) {
console.error('userId retrieving error', e)
figma.clientStorage.setAsync('userId', userId)
}
return userId
}
// get or set if not yet set.
const userId = await getUserId()
// send to iframe
figma.ui.sendMessage(userId)
// iframe.ts
// receive userId from main thread and call identify
mixpanel.identify(userId)Apache 2.0
