Variables Bae 🔠📐🌈

For Developers who Roll Their Eyes at Design Tweaks, and Designers Who Think Variables Are So Boring

Welcome to Variables Bae — where setting up your design system’s variables is faster than you can say “just one more round of tweaks!” This is a love letter to the pragmatists who want their variables systematic, scalable, and done yesterday.

🔥 Instant Variable System Creation

Say goodbye to tedious variables setup in Webflow. With Variables Bae, create a harmonized, scalable system in just one click. Set it and forget it, because we know you’ve got better things to do (like pointing out padding inconsistencies).

Features:

Size, Color, and Type Variables – All in a Click

Bae's got every Webflow primitive (and a few more). Size? Color? Typography? We support all the units devs care about (px, rem, em, vw, vh, you name it). Your meticulous, time-sinking alignment of each breakpoint has officially met its match.

Import Variables from Anywhere

• Algorithmic options for when you want the computer to do the work.
• Manual Batch Mode for when you know exactly what you want and can’t stand click-heavy UIs.
• Figma Import for designers who think “just copying the styles over” is a quick fix. Bring those styles in bulk — a bridge between Figma and Webflow that just works.

Color Palette Generator 🖍️

You’ve got taste; we've got options. Generate palettes in multiple color spaces (hsl, rgb, lrgb, okhsl, lab) with built-in hue shifting, accessibility checking, and yes — whimsical color names that are as unique as your design ambitions.

Toolbox:

1. Size Variables: Set up min, max, step, ease, and units for all your layout needs. Bonus points: organize everything into neat folders with customizable names. Fewer clicks, more control.
2. Typography Scale: Choose from harmonious scales (in rem or px), set the root font size, and auto-generate utility classes that actually make sense. It's your Webflow Holy Grail for consistent type.
3. Color Palette Generator (again, because it’s that good): HSL, RGB, LRGB, OkHSL, Lab color spaces, lightness stops, hue shifts, accessibility checks, and — let’s be real — you’ll spend hours on this alone. This could be an app on its own.
4. Manual Import Mode: Because batch imports should feel more like batching and less like rage-quitting.
5. Figma Import: Designers, it’s time. Export your Figma variables and pull them into Webflow with no unnecessary conversions, but if you’re in a pinch, there’s a px to rem converter option, because we know someone is going to ask for it.

TL;DR

Variables Bae isn’t for everyone. It’s for the designers who live for details and the developers who just want a sane variable system without the headache. Whether you’re building from scratch or converting from Figma, Variables Bae is here to bring a little order to your Webflow chaos — all in the name of ruthless efficiency.

Oh and it's FREE. You also have the option to buy a license, which will remove remove my plea for your hard-earned cash, but I'd prefer you take it for a test drive first to see how you like it. As always, if you have any suggestions, send them my way. I love building Webflow apps and I hope you like this one!