Framer Update

Framer Update: October 2024

Benjamin

4:23

9.8K views

Oct 25, 2024

About this lesson

The October Update brings a ton on quality-of-life updates and bug fixes. OpenType is now available for all Form Inputs, and those now support Max Length as well. A new Draggable style allows you to block user-drags on images and links. Component Variants can now be sorted alphabetically with a single action. Relative Overlays now support the Close Overlay interaction in Components. And if you hold ⌃ while dragging a Layer in a Stack, you can instantly make it absolutely positioned. Watch the video to learn more, or read more here: https://framer.com/updates/october-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:03I&#39;ll highlight seven updates included in 0:06framer October release starting with a 0:10new property for images and links here 0:13we have an image and within the browser 0:17this will be user draggable if this is 0:20something you&#39;d like to prevent you can 0:23now find a new property in the Styles 0:25menu called dragable that will allow you 0:28to prevent this behavor Behavior so this 0:31image is now no longer user draggable 0:34next let&#39;s talk forms here I have a 0:37simple form and the labels here are 0:40using some new open type features but 0:43the actual inputs aren&#39;t simply because 0:46it was not yet supported in this release 0:49we added complete open type support for 0:52all inputs in forms allowing us to 0:55completely match the typography as shown 0:58in the labels like using the single 1:01story a and our alternative L and I can 1:06simply copy and paste the input styles 1:09onto this input to bring them over using 1:13command shift C and V this can be 1:17especially useful for numbers we can use 1:20some alternative numbers but we can also 1:23now use tabular numbers within framer 1:27inputs and that&#39;s not everything we&#39;re 1:30adding the max length property which is 1:32especially useful for text areas and it 1:36allows you to Simply limit the amount of 1:39characters you would like a user to be 1:41able to type within your input we can 1:45find it under the input properties and 1:48let&#39;s keep the default at 100 and give 1:51this a preview and now as I&#39;m typing my 1:54message I&#39;ll eventually hit the 1:57character limit of 100 2:00nudging me to make my message a little 2:02bit 2:07shorter next new sorting options for 2:10Stacks here we have a simple navigation 2:14and these items are sortable so I can 2:17drag them around but now if I hold 2:20control while sorting this layer will 2:24now get position set to Absolute instead 2:27of relative taking it out of the flow of 2:31the stack very useful for Rapid layout 2:35iteration next a handy new sorting 2:39action for your components let&#39;s say you 2:42have a component like this with a bunch 2:45of variant and you would like all 2:48variants to be sorted alphabetically 2:51well now I can hit command K to open the 2:54actions menu type sort and select sort 2:58layers alphab a atically and this will 3:01handle all top level variants meaning if 3:04we go back to the instance this menu is 3:08now also sorted a nice win for larger 3:12components next we brought the fit 3:15content action to component instances 3:19you can find the action by right 3:21clicking or by hitting shift a which 3:24I&#39;ll do right now and as you can see 3:28this has reset the width and height to 3:30Auto ensuring the size matches with how 3:34it&#39;s defined within the component and 3:37last but not least we now support the 3:41close overlay interaction within 3:44components so here we have a relative 3:47overlay with a close button with it 3:50selected I can add the close overlay 3:54interaction and then let&#39;s give this a 3:58preview the tool tip appears on 4:01Hover and I can manually click the 4:04button to close the overlay as well and 4:09that&#39;s pretty much it for this video 4:12thank you so much for watching and stay 4:14tuned for more updates coming soon

TeachesForm Inputs Validation

Also coversComponent Variants Components Hover & Press Links Sizing Stacks Typography

Watch on YouTube ↗

‹ Framer Awards 2024

CMS Update: Previous / Next Items, Hide & Show Fields, and More ›