Create Variables

A Webflow project that grew page by page usually keeps its color decisions inside class names rather than in the Variables panel. Nothing about that is broken, but changing a brand color means editing every class that carries it, and none of those colors can be reassigned by a variable mode later. Webflow gives you a Variables panel to fix exactly this. What it does not give you is a button that fills the panel from the classes you already built.

Create Variables is a free Webflow App, published by Berens, that reads a project's classes, picks out the ones whose names contain background-color- or text-color-, and writes a matching color variable for each. It compares against the variables you already have before it writes, so a second run does not duplicate anything.

That puts it at one specific moment in a project's life: an older site with disciplined color class naming, about to move onto variables. Everything after that migration, and every token type other than color, belongs to Webflow's own variables system or to an agent working over MCP.

How to integrate Create Variables with Webflow

Create Variables installs from the Webflow Apps marketplace and runs inside Webflow from the Apps panel, and the honest first question is whether you need it at all, because Webflow's MCP server now covers the same job and a great deal more of it.

What is Create Variables? Create Variables is a Webflow App that scans a site's classes for the prefixes background-color- and text-color-, reads the color property off each matching class, and creates a color variable from it. It is free, reviewed by Webflow, and handles color only.

Teams reach for it during cleanup rather than during design work: the site already exists, the palette already exists inside the class names, and someone wants it in the panel so that modes, aliases, and single-point edits become possible. The integration comes down to three routes, and they answer different questions. Prompting an agent over MCP builds or refactors variables of any type from a description of what you want. Installing the Create Variables app does one narrow job with one button and nothing to write. Using functions in variable values takes whichever set you end up with and makes it fluid.

Prompt an agent over MCP

Start here, because this route did not exist when the app was built. Webflow's MCP server names design systems among its documented capabilities: defining variables, color schemes, typography scales, and spacing systems. Migrating legacy styles to design variables and modern breakpoint configurations is listed outright as an automation pattern, which is the same work this app automates for one token type.

Connect the server to a supported client such as Claude Code or Cursor, authorize the workspace, then describe the migration in a sentence. An agent reads your actual classes, so no prefix convention is required, and it can create size, percentage, number, and font family variables in the same pass, group them, alias them, and set up modes. It works inside your existing Webflow permissions and roles, and every change it makes lands in the site activity log for review.

The app still wins on one axis, and it is a real one: determinism. It applies a fixed rule, with no prompt to word carefully, no output to audit, and no chance of an agent naming something creatively or touching a class you did not mention. If your prefixes really are clean and all you want is the color set lifted into the panel, the button beats describing the job. The moment the naming is inconsistent, or you want anything other than color, prompting wins by a wide margin.

Install the Create Variables app

This is the one-button route and it takes about a minute end to end.

1. Install Create Variables from its Webflow Apps marketplace listing while logged in to your Webflow account.
2. Open the site you want to convert and launch the app from the Apps panel.
3. Click the button in the app panel and wait for the class scan to finish.
4. Open the Variables panel and check the new color variables before you rebind any styles to them.

What comes back is one color variable per matching class and nothing else. Classes named any other way are skipped, and sizes, spacing, typography, and font family variables are untouched. The app creates no modes and no aliases, so the design system work starts after it finishes rather than being done by it. Support is a single email address, hello@berens.io, which is worth knowing before you build a team process around it.

Extend the variables with functions and custom code

Once the colors are in the panel, most of what used to require hand-written CSS is available in Webflow itself. You can set functions in variable values rather than static values, using clamp(), calc(), min(), max(), and color-mix(). Open the Connect menu on a variable's value by clicking the purple binding dot, filter to Functions, pick one, and enter the expression. That covers fluid type scales and color ramps without a line of custom code.

Custom code still has its place, because variables compile to CSS custom properties and a Code Embed can read any of them with var(). One caution we flag in our own variables documentation: the CSS names of non-base collection variables are due to change, so hand-written references to those may need updating later. Where you have the choice, reference base collection variables from custom code and keep the rest bound through the Style panel.

What you can build with the Create Variables Webflow integration

The app itself produces one thing, a color palette in the Variables panel. What makes it worth running is everything Webflow lets you do once that palette exists, which is set out in full in our guide to using a design system.

These are the patterns worth planning for before you convert anything:

• A single-pass color migration: Lift an entire legacy palette out of class names into variables in one run, then rebind styles gradually instead of hunting hex values across a site.
• Themes built on the migrated palette: Add a manual variable mode, override the colors it should change, and apply it to the body or a single section through the Style panel selector dropdown.
• Responsive values without per-breakpoint styling: Attach a mode to tablet, mobile landscape, or mobile portrait so linked styles pick up different values automatically at that breakpoint.
• A palette shared across a Workspace: Publish variable collections, including their modes, through Libraries so several sites read the same color decisions from one place.
• Color-aware custom code and interactions: Reference the same variables from embedded CSS with var(), and animate or set them inside Interactions with GSAP.

If the palette is arriving from design rather than from old classes, the Figma to Webflow route handles that direction instead. And for anything beyond color, connect the MCP server and describe the design system you want built.