New: Webflow Variables

Get project cloneable (affiliate link)
webflow.grsm.io/tricks?path=n...
Join my Webflow Wizards Community
/ timothyricks

[@talon_smith]

Once again Tim, I have been looking around for a tutorial to help me with a certain development task, and you are the only tutorial that does it! Keep killing it!

[@lukasschorn]

This is awesome Tim! Thank you for your super quick response to Webflow Confs announcement! These two tutorials on Variables and Native Spline Integration are the perfect setup for any future WF project! 🚀 Thanks, wizard!🙏🏻

[@timothyricks]

So glad these are helpful! Thank you for watching!

[@alzibaba]

What an awesome to-the-point run-through, thank you! Really excited by the Webflow conference announcements.

[@timothyricks]

So glad this helps! Thank you!

[@tethron.]

this makes things so much better now, and also ties in with lumos!

[@corneromme]

I love how you see this as something that will strengthen Lumos, instead of seeing it as a threat. Great video Timothy! 💙

[@timothyricks]

Thank you! This native support will lower the learning curve and reduce reliance on embeds. Huge win!

[@benvsantos]

It's just so helpful. Tim, thank you so much! We gain a lot of knowledge from you

[@timothyricks]

Thanks so much for the encouragement! I'm really glad this helps!

[@alexhartan]

Great tutorial Timothy Ricks! I'd love to see in a future video how would you use variables in the interactions panel.

[@hoaithuong8088]

OMG! This is mind-blowing!!!! Thanks for the wonderful tutorial video, Tim!

[@timothyricks]

Thank you for the kind words! So excited also about these updates!

[@totallyempty]

Wow! This addition of custom code brings it to the next level! Especially what you did with dark mode

[@timothyricks]

So many possibilities!

[@vasu9760]

Amazing, thanks Tim for sharing it so quickly...👍

[@timothyricks]

So glad this helps!

[@PaytonClarkSmith]

This is super helpful! Loving the direction Webflow is headed. Thanks Tim!

[@timothyricks]

Thanks so much, Payton! Totally agree! This focus on new designer features is awesome

[@dnoco]

Very informative as usual Tim, Thanks!

[@timothyricks]

Thank you!

[@jameslavine]

Such a concise and helpful walkthrough, Tim! Can't wait until Webflow incorporates "variable modes" like Figma has done. Then light/dark mode for entire sections/pages will be fully native with no custom code.

[@timothyricks]

Thanks so much! Yes, I agree! Hopefully they make it robust enough to link to component fields and also swap themes on child components like buttons and cards.

[@poface4827]

This is amazing. I needed this feature yesterday and I wake up today and it's here. Ha hA ! that is nuts. So helpful.

[@timothyricks]

So glad to hear this!

[@davidfitcher2953]

Hey Timothy, thanks for another amazing video.

[@timothyricks]

Thanks for watching! 😄

[@jelenajovanovic1472]

Awesome 💯😎 Thank you Timothy!

[@TheRodionu]

Wow, what a neat trick :)

[@marijanastojanovic198]

Keep on grooving, thanks, Timothy! :)

[@timothyricks]

Thank you! Will do

[@nemocreativestudio]

This is awesome, T-rex. Thank you.

[@michamazur9367]

Great tutorial, thanks a lot! 🙌

[@timothyricks]

So glad this helps!

[@imjoshochoafpvpilot6462]

Im new to webflow and learning from you has been challenging but great!! Thank you Tim! Do you know if variables can be imported to an existing proyect? I want to import a complete style guide (including variables) to a client's project and from there restructure everything.

[@valdiszhvaginsh]

Thanks!

[@luisabalan63]

Hi Timothy! This video is super helpful! Thank you for all your informative content. I'm wondering, would you be willing to do a video showing how you build a simple web page using the Lumos V2? I'm curious to see your thought process on how you build something from scratch, and how you manage your work flow. It would be great to have a foundation to build off of when going over your more complex tutorials!

[@timothyricks]

Thanks so much! I’m really glad this helps, and thank you for the suggestion! I definitely plan to do a full build with v2 as soon as I can fit it in

[@IkevanGerven]

Again very smart and widely applicable. Good job! Suppose I now want to adjust a few partner PNG logos for dark mode with, for example, 'filter: invert() grayscale();'... can that also be done via a custom CSS code or custom attribute? Many thanks!

[@101alexv]

