Variables Bae
Fast primitive variable creation for complex design systems.
Fast primitive variable creation for complex design systems.
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:
- 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.
- 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.
- 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.
- Manual Import Mode: Because batch imports should feel more like batching and less like rage-quitting.
- 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!
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:
- 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.
- 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.
- 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.
- Manual Import Mode: Because batch imports should feel more like batching and less like rage-quitting.
- 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!
- One-Click Systematic Variable Creation: Create size, color, and type variables for a fully cohesive design system in Webflow with a single click.One-Click Systematic Variable Creation: Create size, color, and type variables for a fully cohesive design system in Webflow with a single click.
- Universal Import Options: Pull in variables from Figma, algorithmic setups, or bulk manual input — no more wrestling with endless imports.Universal Import Options: Pull in variables from Figma, algorithmic setups, or bulk manual input — no more wrestling with endless imports.
- Advanced Color Palette Generator: Generate accessible, customizable palettes in multiple color spaces (HSL, RGB, OkHSL, LAB, etc.), with hue shifting, lightness stops, and unique color naming.Advanced Color Palette Generator: Generate accessible, customizable palettes in multiple color spaces (HSL, RGB, OkHSL, LAB, etc.), with hue shifting, lightness stops, and unique color naming.
- Flexible Size Variables Setup: Define min, max, step, ease, and units (rem, px, em) with organized folders and name customization.Flexible Size Variables Setup: Define min, max, step, ease, and units (rem, px, em) with organized folders and name customization.
- Scalable Typography Scale Generator: Choose harmonious type scales with automatic utility class generation for headings, paragraphs, and more.Scalable Typography Scale Generator: Choose harmonious type scales with automatic utility class generation for headings, paragraphs, and more.