Values to Variables Generator

About this plugin

What it does

Values to Variables Generator 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 plugin

1. Save time: No more manual variable creation. Instantly convert your design's styles and values into reusable variables.
2. Consistency: Ensure all your colors, spacing, and typography are standardized across your project.
3. Easy to use: Simple UI, clear grouping, and one-click variable generation.

How to use

1. Select what to scan:

1. Select any layers/frames/components to scan only those, or
2. Leave nothing selected to scan the entire current page.

2. Review tokens:

1. The plugin will show all detected tokens, grouped by type (Color, Spacing, Font Size, etc.).
2. You can expand/collapse groups and see a preview of each value and how often it’s used.
3. Click the double-arrow icon in each group to change the sort order (e.g., by usage, value, or alphabetically).

3. Generate variables:

1. Click the **Generate Variables** button at the bottom.
2. The plugin will create all tokens as Figma Variables in a new "Primitives" collection if no other collection is selected.

Tips for best results

1. Variables 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.

1. Supports:

- Solid and gradient colors values

- Spacing (auto layout)

- Padding (horizontal/vertical)

- Corner radius

- Font family, size, weight, line-height, line-spacing

Happy designing! 🎨✨