A lot of what powers Lumos are the spacing.css and layout.css within the Lumos cdn. How will variables change this? Are you going to make a shift to native variables? If so, how does that work with Lumos? Thanks for all your hard work Timothy!

[@timothyricks]

Great question! I'm working on a V2 of Lumos that will use native variables. It should greatly lower the learning curve for new Webflow devs and limit reliance on embeds. I'm waiting for Webflow's custom css properties to release to see how all these things can work together. Utility classes are still very important for keeping our code clean, but now we'll be able to set their values natively.

[@Hmdbln]

Thank you so much Tim

[@TheAlex12341]

pretty amazing - thanks for sharing! Does someone know how you could create a dark mode "on click" with variables? can I connect all of them in a way to turn the dark mode on and off for the whole project?

[@brendinventer6407]

Don't know where I'd be without you ❣

[@jonasarleth]

Good Update for lumos! :)

[@user-xp6hy2gi2d]

Can I have different variable value for different breakpoints ? For instance I want a variable for font size but I don't want it to be same for desktop and mobile

[@sangavfx]

Thank you. looks awesome. How do you use this variable light or dark mode switch on the page?

[@timothyricks]

Thanks so much! I have a cloneable here for a persistent light and dark mode switch. It works by adding a class of dark-mode to the html element whenever the switch is on. That dark-mode class can easily be used to update values of our variables with other variables like I showed in this tutorial. :) webflow.grsm.io/dark-mode

[@RRDoker]

It's great!

[@goldenant9450]

jeez, everything i know is now in question. i love this for colors, specifically text colors; but for padding it seems a bit more messy compared to just creating a few divs: padding-large, padding-medium, padding-small. this way your breakpoint changes are built-in to each class. but I also used the client-first strategy, thus I already utilized dedicated divs for global changes. i'm very interested to see how variables change things

[@timothyricks]

Great point! I'm hoping that Webflow works on a way to change the value of a variable across breakpoints. If they do, padding divs will become really inefficient

[@michafilip6876]

So can't import tokens from code or theming set ups in Figma? Looks like this feature would be really time-consuming to use with very little upside

[@weareprsvr]

Hey Timothy, great video! What screen recording software are you using here to record these presentations, if you don't mind. Thanks in advance.

[@timothyricks]

Thanks! I'm using Screen.Studio. It's really awesome

[@djcl13]

This is an amazing video Tim! Thank you once more for all your hard work and passion placed into these. I spotted a sneaky native style change on your SVG icons using the swatches - how did you get this to happen natively in webflow? Minute mark 6:45 👀

[@timothyricks]

Thanks so much! I added the icon’s svg code inside an embed and changed the fill color to “currentColor”. This sets the icon’s color to match its parent’s font color.

[@djcl13]

So clever! Thanks for this reply 🙏🏼 I’ll try it out on my next project 🙌

[@timothyricks]

@@djcl13 Thank you! Sounds great!

[@jansleyreal]

Wow this was super helpful! So would you use variables to set colors for all elements, or would there be a reason to style an element without using a variable?

[@timothyricks]

Thank you! I generally lean towards setting light and dark variables for all elements. Even if the design calls for an element being the same color in both modes. Having both color variables allows us to later change all dark mode buttons for instance if needed instead adjusting each type of button one by one.

[@dean_nicholas]

Any idea how I create this so the standard is in dark mode?

[@edenassos]

Can you set a noise gate on your microphone so your background noise isn't recorded?

[@MR-DURO]

Thanks. Is there a way to resort or rearrange the variables names once we've created a few of them?

[@timothyricks]

Not currently sadly

[@creativeembargo]

finally variables, can I connect them to a repository like GitLab and connect them to my variables in Figma? Seems like we still need to wait but would be great to hook it to my semantic variable set in the designsystem

[@timothyricks]

They announced during the keynote that the Figma to Webflow plugin will support bringing over variables in the next couple months.

[@anushgopalakrishnan]

It seems like a no-brainer to me to have one variable be able to contain values for each breakpoint instead of having 4 separate variables. Hope that's coming soon!

[@timothyricks]

I really hope so also! That would be a huge unlock. There's a lot of empty space in the variables panel to the right. I'm hoping breakpoint values is what that space will be used for.

[@Bars_Sl]

Are variables not used in Interactions? I could only see new Change variable action, but it's still confusing since it's applied to class or element but changes the variable globally.

[@timothyricks]

Good question! They can be used in interactions. From what I can tell, no matter what element we apply the action to, it only animates the variables on the html element. I’m not sure if that’s a bug or intentional

