How to replace hard-coded colors with variables in Figma

To replace hard-coded colors with variables in Figma, work in four passes: find every raw color in the file, map each one to a variable, rebind the layers, then check what's left. For small files you can do all of it with Figma's Selection colors panel. For large or messy files, a plugin that matches raw values to variables and shows a preview before it changes anything saves hours.

This is the job you get with an inherited file, an agency handover, or a product that grew faster than its design system. Here's the process I use, and the tools that help at each step.

Before you start

• Work on a copy of the file, or a branch if your plan has branching. Bulk rebinding is easy to get wrong and tedious to undo.
• Have the variables ready. You need a collection to map to. If the file has none, set up a primitives collection and a semantic layer first; our primitive vs semantic tokens explainer covers the structure, and a generator plugin can create it for you.
• Decide what counts as "the same color". Inherited files often have #1F2937, #1F2938 and #202937 doing one job. Pick a rule (I snap anything within a step or two of a palette value to that value) and write it down.

Step 1: find the hard-coded colors

Select a top-level frame, or everything on a page, and look at the Selection colors section in the right sidebar. Figma's help center says it groups the colors in a mixed selection by variable, style and plain fill, with each color shown once. So in one view you see:

• which colors already use a variable,
• which use a style,
• and which are raw hex values.

The target icon next to a color selects every layer that uses it, which is how you find out where an odd one-off lives.

Do this page by page and keep a simple list: hex value, how many places, what it seems to be for.

Step 2: map raw values to variables

Turn your list into a mapping table before you touch any layer:

Two rules make this go faster:

• Map to semantic variables, not primitives. #2563EB on a button should become action/primary, even though the value is blue/600. That's what lets dark mode and rebrands work later.
• One raw value can map to several roles. White might be both a background and text on a filled button. Map by what the layer does, not only by its value.

Step 3: rebind the layers

By hand with Selection colors

For each raw color in Selection colors, click Style next to it to open the Libraries picker, then choose the variable from your mapping table. Figma applies it to every layer in the selection that used that color. If a color maps to two roles, use the target icon to select its layers, split them by role, and bind each group separately.

This is the safest method because you see every change. It's slow on big files, but nothing changes that you didn't pick.

With a plugin

Plugins help most when the file is large or when you need to swap one variable for another across all pages. User counts and features below come from the Community pages, read on October 25, 2026.

• Tokenify (3,200 users, updated September 2026) matches the color values in fills and borders to variables in a collection you pick. It resolves aliases to find the matching value, and it respects each variable's scopes, so a text-only color won't land on a frame fill.
• Styles to Variables (90,621 users) is for files that already use color styles. It converts solid and transparent color styles into variables, can turn first-level style groups into modes, and can link the styles to the new variables. Its notes on mode limits predate Figma's increase to 10 modes on Professional, and its last listing update was in November 2024.
• Color Variable Replacer (507 users) swaps one variable for another in bulk across fills and strokes, on a selection, a page or all pages. It's useful after the first pass, when you merge duplicate variables.
• TokenOps (513 users) is a linter for variables: unused and duplicate values per mode, alias loops, naming rules, and remapping bindings from a CSV with a preview. It's new, with one release so far.

Whichever plugin you use, run it on one page first and compare before and after.

Step 4: check what's left

Select the page again and look at Selection colors. The goal isn't zero raw colors; it's zero raw colors that should be tokens. Legit exceptions include:

• illustrations, photos and brand artwork,
• third-party logos,
• one-off marketing visuals you don't want in the system.

For everything else, two quick tests:

• Switch a frame to Dark mode (if the collection has one) with Apply variable mode. Anything that stays light is still hard-coded or bound to a primitive.
• Change one primitive temporarily, such as blue/600, and see which layers follow. Undo afterwards.

Do the same for spacing, radius and type

Colors are the start. The same four passes work for number variables: padding, gap, corner radius and font size. Figma's variable scopes matter more here, because a raw 16 could be padding, a radius or a font size. Scope each number variable to the properties it belongs to before you rebind, so pickers and plugins only offer sensible matches.

Where Huekit fits

Huekit is our own plugin, and this cleanup is one of the jobs we built it for. Our Audit & Repair step scans an existing file, shows you the bindings it proposes before anything changes, and then binds colors, type styles, spacing, radius and sizes to your tokens. If the file has no variables yet, we can also generate a system from the current file first, so there's something to bind to. See huekit.io for what each plan includes.

A quick comparison

FAQ

How do I replace a hex color with a variable in Figma?

Select the layers, find the color in the Selection colors section of the right sidebar, click Style to open the Libraries picker, and choose a variable. Every layer in the selection using that color gets the variable.

Can I convert color styles to variables?

Yes. Plugins such as Styles to Variables convert color styles into a variable collection and can link the old styles to the new variables.

How do I find all hard-coded colors in a Figma file?

Select a page's frames and check Selection colors. Raw values appear separately from variables and styles, and the target icon selects every layer using a color.

Is there a plugin that binds hex colors to the closest variable?

Tokenify matches color values in fills and borders to variables in a collection you choose. Check its matches on one page before running it on the whole file.

Should I bind colors to primitives or semantic variables?

Semantic variables. Binding to action/primary instead of blue/600 is what lets dark mode and rebrands work without rebinding again.

Start with one page

Pick the page your team edits most, run Step 1, and build the mapping table for just that page. Most of the values you find there will repeat across the rest of the file.