Framer Update, Layout & Design

Framer Update: Variables for Styles

Benjamin

2:02

9.6K views

Mar 28, 2024

About this lesson

The March Update introduces Variable support for all Styles, making Components more flexible and customizable. We added support for many new visual styles, like Borders and Shadows, as well as properties you’ll often need in your Navigations and Footers, such as Overflow, Transition, and Scrollbars. You can find a list of all Variables we added here: https://framer.com/updates/march-updates-2024

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00yo my name is Benjamin and in this video 0:04let's talk about what's new in the March 0:06update this release brings variable 0:09support to all styles in 0:12components as you can see any of these 0:15properties can now be turned into a 0:17variable even ones like 0:20transition so I'll select my image here 0:24and let's turn border into a variable so 0:27we can edit it later in Contex text here 0:31we can edit the default values the 0:34default color I have set to a white 0:37color with a 5%0:40alpha and let's also add a variable for 0:44radius and I'll keep the default value 0:47at 24 pixels variables allow us to 0:50create much more flexible components 0:53with a set of good default values that 0:55can still be customized later in either 0:58break points or different Pages for 1:01example here we can see that this image 1:03might need a bit of a stronger border so 1:06we can go ahead and set the alpha to 10 1:09instead then looking at our break points 1:12we can see that the radius is much too 1:15high on the phone break point so we can 1:17go ahead and customize it just for this 1:20break point to something like 16 pixels 1:25and all of this without affecting every 1:27single instance next to the the visual 1:30Styles like borders and shadows we made 1:33sure to support all properties you may 1:35need for your navigations like overflow 1:39scroll bars and transition allowing you 1:42to create more flexible and more 1:44customizable navigations and Footers 1:47that's pretty much it for this video 1:50thank you so much for watching and for 1:52everything else that's new be sure to 1:55check framer dcom 1:58updates

TeachesVariables

Also coversComponents Transitions & Easing

Watch on YouTube ↗

‹ Framer Event — Spring 2024, Introducing 3D Transforms, and a sneak peek at Plugins

Framer Update: Workspaces ›