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.FeaturesExport Variables: Extracts all variables from the current Figma fileMultiple Formats: Supports Color, Number, String, and Boolean variable typesNested Structure: Organizes variables in a hierarchical structure based on their namesCopy to Clipboard: Easy one-click copying of exported variablesDownload CSS File: Download variables as a CSS file with timestampUnit Support: Add units (px, em, rem, %, pt, ms, s) to numeric valuesHow to UseOpen a Figma file that contains variablesGo to Plugins > Token Sniff - Export Tokens to CSS Variables > Export VariablesClick "Export Variables" to extract all variables from your Figma fileSelect number units if needed (px, em, rem, %, pt, ms, s)Review the exported variables in the formatted structureClick "Copy to Clipboard" to copy the variables to your clipboardClick "Download CSS" to save the variables as a CSS fileUse the exported variables in your design system or development workflowOutput FormatThe plugin exports variables as CSS Variables:/* CollectionName.ModeName.css */:root {--color-blue-500: #3b82f6;--color-blue-700: #1d4ed8;--spacing-4: 4px;--spacing-8: 8px;--font-family-body: "Inter, sans-serif";--font-size-base: 16px;}Download FunctionalityThe plugin now supports downloading variables as CSS files:Automatic Naming: Files are named with timestamp (e.g., figma-variables-2024-01-15T10-30-45.css)Direct Download: Files are downloaded directly to your default download folderCSS Format: Variables are formatted as CSS custom properties ready for use in projectsMultiple Collections: Each variable collection is exported as a separate CSS block with commentsPrivacy & Data HandlingThis 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.