# Introduction to Tode SDK

**Tode** is the easiest way to add **analytics for Figma plugins and widgets**. Track user interactions, measure engagement, and understand how designers use your plugin all with just a few lines of code.

## Why Tode?

Building a successful Figma plugin requires understanding your users. Tode provides **powerful analytics for Figma plugins** that help you:

- **Track user actions** - Know which features are used most
- **Automatic session tracking** - Session duration is tracked automatically, no configuration needed
- **Capture custom metrics** - Track any numeric value you need
- **Analyze by country** - See where your users are located

## Quick Overview

Tode provides native adapters for all popular frameworks used in **Figma plugin and widget development**:

| Package | Description |
|---------|-------------|
| `@tode-sdk/core` | Core SDK - required for all integrations |
| `@tode-sdk/figma-react` | React hook for plugin UI |
| `@tode-sdk/figma-vue` | Vue composable for plugin UI |
| `@tode-sdk/figma-angular` | Angular service for plugin UI |
| `@tode-sdk/figma-svelte` | Svelte store for plugin UI |
| `@tode-sdk/figma-vanilla` | Vanilla JS/TS for any framework |

## Installation

New plugin? `npm create @tode-sdk@latest` writes a project with the SDK, the manifest and the agent files in place; see [Start from a template](https://docs.usetode.dev/template). For an existing plugin, choose the adapter that matches your UI framework:

```bash
# React
npm install @tode-sdk/core @tode-sdk/figma-react

# Vue
npm install @tode-sdk/core @tode-sdk/figma-vue

# Angular
npm install @tode-sdk/core @tode-sdk/figma-angular

# Svelte
npm install @tode-sdk/core @tode-sdk/figma-svelte

# Vanilla JS/TS
npm install @tode-sdk/core @tode-sdk/figma-vanilla
```

All six packages are published on npm under the [`@tode-sdk`](https://www.npmjs.com/org/tode-sdk) scope and share one version. The source is MIT-licensed at [github.com/kolebayev/tode-sdk](https://github.com/kolebayev/tode-sdk); report SDK bugs in its [issues](https://github.com/kolebayev/tode-sdk/issues).

## Privacy and Security

What the SDK sends with each event, so you can describe it in your own privacy notice:

- The `actionName` and optional metric value you pass in
- `figma.currentUser.id` when your manifest lists `"permissions": ["currentuser"]` (used to count unique users), otherwise an empty value
- Editor type, plugin mode and API version from the Figma runtime
- A country code derived from the request IP; the IP itself is not stored
- Session duration from the WebSocket connection

Tode never reads document contents, file names or layer data. Traffic is encrypted over HTTPS/WSS, events are deleted after your plan's retention window, and we do not sell or share them; the [Privacy Policy](https://usetode.dev/privacy) lists the two providers we rely on.

## Next Steps

Ready to add **analytics to your Figma plugin**? Choose your framework guide:

1. [React Guide](https://docs.usetode.dev/react) - Most popular for Figma plugins
2. [Vue Guide](https://docs.usetode.dev/vue) - Great for Vue-based UIs
3. [Angular Guide](https://docs.usetode.dev/angular) - For Angular applications
4. [Svelte Guide](https://docs.usetode.dev/svelte) - Lightweight and fast
5. [Vanilla JS Guide](https://docs.usetode.dev/vanilla) - Framework-agnostic option

Or jump straight to the [API Reference](https://docs.usetode.dev/api) to see all available methods.

Source: https://docs.usetode.dev/