Framer Update, Layout & Design

Framer Update: February 2024 with Visual Overrides

Benjamin

2:14

6.8K views

Feb 29, 2024

About this lesson

The February Update introduces the ability to see which properties across Breakpoints and Component Variants you have overridden, helping you better understand how inheritance works and ultimately making it easier to design layouts and components in Framer. When selecting a Layer in a Breakpoint or Variant, you will notice a few properties get highlighted. These have values that do not match with the Primary, and thus do not inherit changes. You can reset the override by clicking on the label and hitting “Reset Override”. https://www.framer.com/updates/february-update-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:03let's talk about what's new in this 0:05month's framer update here we have a 0:08simple navigation demo that I'll use to 0:10illustrate some new features here we 0:13have three breakpoints if we select the 0:16navigation bar on the tablet or desktop 0:20breakpoint you'll see everything in the 0:23property panel looks the 0:25same however if I select the same 0:28navigation in the phone breakpoint a few 0:32properties will be highlighted these are 0:35properties that we have overridden 0:38within this breakpoint meaning the 0:41values are not the same as they are in 0:43the primary breakpoint which in this 0:45case is the desktop breakpoint to reset 0:49these overrides I can simply click on 0:52the label and hit reset I'll go ahead 0:55and quickly undo that here so framer 0:57will now tell you which property ities 1:00you've changed helping you better 1:02understand inheritance across break 1:04points which ultimately should help you 1:07design layouts in framer so at a glance 1:10we can see that width height Direction 1:13and GAP have been customized for this 1:15navigation within the phone breakpoint 1:18and this will also now work for 1:21component variants here we can see this 1:24navigation has two variants one open one 1:27closed and When selecting the closed 1:30variant we can quickly see which 1:33properties have been overridden and 1:35likewise we can click to reset these 1:38overrides so any new value we change in 1:41this variant like opacity will be 1:44highlighted to let you know that this 1:46value no longer matches with the primary 1:49variant in conclusion we hope this helps 1:52you better understand your break points 1:55and your variants allowing you to design 1:57better sides faster that's it for this 2:01video for everything else that's new in 2:03the February update please go to framer 2:07dcom updates thank you for watching and 2:10see you in the next 2:12one

TeachesBreakpoints Component Variants

Also coversComponents

Watch on YouTube ↗

‹ Free SaaS Website UI Kit for Framer and Figma

Framer CMS Update: New Filters, Field Descriptions, Multi-Select, Image Focal Points ›