Variables Bae

How to integrate Variables Bae with Webflow

The easiest way to set up your Variables Bae Webflow integration is by installing the Variables Bae app from the Webflow Apps marketplace. The app runs directly inside Webflow with no external dashboards, accounts, or code required. You can generate variables algorithmically, paste values in batch mode, or import design tokens from Figma.

All variables created through Variables Bae are standard Webflow variables. They appear in Webflow's native Variables panel and can be applied through the Style panel like any other variable.

Use the Variables Bae app

Install the Variables Bae app from the Webflow Apps marketplace. Once installed, it appears in your Webflow Designer panel. This official YouTube walkthrough covers the full setup and creation workflow.

The app supports multiple input methods, each generating Webflow's native variables:

• Generate variables algorithmically by setting a min value, max value, step count, easing curve, and unit type. Variables Bae calculates the scale and creates every variable automatically. This works for spacing systems (e.g., 4px to 128px with exponential easing) and typography scales using ratios like major third, perfect fourth, or golden ratio.
• Batch-create variables manually by pasting tab-separated values from a spreadsheet or design token list. Variables Bae parses each value, applies your chosen unit, and generates the corresponding variables.
• Import variables from Figma by exporting your Figma variables as JSON and uploading the file into Variables Bae. The app creates matching Webflow variables with mode-based naming support and optional px-to-rem conversion.
• Generate color palettes across HSL, RGB, LRGB, OkHSL, and LAB color spaces with hue shifting controls and built-in WCAG contrast checks with pass/fail indicators.

Generated variables support the following features:

• Units supported include px, rem, em, vw, and vh.
• Variable types include colors, sizes, font families, numbers, and percentages.
• Aliases let one variable reference another (e.g., button-background references primary-500).
• CSS functions supported include calc(), clamp(), min(), max(), and color-mix().
• Variable modes store multiple values per variable for themes, breakpoints, or other variants.

You can organize variables into custom folder structures (e.g., spacing/small or colors/primary). The app requires access to site data for variable manipulation and read access to authorized user information for license validation.

Import design tokens from Figma

Variables Bae supports direct import of Figma design tokens through JSON files. Export your variables from Figma as JSON, upload the file into Variables Bae in Webflow, and the app creates corresponding Webflow variables with mode-based naming for variants like light and dark themes.

This workflow maintains design consistency between Figma and Webflow and reduces manual translation errors.

Build theme systems with variable modes

Webflow's variable modes let you store multiple values within a single variable — for example, different color values for light and dark themes. Variables Bae's color palette generator can create the initial palette with WCAG-verified contrast values, and you can then assign those color variables to different modes through Webflow's Style panel.

Use variable aliases to map semantic tokens (like surface-background) to mode-specific primitives (like neutral-100 for light or neutral-900 for dark). Changes to primitive values cascade automatically through all aliases.

What you can build with Variables Bae and Webflow integration

Integrate Variables Bae with Webflow to create a systematic foundation for design tokens across your entire site.

• Accessible marketing sites with verified color systems: Generate a full color palette with WCAG contrast checks built in and apply those variables site-wide. Every text-background combination passes accessibility standards before you publish.
• Multi-brand sites using variable collections: Create separate variable collections for each brand's spacing, colors, and typography. An agency portfolio site can present different client brands with a consistent structure but a distinct visual identity by swapping between collections.
• Figma-to-Webflow production sites: Import design tokens directly from Figma JSON exports so your Webflow build matches the design file. Designers hand off Figma variables, and developers apply them without manual translation.
• Responsive layout systems with algorithmic spacing: Generate a mathematically consistent spacing scale using algorithmic mode and apply those size variables to grids, padding, and margins. Use variable modes to adjust values across breakpoints.