Values to Variables

What it doesValues to Variables scans your Figma design, automatically extracts design tokens (like colors, spacing, font styles, radius, and paddings), and creates Figma Variables for you, all in one click. This helps you quickly build a scalable, consistent design system using Figma's Variables feature.

Why use this pluginSave time: No more manual variable creation. Instantly convert your design's styles and values into reusable variables.

Consistency: Ensure all your colors, spacing, and typography are standardized across your project.

Easy to use: Simple UI, clear grouping, and one-click variable generation.

How to use1. Select what to scan:

Select any layers/frames/components to scan only those, orLeave nothing selected to scan the entire current page.

2. Review tokens:

The plugin will show all detected tokens, grouped by type (Color, Spacing, Font Size, etc.).

You can expand/collapse groups and see a preview of each value and how often it’s used.

Click the double-arrow icon in each group to change the sort order (e.g., by usage, value, or alphabetically).

3. Generate variables:

Click the **Generate Variables** button at the bottom.

The plugin will create all tokens as Figma Variables in a new "Primitives" collection if no other collection is selected.

Tips for best resultsVariables will be created in a collection called "Primitives" if no other collection is selected. Select one of your Variables collections to add the Token category to this collection. You can rename or organize them further in Figma’s Variables panel.

Supports:- Solid and gradient colors values- Spacing (auto layout)- Padding (horizontal/vertical)- Corner radius- Font family, size, weight, line-height, line-spacingHappy designing! 🎨✨