Token Sniff

About this plugin

A Figma plugin that exports all variables from the current Figma file and displays them as CSS Variables for easy review, copying, and downloading.

Features

1. Export Variables: Extracts all variables from the current Figma file
2. Multiple Formats: Supports Color, Number, String, and Boolean variable types
3. Nested Structure: Organizes variables in a hierarchical structure based on their names
4. Copy to Clipboard: Easy one-click copying of exported variables
5. Download CSS File: Download variables as a CSS file with timestamp
6. Unit Support: Add units (px, em, rem, %, pt, ms, s) to numeric values

How to Use

1. Open a Figma file that contains variables
2. Go to Plugins > Token Sniff - Export Tokens to CSS Variables > Export Variables
3. Click "Export Variables" to extract all variables from your Figma file
4. Select number units if needed (px, em, rem, %, pt, ms, s)
5. Review the exported variables in the formatted structure
6. Click "Copy to Clipboard" to copy the variables to your clipboard
7. Click "Download CSS" to save the variables as a CSS file
8. Use the exported variables in your design system or development workflow

Output Format

The plugin exports variables as CSS Variables:

Download Functionality

The plugin now supports downloading variables as CSS files:

1. Automatic Naming: Files are named with timestamp (e.g., figma-variables-2024-01-15T10-30-45.css)
2. Direct Download: Files are downloaded directly to your default download folder
3. CSS Format: Variables are formatted as CSS custom properties ready for use in projects
4. Multiple Collections: Each variable collection is exported as a separate CSS block with comments

Privacy & Data Handling

This plugin does not collect, store, or transmit any user data. All processing happens locally within the Figma application. No external servers are contacted during plugin operation.