[@hendriv]

Thanks for this ❤ would love a cloneable of this🥰 followed your video but am missing something in my project that doesn’t allow this dark mode to work.

[@timothyricks]

Thanks for watching! Sure thing, here's the link! 🙂webflow.grsm.io/tricks?path=new-webflow-variables

[@hendriv]

Amazing, what a legend!@@timothyricks Thank you so much really appreciate it!

[@system2213]

Hi Tim, I'm a bit confused about Lumos' relevance in light of Webflow's new native variables. Does Lumos still offer value that isn't covered by Weblow's variables? I'm about to start a large project and want to make sure I'm basing it around the best framework to make it future-proof. Thanks.

[@timothyricks]

Good question! There's a lot that can be done in Lumos that isn't possible with native variables yet. I'm working on creating Lumos V2 to combine native variables with custom code to remove a lot of those limitations. Even simple things like switching a button or card theme using data attributes.

[@michafilip6876]

Good shout@@timothyricks . Current implementation in Webflow looks like a stub of a feature

[@andresochoa3040]

WOW!

[@Astendor]

So are variables basically the "styles" page you do before a project?

[@timothyricks]

They won’t replace the styles page, but they’ll be a big part of the global styles we create.

[@thevectorbox]

Looks like Tim got a early access

[@auroraflash]

That's fast.

[@dsurajev]

Hi! Do variables make frameworks like finsweet, lumos and others obsolete?

[@101alexv]

I was wondering this, I don't think it will make finsweet obsolete. But Lumos is built on css variables, so i'm interested to see if a lot of the variables that powers Lumos will be moved into Webflow native variables.

[@timothyricks]

With variables & custom css properties coming out, every framework will need to evolve or get left behind. I'm working on Lumos V2 that will use native variables and reduce the learning curve. The way Lumos handles utility classes and data attributes has always been what makes it special. Those will continue to be important even with the addition of native variables.

[@dsurajev]

@@timothyricksthanks! Can’t wait for the updated version of Lumos!

[@tylerbeaty]

If only there was a 2-way sync with Figma variables (or token studio). Having to manage both of these databases will get confusing!

[@waleedkh9769]

Hasn't Webflow had classes for quite some time? What's the distinction?

[@timothyricks]

Variables are for saving an individual style while a class is usually made up of multiple styles. One variable can be used inside multiple classes for greater global control. Something like a font-family utility class could be used to save that style and added to multiple elements, but a font-family variable is more powerful because we can choose to apply it only inside a hover state, active state, a certain breakpoint, when nested inside rich text, on first CMS item, and many other places that a utility class wouldn’t work for.

[@sezyboii]

how do you open developer tool

[@timothyricks]

On the published site, right click anywhere on the page and then click "inspect"

[@brandingowyninja2387]

Looking like lumos incorporated into webflow :)

[@timothyricks]

For sure! A lot is changing for the best

[@brandingowyninja2387]

@@timothyricks Definitely. Do you plan to create a version of lumos using webflow variables? Or will you stick with pure CSS? I am asking because when I started the same with figma variables, the next day you shared a great set already prepared - and using the version done by you helps with the overall consistency of lumos.

[@timothyricks]

@@brandingowyninja2387 Yes, I'm working on Lumos V2 that will use native variables and reduce the learning curve. A lot is still changing with Webflow variables and custom css properties so I'm waiting for the dust to settle to give a clear solution.

[@von_fuer_]

Great video! I just don't get why you create "swatch" variables and then create "color" variables. Why not just use the swatch variables in the designer? Am I missing something?

[@timothyricks]

Thank you! This extra layer allows us to adjust specific styles across multiple elements. The button-background variable could be applied to a play button, slider button, and social button so we can change them all from brand to black without completely replacing the brand swatch. I have a tutorial on tokenizing a design system here. kzbin.info/www/bejne/sF7baWqldt6Lhbssi=0EWySz-WtrrUaze2

[@seanchen7256]

I remember seeing them change to dark mode using webflow interaction on webflow conf. Could just be my brain fog?

[@timothyricks]

Yes, that’s totally possible! We can animate the body to change each light mode variable to dark.

[@seanchen7256]

I just tried everything out. You can't reference the variable if it's linked to another variable in WF interaction. So if u wanna live without custom code you'll have to skip the swatch concept and just directly define color.

[@vladimirpetroski7089]

Calling it amazing is putting it light...ly :)

[@martijnaanstoot3439]

He is the goat!