Color fills to Variables

About this plugin

Color fills → Variables

Turn the colors used in your designs into Figma Color Variables in just a few steps.

This plugin lets you capture solid fill colors from selected layers, review how they’re used, and create color variables with consistent naming and grouping, without manual copy-paste or risky overwrites.

What it does

1. Captures unique SOLID fill colors from selected layers
2. Shows usage count per color and sorts them by luminance
3. Lets you review and edit variable names before creation
4. Optionally generates structured names using a prefix and steps (50 / 100)
5. Groups variables automatically using Figma’s slash notation
6. Safely handles existing variables with optional overwrite control

Why it’s useful

1. Quickly migrate existing designs to Figma Variables
2. Bootstrap or extend a color system from real UI usage
3. Reduce naming errors and duplicated variables
4. Keep your Variables panel clean and organized

How it works

1. Select one or more layers
2. Click Capture colors
3. Review and optionally customize names
4. Create color variables

Designed for designers working with design systems, tokens, and scalable UI foundations.